building-components
installsforks
How to install building-components?
vercel/components.build/building-components
$npx -y skills add vercel/components.build --skill building-componentsbuilding-components is an agent skill published from vercel/components.build, installable through the skills CLI.
SKILL.md
| 1 | # Building Components |
| 2 | |
| 3 | ## When to use this skill |
| 4 | |
| 5 | Use when the user is: |
| 6 | |
| 7 | - Building new UI components (primitives, components, blocks, templates) |
| 8 | - Implementing accessibility features (ARIA, keyboard navigation, focus management) |
| 9 | - Creating composable component APIs (slots, render props, controlled/uncontrolled state) |
| 10 | - Setting up design tokens and theming systems |
| 11 | - Publishing components to npm or a registry |
| 12 | - Writing component documentation |
| 13 | - Implementing polymorphism or as-child patterns |
| 14 | - Working with data attributes for styling/state |
| 15 | |
| 16 | ## References |
| 17 | |
| 18 | - [definitions.mdx](./references/definitions.mdx) - Artifact taxonomy (primitives, components, blocks, templates) |
| 19 | - [principles.mdx](./references/principles.mdx) - Core principles for component design |
| 20 | - [accessibility.mdx](./references/accessibility.mdx) - ARIA, keyboard navigation, WCAG compliance |
| 21 | - [composition.mdx](./references/composition.mdx) - Composable component patterns |
| 22 | - [as-child.mdx](./references/as-child.mdx) - The as-child pattern for element polymorphism |
| 23 | - [polymorphism.mdx](./references/polymorphism.mdx) - Polymorphic component patterns |
| 24 | - [types.mdx](./references/types.mdx) - TypeScript typing patterns for components |
| 25 | - [state.mdx](./references/state.mdx) - Controlled vs uncontrolled state management |
| 26 | - [data-attributes.mdx](./references/data-attributes.mdx) - Using data attributes for styling and state |
| 27 | - [design-tokens.mdx](./references/design-tokens.mdx) - Design token systems and theming |
| 28 | - [styling.mdx](./references/styling.mdx) - Component styling approaches |
| 29 | - [registry.mdx](./references/registry.mdx) - shadcn-style registry distribution |
| 30 | - [npm.mdx](./references/npm.mdx) - Publishing components to npm |
| 31 | - [marketplaces.mdx](./references/marketplaces.mdx) - Component marketplace distribution |
| 32 | - [docs.mdx](./references/docs.mdx) - Writing component documentation |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
