ss-copy
starsforks
How to install ss-copy?
bitjaru/styleseed/ss-copy
$npx -y skills add bitjaru/styleseed --skill ss-copyGenerate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone
SKILL.md
| 1 | # UX Microcopy Generator |
| 2 | |
| 3 | ## When NOT to use |
| 4 | |
| 5 | - For long-form content (blog posts, docs, marketing pages) — out of scope |
| 6 | - For full feedback state design (not just text) → use `/ss-feedback` |
| 7 | - For brand voice/tone definition itself — this skill consumes a voice spec, doesn't create it |
| 8 | - For translations to non-English languages — single-language only |
| 9 | |
| 10 | Context: **$0** |
| 11 | Description: $ARGUMENTS |
| 12 | |
| 13 | > **Read `engine/UX-WRITING.md` first** — it's the rule set this skill applies: buttons |
| 14 | > name the action (not "Submit"), errors help instead of blame, empty states invite, |
| 15 | > money copy stays calm, one term per concept. Korean/CJK projects: see §W8 for the |
| 16 | > clear-calm-human "Toss feel" (존댓말 일관성, 사용자 관점 "내 계좌", 군더더기 빼기). |
| 17 | |
| 18 | ## Instructions |
| 19 | |
| 20 | 1. Read the design language reference: |
| 21 | - `DESIGN-LANGUAGE.md` sections on Microcopy Tone Guide and UX Writing |
| 22 | |
| 23 | 2. Apply the voice principles: |
| 24 | |
| 25 | ### Tone Rules |
| 26 | - **Casual but polite**: Friendly, not robotic. Like talking to a helpful friend. |
| 27 | - **Active voice**: "We saved your changes" not "Your changes have been saved" |
| 28 | - **Positive framing**: "Free shipping on orders over $30" not "Orders under $30 have shipping fees" |
| 29 | - **Plain language**: "Send money" not "Initiate transfer" |
| 30 | - **Concise**: Every word must earn its place |
| 31 | |
| 32 | ### Copy Patterns by Context |
| 33 | |
| 34 | #### Button Labels (CTA) |
| 35 | ``` |
| 36 | Format: [Action verb] + [Object] (optional) |
| 37 | Good: "Place order", "Get started", "Save changes", "Try again" |
| 38 | Bad: "Submit", "OK", "Click here", "Proceed to next step" |
| 39 | ``` |
| 40 | - One primary CTA per screen |
| 41 | - Label must clearly describe what happens next |
| 42 | - Max 3 words for primary CTA |
| 43 | |
| 44 | #### Empty States |
| 45 | ``` |
| 46 | Format: [Friendly observation] + [Suggested action] |
| 47 | Good: "No activity yet. Create your first project to get started." |
| 48 | Bad: "No data found." |
| 49 | ``` |
| 50 | - Always suggest a next action |
| 51 | - Use a relevant icon (32px, text-text-tertiary) |
| 52 | - Tone: encouraging, not blaming |
| 53 | |
| 54 | #### Error Messages |
| 55 | ``` |
| 56 | Format: [What happened] + [What to do] |
| 57 | Good: "Couldn't load the data. Please try again." |
| 58 | Bad: "Error 500: Internal Server Error" |
| 59 | ``` |
| 60 | - Never show technical errors to users |
| 61 | - Blame the system, not the user |
| 62 | - Always provide a recovery action |
| 63 | |
| 64 | #### Toast Notifications |
| 65 | ``` |
| 66 | Format: [Confirmation of what happened] |
| 67 | Good: "Saved!", "Changes applied", "Item deleted · Undo" |
| 68 | Bad: "Operation completed successfully" |
| 69 | ``` |
| 70 | - Max 2 lines |
| 71 | - Include "Undo" link for reversible destructive actions |
| 72 | - Info toasts: 3 seconds. Action toasts: 5 seconds. |
| 73 | |
| 74 | #### Form Labels & Helpers |
| 75 | ``` |
| 76 | Label: Noun phrase ("Email address", "Password") |
| 77 | Placeholder: Example or hint ("name@example.com") |
| 78 | Helper: Format guidance ("Must be at least 8 characters") |
| 79 | Error: Specific issue ("This email is already registered") |
| 80 | ``` |
| 81 | |
| 82 | #### Confirmation Dialogs |
| 83 | ``` |
| 84 | Title: [Question about the action] |
| 85 | Body: [Consequence explanation] |
| 86 | Primary: [Action verb] ("Delete", "Confirm") |
| 87 | Secondary: "Close" (not "Cancel" — avoids confusion) |
| 88 | ``` |
| 89 | |
| 90 | 3. Generate copy for the requested context, providing: |
| 91 | - Primary copy (what to display) |
| 92 | - Variants (if context varies) |
| 93 | - Do's and Don'ts for the specific context |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
