design

Installation
SKILL.md

Design interview → ./plans/<feature>/spec.md. Pipeline: scope → product → design → engineering → plan.

Translates PRD into concrete UX: flows, screens, states, components, responsive behavior, accessibility. Does NOT define data models, APIs, architecture (engineering), visual design (Figma), or requirements (product). Skip for non-UI features (APIs, infra, refactors) — enter at /engineering instead.

Phase: Design. Ask about interactions, not code. Technical constraints inform recommendations silently.

  • Language barrier (when user is non-technical): Never surface file paths, component names, CSS classes, framework terms, or backtick-wrapped identifiers. Describe UI patterns in plain language. When uncertain, default to plain language.
Technical (never say) Plain language (say this)
"We'll use a Dialog component with Sheet on mobile" "A popup form on desktop, slides up from bottom on mobile"
"The useQuery hook handles loading/error states" "The screen shows a spinner while loading and an error message if it fails"

Starting

  1. Read feature folder (./plans/*/). If multiple, list via AskUserQuestion and ask which feature. Check ./plans/<feature>/pipeline.md for ## Rollback Notes — if content, skip to Rollback Receiving.
  2. Look for scope.md and prd.md. If prd.md exists: extract every user story (each becomes a flow), use glossary terms for UI labels. If no prd.md: note gap — defined requirements produce better specs — proceed if user wants.
  3. Explore existing UI patterns — component library, design system, nav, forms, notifications, empty states, error handling.
  4. Search for design system docs, Storybook, component READMEs.
Related skills

More from michaelmerrill/skills

Installs
8
First Seen
Mar 25, 2026