Design System Skill
Use this skill when creating or changing visual language, tokens, and reusable UI components.
Scope
- •Color and semantic token usage
- •Typography, spacing, radius, shadow scales
- •Component-level visual consistency
- •Motion and interaction feedback
- •Dark/light mode behavior
Loading Order
- •
.agent/skills/design-system/core.md - •
.agent/skills/design-system/ui-components.md - •
.agent/skills/design-system/animations.md
Guardrails
- •Use one neutral scale per project
- •Keep spacing and radius tokens consistent across components
- •Prefer semantic colors (success/warn/danger/info) over ad-hoc values
- •Ensure states (hover/focus/disabled/loading) are defined for interactive elements