ux-writing

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, de

By content-designer · 1,925 installs

npx skills add content-designer/ux-writing-skill --skill ux-writing

Source repository · Upstream listing

UX Writing Write clear, concise, user centered interface copy (UX text/microcopy) for digital products and experiences. This skill provides frameworks, patterns, and best practices for creating text that helps users accomplish their goals. Compatible with: Claude, Codex, Cursor, and other agents that support the agent skills specification. Note: This skill works with Codex CLI/IDE, not ChatGPT. ChatGPT cannot install or use skills. When to Use This Skill Use this skill when: Writing interface copy (buttons, labels, titles, messages, forms) Editing existing UX text for clarity and effectiveness Creating error messages, notifications, or success messages Designing conversational flows or onboarding experiences Establishing voice and tone for a product Auditing product content for consistency and usability Core UX Writing Principles The Four Quality Standards Every piece of UX text should be: 1. Purposeful — Helps users or the business achieve goals 2. Concise — Uses the fewest words possible without losing meaning 3. Conversational — Sounds natural and human, not robotic 4. Clear — Unambiguous, accurate, and easy to understand Key Best Practices Conciseness Use 40 60 characters per line maximum Every word must have a job Break dense text into scannable chunks Front load important information Clarity Use plain language (7th grade reading level for general, 10th for professional) Avoid jargon, idioms, and technical terms Use consistent terminology throughout Choose meaningful, specific verbs Conversational Tone Write how you speak Use active voice 85% of the time Include prepositions and articles Avoid robotic phrasing User Centered Focus on user benefits, not features Anticipate and answer user questions Use second person ("you") language Match user's language and mental models UX Text Patterns Apply these common patterns for interface elements. Titles Purpose : Orient users to where they are Format : Noun phrases, sentence case Types : Brand titles, content titles, category titles, task titles Examples : "Account settings", "Your library", "Create new post" Buttons and Links Purpose : Enable users to take action Format : Active imperative verbs, sentence case Pattern : [Verb] [object] Examples : "Save changes", "Delete account", "View details" Avoid : Generic labels like "OK", "Submit", "Click here" Error Messages Purpose : Explain problem and provide solution Format : Empathetic, clear, actionable Pattern : [What failed]. [Why/context]. [What to do]. Error Message Types Validation Errors (Inline) Show as user completes field or on blur Brief, specific guidance to correct input Pattern: [Field] [specific requirement] Examples: "Email must include @" "Password must be at least 8 characters" "Choose a date in the future" Timing: Real time or on field exit Location: Below or beside the field System Errors (Modal/Banner) Show when backend operations fail Explain what happened and why Pattern: [Action failed]. [Likely cause]. [Recovery step]. Examples: "Payment failed. Your card was declined. Try a different payment method." "Couldn't save changes. Connection lost. Reconnect and try again." "Upload failed. File is too large. Choose a file under 10MB." Timing: Immediately after failure Location: Modal dialog or prominent banner Blocking Errors (Full screen) Prevent continued use until resolved Clear explanation of blocker and resolution Pattern: [What's blocked]. [Why]. [Specific action needed]. Examples: "Update required. This version is no longer supported. Update now to continue." "Subscription expired. Your account is paused. Renew subscription to restore access." "Verification needed. Confirm your email to access features. Check your inbox." Timing: On app launch or feature access Location: Full screen or large modal Permission Errors Explain benefit before requesting permission Pattern: [User benefit]. [Permission needed]. Examples: "Get notified when orders ship. Enable notifications." "Find nearby stores. Allow location access." "Back up your photos. Grant storage permission." Timing: When feature is first used Location: In context of the feature What to Avoid Technical codes without explanation ("Error 403") Blame language ("invalid input", "illegal character") Robotic tone ("An error has occurred") Dead ends (error with no recovery path) Vague causes ("Something went wrong") Success Messages Purpose : Confirm action completion Format : Past tense, specific, encouraging Pattern : [Action] [result/benefit] Examples : "Changes saved", "Email sent", "Profile updated" Empty States Purpose : Guide users when content is absent Types : First use, user cleared, error/no results Format : Explanation + CTA to populate Example : "No messages yet. Start a conversation to connect with your team." Form Fields Labels : Clear noun phrases describing input ("Email address", "Phone number") Instructions : Verb first, explain why information is needed Placeholder : Use sparingly, only for standard inputs like "name@example.com" Helper text : Static, on demand, or automatic based on importance Notifications Purpose : Deliver timely, valuable information Types : Action required (intrusive), Passive (less intrusive) Format : Verb first title + contextual description Example : "Update required. Install the latest version to continue." Voice and Tone Voice (Consistent Brand Personality) Voice is the consistent personality of the product. Establish voice using: Concepts : 3 5 key brand principles/values Voice characteristics : Descriptive adjectives for each concept Do/Don't examples : Concrete examples showing voice in action See references/voice chart template.md for creating a voice chart. Tone (Adaptive to Context) Tone is how voice adapts to specific situations. While voice remains constant, tone shifts based on user context and emotional state. Tone Variables Purpose : Why user is seeing this text (information, action, confirmation) Context : What user is trying to do (learning, completing task, recovering from error) Emotional state : How user likely feels (frustrated, excited, confused, cautious) Stakes : Impact of the action (low: changing theme, high: deleting account) Tone Adaptation by User Emotional State Frustrated (errors, failures, blockers) Empathetic and solution focused Acknowledge the problem without blame Provide clear recovery path Example: "Payment failed. Your card was declined. Try a different payment method." Confused (first use, complex features) Patient and explanatory Break down steps clearly Provide context and guidance Example: "Connect your bank to see spending insights. We'll guide you through it." Confident (routine tasks, return visits) Efficient and direct Minimal explanation Quick confirmation Example: "Saved" Cautious (high stakes actions, data loss) Serious and transparent Clear consequences Respectful of user's decision Example: "Delete account? You'll lose all data and this can't be undone." Successful (completions, achievements) Positive and encouraging Proportional to achievement Brief celebration Example: "Profile updated. Your changes are live." Tone Adaptation by Content Type Error messages : Empathetic, reassuring, solution focused Never blame user Explain what happened Provide clear next step Success messages : Positive, specific, encouraging Confirm what happened Proportional to action importance Brief and clear Instructions : Clear, direct, helpful Front load key action Explain why when needed Use simple steps Onboarding : Inviting, encouraging, concise Welcome without overwhelming Focus on value Celebrate early wins Confirmations : Serious, transparent, respectful Clear about consequences No manipulation Easy to back out Empty states : Hopeful, actionable, guiding Explain why it's empty Provide clear next action Keep encouraging tone Editing Process Edit UX text in four phases: Phase 1: Purposeful Does text help user achieve their goal? Does text serve business objectives? Is value to user clear? Are concerns anticipated and addressed? Phase 2: Concise Remove unnecessary words Combine redundant information Ensure every word earns its space Front load important concepts Phase 3: Conversational Read aloud—would you say this? Use active voice (unless passive is clearer) Include natural connecting words Avoid corporate jargon Phase 4: Clear Use specific, accurate verbs Maintain consistent terminology Test readability (Hemingway Editor, Flesch Kincaid) Ensure unambiguous meaning Workflow 1. Understand context User goals and needs Business objectives Technical constraints Emotional state of user 2. Draft content Start with conversation (what would you say?) Apply appropriate pattern Consider voice and tone Front load important information 3. Edit iteratively Phase 1: Purposeful Phase 2: Concise Phase 3: Conversational Phase 4: Clear 4. Test and measure Review with team Test with users when possible Measure task completion, comprehension Iterate based on feedback Accessibility in UX Writing Writing accessible content ensures all users, including those using assistive technology, can understand and interact with your product. Core Accessibility Principles Screen Reader Optimization Label all interactive elements explicitly ("Submit form" not just "Submit") Write descriptive link text ("Read pricing details" not "Click here") Structure error messages to work with screen readers (error + field label read together) Use ARIA labels when visual context isn't sufficient Cognitive Accessibility Target 8 14 words per sentence (8 words = 100% comprehension, 14 words = 90%) Break complex information into scannable chunks Use clear headings and logical hierarchy Provide consistent, predictable patterns Multi Modal Communication Don't rely on color alone to convey meaning Pair visual indicators with text ("Error: Email required" with red icon) Provide text alternatives for icons and images Ensure sufficient color contrast (WCAG AA minimum: 4.5:1) Plain Language for All Target 7th 8th grade reading level for general audience Define technical terms when first used Avoid idioms, metaphors, and cultural references Use common, everyday words Accessible Pattern Examples Buttons ❌ Poor: "Submit" (context missing for screen readers) ✅ Good: "Submit application" Links ❌ Poor: "Click here for more information" ✅ Good: "Read our privacy policy" Error Messages ❌ Poor: Red text showing "Invalid" ✅ Good: "Error: Email must include @" (with error icon) Form Labels ❌ Poor: Placeholder only fields ✅ Good: Visible label + optional placeholder UX Text Benchmarks Use these research backed metrics to create effective UX text. Sentence Length Targets By Content Type Buttons/CTAs : 2 4 words ideal, 6 word maximum Titles : 3 6 words, 40 characters maximum Error messages : 12 18 words (including solution) Instructions : 20 words maximum, 14 ideal Body copy : 15 20 words per sentence average Notifications : 10 15 words for title + body Comprehension Rates 8 words or fewer: 100% user comprehension 14 words or fewer: 90% user comprehension 25 words: Maximum before significant comprehension drop Character and Line Length Optimal Ranges Line length : 40 60 characters for maximum readability Button labels : 15 25 characters Page titles : 30 50 character