mcpField
U
ux-writing

ux-writing

github.com/slb2248Design & UI5143 installsUpdated 29w ago
Repository

About ux-writing

ux-writing is a writing skill for people creating interface copy. It provides guidance for clear, concise and helpful text across common UI states.

Key features

  1. 01Clarity, brevity and helpfulness principles
  2. 02Action-oriented button labels
  3. 03Problem-and-fix error messages
  4. 04Empty-state and loading copy
  5. 05Success messages and next steps
  6. 06Voice and tone by context

Use cases

  1. 01Drafting labels for interface buttons
  2. 02Explaining errors and ways to resolve them
  3. 03Writing messages for empty or loading screens
  4. 04Shaping onboarding and success messages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/slb2248/ai-ux-skills --skill ux-writing

After installing, type/ux-writingin Claude Code to confirm it loaded.

Details

From the project README

UX Writing

Write clear, helpful copy that guides users through your interface.

Core Principles

1. Clarity Over Cleverness
  • Use simple, familiar words
  • Avoid jargon and technical terms
  • Say what you mean directly
2. Be Concise
  • Cut unnecessary words
  • One idea per sentence
  • Front-load important information
3. Be Helpful
  • Tell users what to do, not just what happened
  • Provide next steps
  • Reduce anxiety and uncertainty

Button Labels

Do
  • Use action verbs: "Save," "Send," "Create"
  • Be specific: "Add to Cart" not "Submit"
  • Match user intent: "Sign up free"
Don't
  • Generic: "OK," "Submit," "Continue"
  • Vague: "Click here," "Go"
  • Negative framing: "Don't cancel"
Examples
Instead ofUse
SubmitSend Message
OKGot it
ContinueNext: Payment
CancelKeep Editing
Yes/NoDelete / Keep

Error Messages

Formula

What happened + Why + How to fix it

Examples

❌ "Error 404" ✅ "Page not found. Try searching or go back to the homepage."

❌ "Invalid input" ✅ "Please enter a valid email address (e.g., [email protected])"

❌ "Something went wrong" ✅ "We couldn't save your changes. Check your connection and try again."

Guidelines
  • Be specific about the problem
  • Avoid blame ("You entered...")
  • Suggest a solution
  • Use plain language, not error codes

Empty States

What to Include
  1. What this space is for
  2. Why it's empty
  3. How to fill it
Examples

No search results "No results for 'xyz'. Try different keywords or check your spelling."

Empty inbox "No messages yet. When someone contacts you, you'll see it here."

First-time user "Your projects will appear here. Create your first project to get started."

Loading & Progress

Short waits (< 2 seconds)

Just show a spinner, no text needed

Medium waits (2-10 seconds)

"Loading your dashboard..." "Saving changes..."

Long waits (> 10 seconds)

"Processing your video. This usually takes 1-2 minutes." Show progress percentage when possible

Success Messages

Be Specific

❌ "Success!" ✅ "Your profile has been updated."

Confirm the Action

"Message sent to [email protected]" "Order #12345 confirmed. Shipping in 2-3 days."

Suggest Next Steps

"Password changed. You can now sign in with your new password."

Tooltips & Hints

When to Use
  • Explain unfamiliar UI elements
  • Provide context for actions
  • Show keyboard shortcuts
Keep Them Short
  • Under 150 characters
  • One concept per tooltip
  • No critical information (tooltips are hidden by default)

Onboarding Copy

Welcome Messages
  • Acknowledge the milestone
  • Set expectations
  • Point to first action

Example: "Welcome to Acme! Let's set up your workspace in 3 quick steps."

Progressive Disclosure
  • Don't explain everything at once
  • Introduce features when relevant
  • Use inline hints over tutorials

Voice & Tone Guidelines

Voice (Consistent)
  • Friendly but professional
  • Clear and direct
  • Helpful and supportive
Tone (Varies by Context)
SituationTone
SuccessCelebratory, warm
ErrorCalm, helpful
WarningSerious, clear
OnboardingEncouraging, patient
SettingsNeutral, informative

Comments

Markdown supported