106.9K+Baixar
Ir para o guia de uso
Building Componentspor vercel

Building Components Skill.

Projete APIs reutilizáveis de componentes de UI considerando acessibilidade e distribuição.

  • APIs de componentes
  • Acessibilidade
Baixar OpenDesignVer guia de uso
Análise da fonte · building-componentsSKILL.md
Tarefa Projete APIs reutilizáveis de componentes de UI considerando acessibilidade e distribuição. Entregáveis Para uma solicitação de implementação, um componente com modelo explícito de composição e estado. Antes de começar O SKILL.md curto depende das referências incluídas para orientar a implementação em detalhe.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Projete APIs reutilizáveis de componentes de UI considerando acessibilidade e distribuição

Planeje APIs acessíveis de componentes, estado controlado, estilos, tokens e distribuição com a skill Building Components da Vercel.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Building Components orienta as decisões de engenharia por trás de uma biblioteca de UI reutilizável. Encaminha o agente para referências específicas sobre composição, comportamento do teclado, gerenciamento de estado, interfaces TypeScript e estilos. O ponto de entrada cobre primitivas, componentes, blocos e templates, permitindo adequar o nível de abstração ao entregável real.

A skill é útil quando um componente precisa atender a vários consumidores, não apenas a uma tela isolada. Ela reúne formato da API, acessibilidade e distribuição na mesma discussão. A fonte é principalmente um índice de referências: os arquivos vinculados fazem parte da skill e devem acompanhar o arquivo de entrada.

Entregas esperadas

  • Para uma solicitação de implementação, um componente com modelo explícito de composição e estado.
  • Para uma solicitação de documentação, orientações de uso da API do componente e do comportamento relevante.
  • Um plano adequado de empacotamento ou registro quando a solicitação inclui distribuição.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Identifique o contrato do componente

    Defina se a tarefa trata de uma primitiva, componente, bloco ou template. Estabeleça a interface pública e os contextos em que os consumidores farão a composição.

  2. 02
    Leia as orientações de engenharia relevantes

    Leia state.mdx para comportamento controlado e não controlado, composition.mdx para o modelo público de composição e accessibility.mdx para requisitos de teclado e foco. Consulte types.mdx e styling.mdx para implementar. Acrescente referências de polymorphism ou as-child somente quando os consumidores precisarem desses padrões de API.

  3. 03
    Implemente e documente a API

    Conecte estado e apresentação pela API escolhida. Explique o uso previsto e selecione npm, um registro ou outra forma documentada de distribuição somente quando necessário.

02 Quando usar

Quando usar

O SKILL.md curto depende das referências incluídas para orientar a implementação em detalhe.

Bom encaixe

  • APIs compartilhadas de componentesUm componente compartilhado precisa de uma API pública bem planejada antes de ser adotado por várias equipes.
  • Engenharia de bibliotecasUma biblioteca de UI precisa de práticas consistentes de acessibilidade, temas e documentação.

Limites a verificar

  • Referências incluídasO SKILL.md curto depende das referências incluídas para orientar a implementação em detalhe.
  • Escopo da verificaçãoO arquivo de entrada não certifica a acessibilidade do componente nem garante compatibilidade com todos os frameworks.

Traga estas entradas

  • Consumidores previstosOs consumidores previstos do componente e exemplos de uso.
  • Convenções do repositórioA stack de componentes, o sistema de tokens e as convenções TypeScript do repositório.
  • Comportamento e distribuiçãoComportamento de teclado necessário, responsabilidade pelo estado e destino da distribuição.

03 Decisões importantes

Decisões importantes

  1. Responsabilidade explícita pelo estado

    Estado controlado e não controlado tornam-se escolhas deliberadas da API.

  2. Opções de composição

    As referências cobrem slots, render props e padrões as-child para compor uma API pública de componente.

  3. Planejamento da distribuição

    Publicação e documentação são consideradas junto da implementação.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Os consumidores previstos do componente e exemplos de uso.

Arquivo-fonte original
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use building-components para projetar um componente reutilizável de conteúdo expansível para nossa biblioteca React. Primeiro inspecione nossas primitivas, tokens e padrões TypeScript existentes. Proponha a API pública, incluindo estado controlado e não controlado, antes da implementação. Leia as referências relevantes de composição, acessibilidade e estado. Cubra interação por teclado e comportamento de foco, forneça exemplos de composição do acionador e do conteúdo e documente os estilos com nossos tokens existentes. Mantenha a publicação em registro ou npm como uma proposta separada, a menos que a tarefa atual inclua explicitamente um lançamento.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Os exemplos exercitam a API pública documentada, não detalhes internos privados.
  • Teclado, foco e estado têm resultados explícitos de verificação.
  • As instruções de empacotamento correspondem ao canal de distribuição pretendido.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
vercel
Repositório
vercel/components.build
Arquivo da skill
SKILL.md
Licença
Not confirmed
Versão revisada
2026-11-02 · ba7274504373

Notas de leitura

  1. Escopo da licençaHá declarações conflitantes na mesma revisão fixada: o LICENSE da raiz declara explicitamente Apache License 2.0, enquanto a seção License do README.md diz MIT e aponta para esse arquivo. Não há substituição local em skills/building-components. Não exiba um rótulo MIT sem ressalvas; é necessário esclarecimento dos autores para resolver o conflito.
Resumo editorial da fonte
Projete APIs reutilizáveis de componentes de UI considerando acessibilidade e distribuição.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

A skill fornece um tema visual pronto?

Seu ponto de entrada se concentra na engenharia de componentes e encaminha para referências de tokens e estilos. O produto continua responsável pelos requisitos visuais.

Todo componente precisa de polimorfismo?

Não. Polymorphism e as-child são tópicos de referência disponíveis para quando a API precisar deles.

Pode ajudar na distribuição por registro?

Sim. Distribuição por registro, publicação no npm e marketplaces de componentes têm referências vinculadas específicas.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md