Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
One-time setup that gathers your project's design context and saves it to CLAUDE.md for future sessions.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
reference/ux-writing.md
1# UX Writing23## The Button Label Problem45**Never use "OK", "Submit", or "Yes/No".** These are lazy and ambiguous. Use specific verb + object patterns:67| Bad | Good | Why |8|-----|------|-----|9| OK | Save changes | Says what will happen |10| Submit | Create account | Outcome-focused |11| Yes | Delete message | Confirms the action |12| Cancel | Keep editing | Clarifies what "cancel" means |13| Click here | Download PDF | Describes the destination |1415**For destructive actions**, name the destruction:16- "Delete" not "Remove" (delete is permanent, remove implies recoverable)17- "Delete 5 items" not "Delete selected" (show the count)1819## Error Messages: The Formula2021Every error message should answer: (1) What happened? (2) Why? (3) How to fix it? Example: "Email address isn't valid. Please include an @ symbol." not "Invalid input".2223### Error Message Templates2425| Situation | Template |26|-----------|----------|27| **Format error** | "[Field] needs to be [format]. Example: [example]" |28| **Missing required** | "Please enter [what's missing]" |29| **Permission denied** | "You don't have access to [thing]. [What to do instead]" |30| **Network error** | "We couldn't reach [thing]. Check your connection and [action]." |31| **Server error** | "Something went wrong on our end. We're looking into it. [Alternative action]" |3233### Don't Blame the User3435Reframe errors: "Please enter a date in MM/DD/YYYY format" not "You entered an invalid date".3637## Empty States Are Opportunities3839Empty states are onboarding moments: (1) Acknowledge briefly, (2) Explain the value of filling it, (3) Provide a clear action. "No projects yet. Create your first one to get started." not just "No items".4041## Voice vs Tone4243**Voice** is your brand's personality, consistent everywhere.44**Tone** adapts to the moment.4546| Moment | Tone Shift |47|--------|------------|48| Success | Celebratory, brief: "Done! Your changes are live." |49| Error | Empathetic, helpful: "That didn't work. Here's what to try..." |50| Loading | Reassuring: "Saving your work..." |51| Destructive confirm | Serious, clear: "Delete this project? This can't be undone." |5253**Never use humor for errors.** Users are already frustrated. Be helpful, not cute.5455## Writing for Accessibility5657**Link text** must have standalone meaning: "View pricing plans" not "Click here". **Alt text** describes information, not the image: "Revenue increased 40% in Q4" not "Chart". Use `alt=""` for decorative images. **Icon buttons** need `aria-label` for screen reader context.5859## Writing for Translation6061### Plan for Expansion6263German text is ~30% longer than English. Allocate space:6465| Language | Expansion |66|----------|-----------|67| German | +30% |68| French | +20% |69| Finnish | +30-40% |70| Chinese | -30% (fewer chars, but same width) |7172### Translation-Friendly Patterns7374Keep numbers separate ("New messages: 3" not "You have 3 new messages"). Use full sentences as single strings (word order varies by language). Avoid abbreviations ("5 minutes ago" not "5 mins ago"). Give translators context about where strings appear.7576## Consistency: The Terminology Problem7778Pick one term and stick with it:7980| Inconsistent | Consistent |81|--------------|------------|82| Delete / Remove / Trash | Delete |83| Settings / Preferences / Options | Settings |84| Sign in / Log in / Enter | Sign in |85| Create / Add / New | Create |8687Build a terminology glossary and enforce it. Variety creates confusion.8889## Avoid Redundant Copy9091If the heading explains it, the intro is redundant. If the button is clear, don't explain it again. Say it once, say it well.9293## Loading States9495Be specific: "Saving your draft..." not "Loading...". For long waits, set expectations ("This usually takes 30 seconds") or show progress.9697## Confirmation Dialogs: Use Sparingly9899Most confirmation dialogs are design failures; consider undo instead. When you must confirm: name the action, explain consequences, use specific button labels ("Delete project" / "Keep project", not "Yes" / "No").100101## Form Instructions102103Show format with placeholders, not instructions. For non-obvious fields, explain why you're asking.104105---106107**Avoid**: Jargon without explanation. Blaming users ("You made an error" → "This field is required"). Vague errors ("Something went wrong"). Varying terminology for variety. Humor for errors.108