ss-copy
$
npx mdskill add bitjaru/styleseed/ss-copy- For long-form content (blog posts, docs, marketing pages) — out of scope - For full feedback state design (not just text) → use `/ss-feedback` - For brand voice/tone definition itself — this skill consumes a voice spec, doesn't create it - For translations to non-English languages — single-language only
SKILL.md
.github/skills/ss-copyView on GitHub ↗
---
name: ss-copy
description: Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
argument-hint: [context] [description]
allowed-tools: Read, Write, Edit, Grep, Glob
---
# UX Microcopy Generator
## When NOT to use
- For long-form content (blog posts, docs, marketing pages) — out of scope
- For full feedback state design (not just text) → use `/ss-feedback`
- For brand voice/tone definition itself — this skill consumes a voice spec, doesn't create it
- For translations to non-English languages — single-language only
Context: **$0**
Description: $ARGUMENTS
## Instructions
1. Read the design language reference:
- `DESIGN-LANGUAGE.md` sections on Microcopy Tone Guide and UX Writing
2. Apply the voice principles:
### Tone Rules
- **Casual but polite**: Friendly, not robotic. Like talking to a helpful friend.
- **Active voice**: "We saved your changes" not "Your changes have been saved"
- **Positive framing**: "Free shipping on orders over $30" not "Orders under $30 have shipping fees"
- **Plain language**: "Send money" not "Initiate transfer"
- **Concise**: Every word must earn its place
### Copy Patterns by Context
#### Button Labels (CTA)
```
Format: [Action verb] + [Object] (optional)
Good: "Place order", "Get started", "Save changes", "Try again"
Bad: "Submit", "OK", "Click here", "Proceed to next step"
```
- One primary CTA per screen
- Label must clearly describe what happens next
- Max 3 words for primary CTA
#### Empty States
```
Format: [Friendly observation] + [Suggested action]
Good: "No activity yet. Create your first project to get started."
Bad: "No data found."
```
- Always suggest a next action
- Use a relevant icon (32px, text-text-tertiary)
- Tone: encouraging, not blaming
#### Error Messages
```
Format: [What happened] + [What to do]
Good: "Couldn't load the data. Please try again."
Bad: "Error 500: Internal Server Error"
```
- Never show technical errors to users
- Blame the system, not the user
- Always provide a recovery action
#### Toast Notifications
```
Format: [Confirmation of what happened]
Good: "Saved!", "Changes applied", "Item deleted · Undo"
Bad: "Operation completed successfully"
```
- Max 2 lines
- Include "Undo" link for reversible destructive actions
- Info toasts: 3 seconds. Action toasts: 5 seconds.
#### Form Labels & Helpers
```
Label: Noun phrase ("Email address", "Password")
Placeholder: Example or hint ("name@example.com")
Helper: Format guidance ("Must be at least 8 characters")
Error: Specific issue ("This email is already registered")
```
#### Confirmation Dialogs
```
Title: [Question about the action]
Body: [Consequence explanation]
Primary: [Action verb] ("Delete", "Confirm")
Secondary: "Close" (not "Cancel" — avoids confusion)
```
3. Generate copy for the requested context, providing:
- Primary copy (what to display)
- Variants (if context varies)
- Do's and Don'ts for the specific context
More from bitjaru/styleseed
- ss-a11yAudit a component or page for accessibility issues and fix them
- ss-auditAudit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
- ss-componentGenerate a new UI component following the StyleSeed design conventions
- ss-feedbackAdd appropriate user feedback states (loading, success, error, empty) to a component or page
- ss-flowDesign user flows and navigation structure following proven UX patterns
- ss-lintQuick automated lint — detects common design system violations in seconds
- ss-motionApply a named StyleSeed motion to a component — either one of the 5 personality seeds (Spring/Silk/Snap/Float/Pulse × entrance/exit/hover/press/layout) or a distinctive keyword move from the motion library (toggle-flip, toggle-curtain, reveal-blur, pop-in, shimmer, …). Translates vibe words into framer-motion code from one source of truth.
- ss-pageScaffold a new mobile page/screen using the StyleSeed layout patterns
- ss-patternGenerate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
- ss-reviewReview UI code for design system compliance, accessibility, and best practices