Agent skill
design
Frontend design curation skill for UI critique, motion storyboarding, and DialKit tuning. Use when the user asks for interface feedback, animation sequencing, or interactive design-control setup.
Install this agent skill to your Project
npx add-skill https://github.com/bout3fiddy/agents/tree/main/skills/design
Metadata
Additional technical details for this skill
- id
- design.core
- version
- 1
- priority
- 70
- task types
-
[ "design", "ui-review", "animation", "dialkit" ] - load strategy
- progressive
- trigger phrases
-
[ "UI review", "interface feedback", "visual critique", "motion", "storyboard", "animation", "timing", "DialKit" ] - activation policy
- both
- workflow triggers
-
[ "design_request_detected", "ui_critique_requested", "animation_request_detected", "dialkit_request_detected" ] - operation contracts
-
{ "critique": { "required_steps": [ "Parse request intent, scope, and context.", "Select the critique reference module and validate available inputs.", "Produce structured findings ranked by structural/behavioral/visual impact." ], "forbidden_actions": [ "apply_patch", "run tests", "edit repository files" ], "required_output_fields": [ "lane", "context", "first_impressions", "top_opportunities", "evidence" ] }, "dialkit_config": { "required_steps": [ "Confirm dial context (panel name, properties, action keys).", "Generate control config using canonical defaults source.", "Return usage examples and integration notes." ], "forbidden_actions": [ "apply_patch", "edit repository files" ], "required_output_fields": [ "lane", "panel_name", "dial_config", "defaults_source", "usage_targets" ] }, "storyboard_spec": { "required_steps": [ "Parse animation intent and map each requested stage.", "Convert timing and values into named constants for deterministic control.", "Return storyboard artifact first, then implementation snippet guidance." ], "forbidden_actions": [ "run tests", "edit repository files" ], "required_output_fields": [ "lane", "timing_ms", "stages", "elements", "springs", "replay_trigger" ] } }
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
planning
Planning workflows for clarifying ambiguous build requests, running spec/work-package delivery, and managing Linear lifecycle transitions.
coding
Core engineering skill for implementation, bug fixes, refactors, and technical reviews with mandatory smell guardrails and targeted domain reference routing.
housekeeping
Repository housekeeping workflows for AGENTS/CLAUDE architecture, progressive disclosure, and migration of legacy monolithic instruction files.
skill-creator
Create, update, or install skills (including planning/specs and edits to skills/*) using our repo workflow (uv + skills-ref validation, lean SKILL.md, references/ for detail, and sync via bin/sync.sh).
edit-article
Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.
handoff
Compact the current conversation into a handoff document for another agent to pick up.
Didn't find tool you were looking for?