Agent-Skills.md

Agent Skills: Design (Curated Frontend Design Skill)

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.

UncategorizedID: bout3fiddy/agents/design

Repository

bout3fiddy/agents
bout3fiddy
25

Install this agent skill to your local

pnpm dlx add-skill https://github.com/bout3fiddy/agents/tree/HEAD/skills/design

Skill Files

Browse the full folder contents for design.

Download Skill

Loading file tree…

skills/design/SKILL.md

Skill Metadata

Name
design
Description
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.

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

  1. Detect the lane: critique, animation storyboarding, or DialKit tuning.
  2. Open the matching reference file and follow that workflow.
  3. Produce structured output with concrete observations and next actions.
  4. 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 skill
  • skills/design/references/design-critique.md - Structured UI critique workflow and output format
  • skills/design/references/storyboard-animation.md - Stage-driven animation authoring/refactor pattern
  • skills/design/references/dialkit.md - DialKit control-generation workflow and defaults