SECURITY REVIEW
Not yet assessed
Review the original instructions and requested permissions before installing.
No security review is available for this catalog entry yet.
Frontend · Design / AGENT SKILL
building-components
0
Build accessible, composable UI components with design tokens, publishing guidance, and documentation.
Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.
BEFORE YOU INSTALL
Understand the trade-offs.
Evidence to help you choose, prepare, and use this skill with confidence.
SKILL QUALITY
Not yet assessed
How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.
No quality assessment is available for this catalog entry yet.
The full skill.
Original instructions from the publisher’s SKILL.md
# Building Components ## When to use this skill Use when the user is: - Building new UI components (primitives, components, blocks, templates) - Implementing accessibility features (ARIA, keyboard navigation, focus management) - Creating composable component APIs (slots, render props, controlled/uncontrolled state) - Setting up design tokens and theming systems - Publishing components to npm or a registry - Writing component documentation - Implementing polymorphism or as-child patterns - Working with data attributes for styling/state ## References - [definitions.mdx](./references/definitions.mdx) - Artifact taxonomy (primitives, components, blocks, templates) - [principles.mdx](./references/principles.mdx) - Core principles for component design - [accessibility.mdx](./references/accessibility.mdx) - ARIA, keyboard navigation, WCAG compliance - [composition.mdx](./references/composition.mdx) - Composable component patterns - [as-child.mdx](./references/as-child.mdx) - The as-child pattern for element polymorphism - [polymorphism.mdx](./references/polymorphism.mdx) - Polymorphic component patterns - [types.mdx](./references/types.mdx) - TypeScript typing patterns for components - [state.mdx](./references/state.mdx) - Controlled vs uncontrolled state management - [data-attributes.mdx](./references/data-attributes.mdx) - Using data attributes for styling and state - [design-tokens.mdx](./references/design-tokens.mdx) - Design token systems and theming - [styling.mdx](./references/styling.mdx) - Component styling approaches - [registry.mdx](./references/registry.mdx) - shadcn-style registry distribution - [npm.mdx](./references/npm.mdx) - Publishing components to npm - [marketplaces.mdx](./references/marketplaces.mdx) - Component marketplace distribution - [docs.mdx](./references/docs.mdx) - Writing component documentation
Skill folder
Files included alongside SKILL.md in the publisher’s repository.
- references/directory
- references/accessibility.mdx
- references/as-child.mdx
- references/composition.mdx
- references/data-attributes.mdx
- references/definitions.mdx
- references/design-tokens.mdx
- references/docs.mdx
- references/marketplaces.mdx
- references/npm.mdx
- references/polymorphism.mdx
- references/principles.mdx
- references/registry.mdx
- references/state.mdx
- references/styling.mdx
- references/types.mdx
- SKILL.md