plugin87/ux-ui-agent-skills

ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules.

View source

How to use

  1. Copy the installation command and review the source package before installing it in your own agent environment.
  2. Check the source document for required tools, credentials and supported hosts.
  3. Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill ux-writing

Before you start

  • Installation does not include a model subscription, API allowance or permission to access your files.
  • Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

Skill: UX Writing

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Produce or critique interface copy in the project's voice.

Steps

  1. Read ${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md (voice principles, tone spectrum, formulas, microcopy patterns, inclusive language, pre-ship checklist).
  2. Match tone to the user's emotional state (onboarding/success/routine/error/destructive). Higher stress → plainer language.
  3. Apply the formulas:
  • Buttons: frontload the verb, name the outcome.
  • Confirmation dialogs: the confirm button restates the action and object — "Delete account", not "Delete"/"OK"/"Yes"/"Confirm". The title asks ("Delete account?"), the button answers in matching words. Cancel stays "Cancel". For irreversible/high-stakes actions, require a type-to-confirm step (WCAG 3.3.4/3.3.6).
  • Errors: what happened → why → how to fix (no dead ends, no codes/stack traces).
  • Empty states: value → first action.
  1. Enforce mechanics: sentence case, no ALL CAPS, numerals, no blame on the user, labels (not placeholders), no directional/color-only instructions.
  2. Run the 10-item pre-ship copy checklist.

Output

Final copy (or a redline review) that reads naturally aloud and passes the checklist. Keep within any character limits for tight UI.

Verification (mandatory before declaring done)

Run every line through the 10-item pre-ship checklist in ${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md — do not skip it:

  • Reads naturally aloud; frontloaded verb on actions; no jargon/blame/dead-ends.
  • Errors follow what→why→how; empty states give value→action; no bare "No data"/"Error".
  • Mechanics: sentence case, numerals, labels (not placeholders), no color/direction-only cues, inclusive language.
  • Within character limits; translatable (no concatenation — see ${CLAUDE_SKILL_DIR}/../../../accessibility/i18n-rtl.md).

Related by task

from this repository

More skills

All skills
plugin87
Community

a11y-audit

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.

installs
1
GitHub stars
2.8K
Updated
Oct 20
plugin87
Community

apply-aesthetic

Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.

installs
1
GitHub stars
2.8K
Updated
Oct 20
plugin87
Community

brandkit

Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.

installs
1
GitHub stars
2.8K
Updated
Oct 20
plugin87
Community

critique

Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.

installs
1
GitHub stars
2.8K
Updated
Oct 20