a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and…
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. Use when the user needs interface copy, error
Claude Code
$ npx -y skills add plugin87/ux-ui-agent-skills --skill ux-writing --agent claude-code
Codex
$ npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a codex -y
Cursor
$ npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a cursor -y
Gemini CLI
$ npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a gemini-cli -y
GitHub Copilot
$ npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a github-copilot -y
OpenCode
$ npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a opencode -y
Windsurf
$ npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -a windsurf -y
name: ux-writing description: 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. Use when the user needs interface copy, error messages, empty-state text, or a copy review.
This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with `npx ux-ui-agent-skills@3.1.0 init` or as the Claude Code plugin. `npx skills@1.7.6 add` copies the skill folder and nothing else. Installed that way, this skill runs in **guidance-only mode**: no gate runs, so it gives no verdict.
> **Step 0: is the kit here?** Check once: > `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING` > On `KIT_MISSING`, open your reply with: "Guidance-only mode: the UX/UI Agent > Skills kit is not installed here, so no gate ran and nothing below is > measured." Then work from this file and general practice, under three rules. > Do not guess or cite the contents of a kit file you could not open. State no > measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not > verified" where one would go. End with a line `Skipped (kit not installed):` > that names every gate script this file tells you to run, then the install > command above.
Produce or critique interface copy in the project's voice.
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:
4. Enforce mechanics: sentence case, no ALL CAPS, numerals, no blame on the user, labels (not placeholders), no directional/color-only instructions. 5. Run the 10-item pre-ship copy checklist.
Final copy (or a redline review) that reads naturally aloud and passes the checklist. Keep within any character limits for tight UI.
Run every line through the 10-item pre-ship checklist in `${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md`. Do not skip it:
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and…
Apply a visual direction, an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 2,144…
Generate a complete, accessible brand design system from a brief, as primitive → semantic → component DTCG tokens (color, type,…
Adversarial design critique of the current work. Render it, look at it, and argue for rejection. Run after the gates are green,…
Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick,…
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue,…
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…