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 building UI component libraries, designing component APIs, implementing frontend design systems, or refactoring legacy components into modern React/Vue/Svelte patterns.
Reusable, accessible, and consistent UI components with clean APIs, reduced prop drilling, and framework-appropriate styling—accelerating design system development.
Use Cases
A frontend team is starting a new design system and needs consistent Button, Select, and Accordion components across React and Vue. Using this skill, they apply compound component patterns, CSS-in-JS guidance, and API design principles to produce reusable, accessible components with sensible defaults, reducing duplication and onboarding time for new developers.
A developer inherits a legacy React codebase with prop-drilling and inconsistent styling. They use this skill to refactor components into compound patterns, adopt CSS Modules for scoping, and apply accessibility best practices. The result is cleaner composition, fewer style conflicts, and improved keyboard/screen-reader support.
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
