Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
Provides patterns and references for building composable, accessible UI components: composition APIs, polymorphism, design tokens, publishing to npm/registry, and documentation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vercel-components-build:building-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use when the user is:
references/accessibility.mdxreferences/as-child.mdxreferences/composition.mdxreferences/data-attributes.mdxreferences/definitions.mdxreferences/design-tokens.mdxreferences/docs.mdxreferences/marketplaces.mdxreferences/npm.mdxreferences/polymorphism.mdxreferences/principles.mdxreferences/registry.mdxreferences/state.mdxreferences/styling.mdxreferences/types.mdxUse when the user is:
npx claudepluginhub vercel/components.buildBuilds production-ready frontend components with accessible markup, sensible props, and defined states. Use when creating, refactoring, or designing component APIs.
Guides building and evolving design systems with design tokens, component APIs, and documentation strategies. Activates on design system or component library discussions.
Builds accessible, responsive, performant frontend components using design systems, modern CSS, WCAG patterns, and React/Vue/Svelte examples.