.claude/skills/ux-microcopy/SKILL.md
This skill provides senior UX writing expertise for crafting user-facing microcopy. It should be used when writing or reviewing UI text such as blank states, error messages, success messages, confirmation dialogs, tooltips, form labels, validation messages, loading states, onboarding text, CTAs, or any frontend component that communicates intention to the user. Also triggers when writing CLI output messages (progress feedback, errors, success confirmations, usage hints). Triggers on user-facing string literals in frontend code, empty state components, error boundaries, toast/notification text, modal copy, placeholder text, and CLI console.log/chalk/ora output messages.
npx skillsauth add PackmindHub/packmind ux-microcopyInstall 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.
Apply senior UX writing principles to produce clear, concise, and helpful microcopy for the Packmind product. All copy must be in English, use a formal tone, and follow the guidelines below to ensure a consistent, professional user experience.
Blank states appear when a list, page, or section has no content yet. They are an opportunity to orient the user and encourage action.
Structure:
Principles:
Example:
Headline: Organize your standards into packages
Description: Packages group related standards for easy distribution to your team.
CTA: Create a package
Structure:
Principles:
Example:
Title: Unable to save your changes
Description: The server could not be reached. Check your connection and try again.
CTA: Retry
Principles:
Example:
"Standard published to your team"
"Package created — add standards to get started"
Structure:
Principles:
Example:
Title: Delete this standard?
Description: This standard will be permanently removed from the package. This action cannot be undone.
Primary action: Delete
Secondary action: Cancel
Principles:
Example:
Label: "Visibility"
Tooltip: "Controls whether this standard appears in team members' editors"
Principles:
Example:
Label: "Package name"
Placeholder: "e.g., Frontend guidelines"
Validation: "Name is required"
Validation: "Name must be 100 characters or fewer"
Principles:
CLI messages provide feedback to developers running commands in the terminal. They must be scannable and informative.
Structure for progress/success:
Structure for errors:
Principles:
Examples:
Progress: "Fetching available packages..."
Success: "Package 'frontend' installed successfully"
Error: "Error: Unable to connect to the Packmind API. Verify your API key with `packmind-cli auth status`"
Warning: "Warning: 2 standards were skipped — they already exist in the target package"
Principles:
When writing or reviewing user-facing text in frontend components:
tools
Record polished UI demo videos and screenshots of a running web app using Playwright MCP — for client deliverables, release notes, feature walkthroughs, or bug repros. Produces an HD WebM video with chapter markers, a mandatory animated cursor overlay, and a mandatory subtitle bar that narrates each step (positioned deliberately so it never masks the UI being demonstrated), plus full-page screenshots at each step. Use this whenever the user asks to "record a demo", "create a screencast", "make a UI walkthrough video", "document this feature with video", "show the client how X works", "capture screenshots of the app", or anything similar — even when the user only says "make a video" or "take screenshots" in the context of a running frontend. Also use it when the user wants to demonstrate a workflow, generate marketing-quality footage of an app, or produce repeatable visual documentation.
tools
The canonical recipe for starting, checking, and stopping the Packmind local dev stack with Docker Compose — the single source of truth other skills and the Michel agent defer to. Covers bringing the full stack (PostgreSQL, Redis, NestJS API, React/Vite frontend on :4200, MCP server, nginx) up in the background, the init services (dependency install + TypeORM migrations) you must wait on, the critical host-port trap that the API on container port 3000 is NOT exposed to the host and must be reached via the frontend Vite proxy at localhost:4200/api/v0, confirming the API and frontend are actually serving before you depend on them, the persistent-volume gotcha that leaves stale Postgres schema and node_modules behind between runs, building the CLI, and tearing everything down so no container is left blocking the run. Use this whenever you need Packmind running locally — to verify a change, record a UI or CLI demo, hit the API, seed data, or reproduce a bug — and whenever you are about to start or stop `docker compose`. If you are an autonomous agent (e.g. Michel) that started the stack, you MUST use the teardown half before finishing. Prefer this over running `nx serve` on the host for anything that needs the real, containerized stack.
tools
Best practices for creating GitHub pull requests that include inline images — CLI terminal screenshots (from cli-demo-recorder), UI screenshots/videos (from ui-demo-recorder), or any other visual artifact. Use this skill whenever opening or updating a PR that has visual artifacts to embed, or when images aren't rendering in a PR description. Also use it when asked "how do I add screenshots to a PR", "why isn't my image showing", or "embed a demo in the PR".
tools
--- name: michel-create-packmind-dataset description: Seed a local Packmind instance with a realistic dataset — one organization populated with standards, commands, and skills — so an autonomous agent can exercise its own changes against lifelike data instead of an empty app. Use this whenever you need populated Packmind data to verify a change end-to-end: reproducing a bug that only shows with existing artifacts, recording a UI/CLI demo that needs content on screen, smoke-testing a new endpoint