Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot official · Anthropic

ux-copy — Claude Code skill for interface copy and setup

Draft or review interface text, from button labels to error messages. Useful when wording needs to fit a specific screen, user state, and tone.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add anthropics/knowledge-work-plugins --skill ux-copy -a claude-code
Open on GitHub

What ux-copy does

The skill drafts and reviews interface copy for CTAs, errors, empty states, tooltips, confirmation dialogs, and onboarding. It uses the screen or flow, the user's goal and state, the desired tone, and any character limits you provide. Specific context gives it more to work with.

For errors, it follows a pattern: explain what happened, why, and how to fix it. For empty states, it covers what the screen is for and how to get started. The response can include a recommended version, alternatives with tone and use cases, rationale, and localization notes. When a design tool is connected, it can check the Figma screen and layout constraints.

Share any length limits before asking for copy. Brand voice guidance comes from a connected knowledge base, so attach the relevant guide or connect that source if the wording must follow it. The skill does not infer brand rules from the interface alone.

What it helps with

  • write a button label that matches its action
  • revise an error message to explain the next step
  • draft an empty state that tells users how to begin
  • word a confirmation dialog with clear consequences
  • adapt interface copy to a user state and tone

Example prompts for the agent

  • /ux-copy Write a button label for saving changes on the settings screen.
  • /ux-copy Review this payment error and explain what the user can do next.
  • /ux-copy Draft a friendly empty state for the project list.

How to install ux-copy

1Skills CLI (Vercel)

npx skills add anthropics/knowledge-work-plugins --skill ux-copy -a claude-code

2Manually: put the files in place

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

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

From the same set133

The whole set →
data-visualization official anthropics Selects chart types based on data structure and produces Python visualization code in matplotlib, seaborn, and plotly. Useful for reports and research figures. Claude Code CX Codex Cursor +1 13,700installs documentation official anthropics A skill for technical writing that drafts READMEs, API references, runbooks, architecture docs and onboarding guides. Useful when the code exists but the description does not. Claude Code CX Codex Cursor +1 10,300installs build-dashboard official anthropics Builds a self-contained HTML dashboard with Chart.js charts, KPI cards, and filterable tables. Useful for turning raw data or queries into a standalone browser report. Claude Code CX Codex Cursor +1 9,100installs memory-management official anthropics This skill organizes workplace shorthand, names, and project details into files an agent can consult. It fits projects where requests rely on an internal vocabulary and shared context. Claude Code CX Codex Cursor +1 7,400installs task-management official anthropics Tracks commitments, active work, and follow-ups in a local TASKS.md file. Useful when managing project to-dos directly from the AI coding chat. Claude Code CX Codex Cursor +1 7,200installs architecture official anthropics Writes an Architecture Decision Record or reviews a system design: options, trade-offs, consequences. Useful when you have to pick between technologies. Claude Code CX Codex Cursor +1 6,700installs knowledge-synthesis official anthropics Merges search results across chats, emails, and documents into deduplicated answers with source attribution. Flags conflicting facts and scores source reliability. Claude Code CX Codex Cursor +1 6,400installs testing-strategy official anthropics This skill designs testing strategies and test plans for a project. Use it when you need test types, coverage goals, or gaps in existing checks. Claude Code CX Codex Cursor +1 6,400installs

Similar

figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs interface-review jakubkrehel Audits pull requests, branches, and uncommitted edits for layout, UI, accessibility, and typography regressions. Keeps focus on what changed rather than pre-existing debt. Claude Code CX Codex Cursor +1 18,100installs react-vite-dashboard official google-labs-code This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. Claude Code CX Codex Cursor +1 5,400installs image-generation bytedance Builds structured JSON prompts and executes a Python script to generate images with optional reference files. Useful for character design and complex scene rendering. Claude Code CX Codex Cursor +1 2,900installs responsive-design Seth Hobson Guides responsive UI work with mobile-first styles, container queries, and fluid values. Use it when pages or components need to adapt to available space. Claude Code CX Codex Cursor 20,956installs ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about ux-copy

How do I install ux-copy in Claude Code?

Run npx skills add anthropics/knowledge-work-plugins --skill ux-copy -a claude-code. The skill file is at ~/.claude/skills/ux-copy/SKILL.md.

What does the ux-copy skill do?

It drafts and reviews interface text, including CTAs, errors, empty states, and confirmation dialogs. Its response can include a recommendation, alternatives, and rationale.

What context should I give ux-copy?

Describe the screen or flow, what the user is trying to do, the desired tone, and any character limits. For brand-specific wording, connect a knowledge base with the relevant guidelines.

Source text

SKILL.md · Apache-2.0
---
name: ux-copy
description: Write or review UX copy — microcopy, error messages, empty states, CTAs. Trigger with "write copy for", "what should this button say?", "review this error message", or when naming a CTA, wording a confirmation dialog, filling an empty state, or writing onboarding text.
argument-hint: "<context or copy to review>"
---

# /ux-copy

> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).

Write or review UX copy for any interface context.

## Usage

```
/ux-copy $ARGUMENTS
```

## What I Need From You

- **Context**: What screen, flow, or feature?
- **User state**: What is the user trying to do? How are they feeling?
- **Tone**: Formal, friendly, playful, reassuring?
- **Constraints**: Character limits, platform guidelines?

## Principles

1. **Clear**: Say exactly what you mean. No jargon, no ambiguity.
2. **Concise**: Use the fewest words that convey the full meaning.
3. **Consistent**: Same terms for the same things everywhere.
4. **Useful**: Every word should help the user accomplish their goal.
5. **Human**: Write like a helpful person, not a robot.

## Copy Patterns

### CTAs
- Start with a verb: "Start free trial", "Save changes", "Download report"
- Be specific: "Create account" not "Submit"
- Match the outcome to the label

### Error Messages
Structure: What happened + Why + How to fix
- "Payment declined. Your card was declined by your bank. Try a different card or contact your bank."

### Empty States
Structure: What this is + Why it's empty + How to start
- "No projects yet. Create your first project to start collaborating with your team."

### Confirmation Dialogs
- Make the action clear: "Delete 3 files?" not "Are you sure?"
- Describe consequences: "This can't be undone"
- Label buttons with the action: "Delete files" / "Keep files" not "OK" / "Cancel"

### Tooltips
- Concise, helpful, never obvious

### Loading States
- Set expectations, reduce anxiety

### Onboarding
- Progressive disclosure, one concept at a time

## Voice and Tone

Adapt tone to context:
- **Success**: Celebratory but not over the top
- **Error**: Empathetic and helpful
- **Warning**: Clear and actionable
- **Neutral**: Informative and concise

## Output

```markdown
## UX Copy: [Context]

### Recommended Copy
**[Element]**: [Copy]

### Alternatives
| Option | Copy | Tone | Best For |
|--------|------|------|----------|
| A | [Copy] | [Tone] | [When to use] |
| B | [Copy] | [Tone] | [When to use] |
| C | [Copy] | [Tone] | [When to use] |

### Rationale
[Why this copy works — user context, clarity, action-orientation]

### Localization Notes
[Anything translators should know — idioms to avoid, character expansion, cultural context]
```

## If Connectors Available

If **~~knowledge base** is connected:
- Pull your brand voice guidelines and content style guide
- Check for existing copy patterns and terminology standards

If **~~design tool** is connected:
- View the screen context in Figma to understand the full user flow
- Check character limits and layout constraints from the design

## Tips

1. **Be specific about context** — "Error message when payment fails" is better than "error message."
2. **Share your brand voice** — "We're professional but warm" helps me match your tone.
3. **Consider the user's emotional state** — Error messages need empathy. Success messages can celebrate.

© anthropics · Apache-2.0 · anthropics/knowledge-work-plugins

See also

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