Design Agent Skills

Helps agents shape interfaces that feel refined through spacing, typography, interaction, and animation choices.

Evaluates motion changes against strict craft standards — feel, performance, and intent over decoration.

Turns vague animation descriptions into precise motion terms so agents can communicate with designers effectively.

Guides UI work with sharp constraints so agents produce clearer, more usable interfaces with consistent structure.

Checks frontend code against Web Interface Guidelines to catch usability, accessibility, and polish gaps.

Build polished web pages and components with deliberate visual direction, strong spacing, and accessible interactions.

Helps agents add, search, fix, and style shadcn/ui components with project-aware guidance and examples.

Reverse-engineers a website's design primitives into project-ready token files for spacing, type, and color.

Convert and tune colors in OKLCH for reliable contrast, stable hues, and better dark mode palettes.

Refines components, motion, and visual hierarchy with disciplined polish — radii, alignment, shadows, micro-interactions.

Build reusable React APIs that avoid prop bloat — compound components, context, and React 19-aware architecture.

Probes a plan or interface through structured questions to surface assumptions and reach a defensible design.

Guides agents to assess web UI work across motion, CSS, typography, patterns, and icons with prioritized findings.