Skip to main content
skill CX Codex

ux-writing · plugin87 — Claude Code skill: UI copy and installation

Write or review interface text, from button labels to errors and empty states. The skill applies a project’s voice and checks copy against a pre-ship checklist.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a claude-code
Open on GitHub

What ux-writing does

Use the skill to draft or critique interface copy, including labels, notifications, error messages, and empty states. Errors follow a what happened, why, and how to fix it structure; empty states pair the value with a first action. The checks cover inclusive language, tone, and character limits.

The skill reads content/voice-tone.md from the kit, then adjusts tone to the user’s situation and runs a pre-ship checklist. It also refers to accessibility/i18n-rtl.md when checking whether copy can be translated. The kit files are required: if they cannot be read, the skill stops instead of guessing their contents.

What it helps with

  • rewrite an error message with a clear next step
  • draft an empty state that points to a first action
  • clarify a button label
  • review interface copy for tone and inclusive language

Example prompts for the agent

  • Rewrite these error messages to explain what happened, why, and how to fix it.
  • Draft an empty-state message that shows the value and gives the user a first action.
  • Review these button labels and notifications for clarity, tone, and inclusive language.

How to install ux-writing

1Skills CLI (Vercel)

npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a claude-code

2Manually: put the files in place

~/.claude/skills/ux-writing/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/ux-writing/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about ux-writing

How do I install ux-writing in Claude Code?

Run npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a claude-code. The skill file is installed at ~/.claude/skills/ux-writing/SKILL.md.

What does ux-writing do?

It drafts or reviews interface copy, including buttons, errors, and empty states. It follows the project voice and checks the result against a pre-ship checklist.

Which files does the skill need?

It reads content/voice-tone.md from the kit. If that file cannot be accessed, the skill stops rather than guessing the project’s writing rules.

Source text

SKILL.md · MIT
---
name: ux-writing
description: Write or review UI copy (buttons, errors, empty states, microcopy, notifications, labels) using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.
---

# Skill: UX Writing

> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

Produce or critique interface copy in the project's voice.

## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md` (voice principles, tone spectrum, formulas, microcopy patterns, inclusive language, pre-ship checklist).
2. Match tone to the user's emotional state (onboarding/success/routine/error/destructive). Higher stress → plainer language.
3. Apply the formulas:
   - Buttons: frontload the verb, name the outcome.
   - **Confirmation dialogs:** the confirm button **restates the action and object**: "Delete account", not "Delete"/"OK"/"Yes"/"Confirm". The title asks ("Delete account?"), the button answers in matching words. Cancel stays "Cancel". For irreversible/high-stakes actions, require a **type-to-confirm** step (WCAG 3.3.4/3.3.6).
   - Errors: what happened → why → how to fix (no dead ends, no codes/stack traces).
   - Empty states: value → first action.
4. Enforce mechanics: sentence case, no ALL CAPS, numerals, no blame on the user, labels (not placeholders), no directional/color-only instructions.
5. Run the 10-item pre-ship copy checklist.

## Output
Final copy (or a redline review) that reads naturally aloud and passes the checklist. Keep within any character limits for tight UI.

## Verification (mandatory before declaring done)
Run every line through the 10-item pre-ship checklist in `${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md`. Do not skip it:
- Reads naturally **aloud**; frontloaded verb on actions; no jargon/blame/dead-ends.
- Errors follow what→why→how; empty states give value→action; no bare "No data"/"Error".
- Mechanics: sentence case, numerals, labels (not placeholders), no color/direction-only cues, inclusive language.
- Within character limits; translatable (no concatenation; see `${CLAUDE_SKILL_DIR}/../../../accessibility/i18n-rtl.md`).

© plugin87 · MIT · plugin87/ux-ui-agent-skills

Similar skills

Everything for Design →

ux-writing by other authors comes first.

From the same set16

redesign This skill audits an existing interface and revises its design while preserving working features. Use it to refresh a website or app without changing its core behavior. CX Codex +1 535installs apply-aesthetic Picks a visual direction — an archetype or a named design system — and resolves it into your project's tokens. Useful when you want a specific look, not whatever the agent improvises. CX Codex +1 529installs design-code This skill generates component and screen code for a requested framework. Use it when you need token-based UI with accessibility checks. CX Codex +1 525installs design-component Produces UI component specifications covering anatomy, 8 interactive states, tokens, and accessibility. Useful when designing components in a design system before coding. CX Codex +1 522installs design-qa This skill sets up checks for tokens, contrast, accessibility, and visual regressions. Use it to QA a component or screen before release. CX Codex +1 516installs brandkit Build a token-based design foundation from a product brief, with separate light and dark themes and contrast checks. Use it to establish shared visual rules before designing screens. CX Codex +1 510installs migrate-design-system Maps your design tokens to another system and back: Material 3, Apple HIG, Fluent 2, shadcn/ui, Radix. Useful when you borrow a look or move onto a new stack. CX Codex +1 487installs prototype Guides interface design across a five-tier fidelity ladder from content to code. It helps map user flows, build wireframes, and draft usability test plans. CX Codex +1 484installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor