Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
Real-world examples not captured yet
This skill shows a gallery of live HTML demos (CDN libraries welcome — GSAP, Three.js, etc.) rendered inline via srcdoc.
Skill markdown
# Writing This skill writes and reviews interface copy such as labels, errors, empty states and confirmations, along with the terms that run through them. It matches the product's existing voice and flags copy that misleads people or leaves them without a way forward. A deliberate brand voice is not a defect. Raise a departure from plain language only when it creates inconsistency, ambiguity, translation risk or a tone the stakes don't support. Rewording that merely suits your taste is not a finding. How copy renders, including `text-transform`, truncation and smart punctuation, belongs to `better-typography`. Error markup, announcements and the attributes that carry accessible names belong to `better-accessibility`. Room for translated strings belongs to `better-layout`. ## Inventory the existing strings first Before writing or reviewing, find where the copy lives and read the copy around the change: 1. Search for the translation call (`t(`, `i18n.`, `<FormattedMessage`, `$t(`) and the locale files it reads, such as `locales/**/*.json`, `messages/*.json`, `*.po` and `*.strings`. Copy may also come from a CMS or the API. 2. List the noun used for each object and the verb used for each action, as in "project" or "workspace" and "Delete" or "Remove". 3. Note the case used per element type and any voice or content style guide. New copy uses the terms on that list. A synonym is a finding only where the same thing is named two ways. ## One voice, one vocabulary The product has one voice and its existing copy establishes it. A local edit does not get to invent a new one. If it's "Archive" in the menu, it isn't "Move to storage" in the toast. A multi-step flow uses one vocabulary throughout: "Get started" to enter, either "Continue" or "Next" to advance, "Done" to finish. Tone flexes with the stakes: | Context | Tone | | --- | --- | | Success, onboarding, empty states | Warm, can be light | | Routine actions, settings | Neutral, minimal | | Errors, destructive confirmations | Calm, plain, zero playfulness | | Data loss, security | Serious, explicit | ## Address the reader directly In instructional copy, write "you", not "the user". In errors, "we" reads as deflection, so prefer "Unable to load content. Check your connection and try again." An established first-person voice can stay in low-stakes copy where it still reads clearly. Use possessives sparingly: "Favorites" beats "Your favorites". Never mix perspectives in one flow, such as "My account" beside "Your settings". ## Plain words over clever ones Choose words a tired reader gets on the first pass, and delete every word that does no work. No idioms, no colloquialisms and no humor that won't translate. Skip unnecessary gender: "Subscribers can post recipes", not "each subscriber can post his or her recipes". Match the input device: "tap" on touch, "click" with a pointer, "select" when both are possible. ## Build strings whole Never assemble a sentence from fragments around a variable (`"You have " + n + " new messages"`), because word order changes per language. Write one message with placeholders, and use the locale's plural rules rather than `n === 1 ? "" : "s"`. Many languages have more than two plural forms. Format numbers, dates and lists through `Intl`. Recipes are in [patterns.md](patterns.md#plurals-and-placeholders). ## Verb-first buttons A button label starts with a verb naming the action: "Send", "Save draft", "Delete project". Never "OK!" or "Let's go!". An icon-only button's accessible name follows the same rule. It names the action, "Delete project", never the glyph, "Trash icon". The attribute that carries it is `better-accessibility`'s. ## Links describe their destination Link text makes sense out of context, because screen-reader users navigate by a list of the page's links. Write "Read the billing docs", never "Click here". A bare "Learn more" breaks down as soon as two appear on one page. Suffix each one: "Learn more about exports". ## One capitalization policy Pick title case or sentence case per element type, then apply it to every instance of that type. Sentence case is the default where the project has no policy. "Save Changes" beside "Discard changes" reads as sloppiness. ## Settings describe the ON state Label a toggle for what happens when it is on. "Send read receipts" lets users infer the off state; "Don't send read receipts" turns the toggle into a double negative. Link straight to a referenced setting rather than describing the path to it: a "Notification settings" link, not "Go to Settings > Notifications > Email". ## Errors say how to fix, next to where it broke An error is an instruction, and it belongs beside the field that failed: | Bad | Good | | --- | --- | | That password is too short | Choose a password with at least 8 characters | | Invalid date | Enter a date as DD/MM/YYYY | | Oops! Something went wrong. | Unable to save. Check your connection and try again. | No blame, no "oops" and no …
More from jakubkrehel
- Better AccessibilityReview and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
- Better ColorsOKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
- Better InterfaceRun a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
- Better LayoutImprove interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
- Better TypographyWeb typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
- Better UIDesign engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.