PaperclipOrg
Claude Agent Skill · by Vercel

Building Components

The building-components skill guides developers through creating modern, accessible, and reusable UI components by providing reference documentation on componen

Install
Terminal · npx
$npx skills add https://github.com/vercel/components.build --skill building-components
Works with Paperclip

How Building Components fits into a Paperclip company.

Building Components drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md37 lines
Expand
---name: building-componentsdescription: 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.--- # 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