ux-copylisted

# UX Copy — UI Text That Works Production-ready UX copy patterns for React and Next.js applications. Every pattern includes real JSX examples — not just advice, but copy you can use directly in components. **This skill works in two modes:** - **Greenfield** — establishing voice, writing first copy, setting up copy architecture - **Mature codebase** — auditing existing copy, fixing inconsistencies, refactoring for clarity ## Architecture Overview ``` [Voice Definition] ├── Voice worksheet (4 dimensions: formality, humor, authority, warmth) ├── Tone spectrum map (which contexts allow flexibility) └── Project voice profile ("confident, precise, reassuring") ↓ [Component Copy Rules] ├── Buttons → verb-first, specific action, 2-4 words ├── Errors → what happened + why + what to do ├── Empty states → explain + guide + single CTA ├── Confirmations → name the action, never Yes/No ├── Notifications → severity determines tone and persistence ├── Labels → describe the field, not the format └── Tooltips → one sentence, answers "what is this?" ↓ [Writing] ├── Apply universal rules (plain language, active voice, front-load) ├── Modulate tone to context (errors serious, onboarding flexible) └── Match existing voice if mature codebase ↓ [Review] ├── 3 C's test: Clear → Concise → Character ├── Read aloud test └── Consistency check (1 entity = 1 term) ``` ## Quick Reference | Need to