Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When establishing design tokens, building style guides, improving visual hierarchy, or auditing designs for consistency in UI projects.
A cohesive, accessible visual system with documented tokens, improved consistency, and ready-to-use code for design implementation.
Use Cases
A startup building a new web app needs a consistent visual language. Using this skill, the designer establishes typography scales, 8-point spacing, and semantic color tokens, then generates a Tailwind config. This prevents magic numbers, ensures WCAG contrast, and speeds up UI development with a reusable foundation.
A product team finds their UI inconsistent across screens. They apply the skill to audit spacing, font pairing, and icon sizes, then document a style guide with dark mode tokens. The result is unified visual hierarchy, better accessibility, and clearer handoff between design and engineering.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File
