template/.claude/skills/clarify/SKILL.md
Improve unclear UX copy, error messages, microcopy, labels, and instructions. Makes interfaces easier to understand and use.
npx skillsauth add charles5277/nuxt-supabase-starter clarifyInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use.
Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: audience technical level and users' mental state in context.
Identify what makes the text unclear or ineffective:
Find clarity problems:
Understand the context:
CRITICAL: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets.
Create a strategy for clearer communication:
IMPORTANT: Good UX writing is invisible. Users should understand immediately without noticing the words.
Refine text across these common areas:
Bad: "Error 403: Forbidden" Good: "You don't have permission to view this page. Contact your admin for access."
Bad: "Invalid input" Good: "Email addresses need an @ symbol. Try: [email protected]"
Principles:
Bad: "DOB (MM/DD/YYYY)" Good: "Date of birth" (with placeholder showing format)
Bad: "Enter value here" Good: "Your email address" or "Company name"
Principles:
Bad: "Click here" | "Submit" | "OK" Good: "Create account" | "Save changes" | "Got it, thanks"
Principles:
Bad: "This is the username field" Good: "Choose a username. You can change this later in Settings."
Principles:
Bad: "No items" Good: "No projects yet. Create your first project to get started."
Principles:
Bad: "Success" Good: "Settings saved! Your changes will take effect immediately."
Principles:
Bad: "Loading..." (for 30+ seconds) Good: "Analyzing your data... this usually takes 30-60 seconds"
Principles:
Bad: "Are you sure?" Good: "Delete 'Project Alpha'? This can't be undone."
Principles:
Bad: Generic labels like "Items" | "Things" | "Stuff" Good: Specific labels like "Your projects" | "Team members" | "Settings"
Principles:
Every piece of copy should follow these rules:
NEVER:
Test that copy improvements work:
Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.
development
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.
development
Pinia Store 架構規範。Use when creating app/stores/**/*.ts files, working with defineStore, managing global state, or building Pinia stores. Always use this skill for store design patterns, naming conventions, and state management architecture.
tools
Push interfaces past conventional limits with technically ambitious implementations. Whether that's a shader, a 60fps virtual table, spring physics on a dialog, or scroll-driven reveals — make users ask "how did they do that?"
content-media
Improve interface performance across loading speed, rendering, animations, images, and bundle size. Makes experiences faster and smoother.