building-components

Guia abrangente para construir componentes de UI modernos, acessíveis e composáveis. Abrange taxonomia de componentes (primitivos, componentes, blocos, templates), princípios fundamentais de design e implementação de acessibilidade, incluindo ARIA, navegação por teclado e conformidade com WCAG. Inclui padrões para APIs composáveis, polimorfismo, estado controlado/não controlado e o padrão as-child para composição flexível de elementos. Fornece orientação sobre design tokens, sistemas de temas, abordagens de estilização e uso de...

npx skills add https://github.com/vercel/components.build --skill building-components

Baixar ZIP GitHub

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

Mais skills de vercel

API REST do Vercel emulada para desenvolvimento e testes locais. Use quando o usuário precisar interagir com endpoints da API do Vercel localmente, testar integrações com o Vercel,…

Configuração e melhores práticas de Vercel Cron Jobs. Use ao adicionar, editar ou depurar tarefas agendadas em vercel.json.

Utilitários de geração de código para json-render. Use ao gerar código a partir de especificações de UI, construir exportadores de código personalizados, percorrer especificações ou serializar props para…

enable-shopify-menus

Substitua os menus de navegação e rodapé codificados por menus gerenciados pelo Shopify.

next-best-practice

Práticas recomendadas do Next.js - convenções de arquivos, limites de RSC, padrões de dados, APIs assíncronas, metadados, tratamento de erros, manipuladores de rotas, otimização de imagens/fontes,…

benchmark-sandbox

Executa cenários de avaliação do vercel-plugin em Vercel Sandboxes em vez de painéis locais do WezTerm. Provisiona microVMs efêmeras com Claude Code + plugin pré-instalado,…

Produza um guia técnico que ensine um caso de uso do mundo real por meio de exemplos progressivos. Os

benchmark-testing

Criar e lançar projetos de teste de benchmark para exercitar a injeção de habilidades do vercel-plugin em cenários realistas. Configura diretórios isolados, instala o…