Design (Curated Frontend Design Skill)
Use this skill for design-focused frontend tasks without routing into coding.
Operating rules
- Keep responses design-first: clarity, hierarchy, interaction quality, and user context.
- Use progressive disclosure: open only the reference module needed for the active request.
- If a task mixes critique and implementation, start with critique, then provide concrete implementation guidance.
- Prefer actionable outputs: prioritized issues, concrete edits, and copy-paste-ready snippets when requested.
- If implementation intent is present (implement, fix, refactor, patch, edit, run tests), hand off to coding.
- If the request is ambiguous across modules, ask one brief clarifying question.
Workflow
- Detect the lane: critique, animation storyboarding, or DialKit tuning.
- Open the matching reference file and follow that workflow.
- Produce structured output with concrete observations and next actions.
- For follow-up requests, switch modules only if user intent changes.
Reference triggers (open when clearly relevant)
- UI/layout/styling and component patterns ->
skills/design/references/design-guidelines.md - UI components, motion, and animation sequencing ->
skills/design/references/components-and-motion.md - Utility-class styling (Tailwind) ->
skills/design/references/tailwindcss-full.md - UI critique/review/feedback/audit/polish/refine/redesign ->
skills/design/references/design-critique.md - Animation/storyboard/motion/transition/entrance/timing/stagger/spring ->
skills/design/references/storyboard-animation.md - DialKit/sliders/controls/tuning panel/live params ->
skills/design/references/dialkit.md
References
skills/design/references/index.md- References index for this skillskills/design/references/design-critique.md- Structured UI critique workflow and output formatskills/design/references/storyboard-animation.md- Stage-driven animation authoring/refactor patternskills/design/references/dialkit.md- DialKit control-generation workflow and defaults