Building Components
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.
Specification
- Skill ID
- vercel/components.build/building-components
- Publisher
- vercel
- Repository
- components.build
- Installs
- 0
- Files
- 16
- Synced
- Sep 23, 2026
How to use it
Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.
vercel/components.build/building-componentsInstalls these files- SKILL.md
- 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
What this skill tells the agent
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 - Artifact taxonomy (primitives, components, blocks, templates)
- principles.mdx - Core principles for component design
- accessibility.mdx - ARIA, keyboard navigation, WCAG compliance
- composition.mdx - Composable component patterns
- as-child.mdx - The as-child pattern for element polymorphism
- polymorphism.mdx - Polymorphic component patterns
- types.mdx - TypeScript typing patterns for components
- state.mdx - Controlled vs uncontrolled state management
- data-attributes.mdx - Using data attributes for styling and state
- design-tokens.mdx - Design token systems and theming
- styling.mdx - Component styling approaches
- registry.mdx - shadcn-style registry distribution
- npm.mdx - Publishing components to npm
- marketplaces.mdx - Component marketplace distribution
- docs.mdx - Writing component documentation
More from vercel
Use this skill in a project
Open any RiverX project, search the Skills panel for vercel/components.build/building-components, and install it in one click.