Component Specpor Owl-Listener

Component Spec Skill.

Torne um componente implementável explicando seu comportamento com o mesmo cuidado dedicado à aparência.

Design Systems
Especificações

Revisão da fonte · Component SpecSKILL.md

Tarefa Design Systems Produz • Uma especificação de anatomia e variantes • Uma tabela de props com tipos, valores padrão e status de obrigatoriedade • Regras de estado, comportamento, acessibilidade e uso Antes de começar Informe a finalidade do componente, as variantes visuais e a plataforma de destino. O resultado é uma especificação para implementação e testes, não um componente implementado.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Component Spec: Especificar um componente de biblioteca

Um contrato para um único componente, abrangendo anatomia, API, variantes, estados de interação, acessibilidade e uso.

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

A abordagem de trabalho

Component Spec define um único componente de design system. Organiza a entrega em torno de anatomia, variantes, propriedades da API, estados de interação, comportamento responsivo, acessibilidade e uso. Partes obrigatórias e opcionais ficam explícitas.

O objetivo é o alinhamento entre designers e desenvolvedores. O comportamento de carregamento de um botão ou o retorno do foco em um diálogo não aparece em uma captura de tela estática. Por isso, a fonte pede exemplos e casos extremos, mantendo fora desta tarefa modelos de documentação mais amplos e padrões com vários componentes.

Entregas esperadas

Uma especificação de anatomia e variantes
Uma tabela de props com tipos, valores padrão e status de obrigatoriedade
Regras de estado, comportamento, acessibilidade e uso

Ver o briefing de exemplo

Do briefing à revisão

01
Defina o limite do componente
Defina sua finalidade, quando usá-lo e quais partes são obrigatórias ou opcionais.
02
Especifique API e estados
Nomeie propriedades e variantes e descreva o comportamento padrão, de foco, desabilitado, de carregamento e de erro, quando relevante.
03
Resolva os detalhes de interação
Documente o comportamento de teclado, foco, responsividade e casos extremos com exemplos que a implementação possa verificar.

02 Quando usar

Quando usar

Informe a finalidade do componente, as variantes visuais e a plataforma de destino. O resultado é uma especificação para implementação e testes, não um componente implementado.

Bom encaixe

Um novo componente de bibliotecaUse antes que várias equipes implementem versões concorrentes do mesmo controle.
Uma entrega ambíguaEsclareça o que muda entre variantes e como as transições de estado se comportam.

Limites a verificar

Não é a biblioteca inteiraO escopo é um componente, não a arquitetura completa de um design system.
Especificação não é implementaçãoUma regra de acessibilidade escrita ainda precisa ser implementada e testada.

Traga estas informações

Finalidade do componenteDescreva a tarefa do usuário e os controles relacionados.
Exemplos existentesForneça as variantes visuais e o comportamento atual.
Contrato da plataformaIdentifique o framework, os métodos de entrada e as expectativas de acessibilidade.

03 Decisões importantes

Decisões que importam

O comportamento é prioridade
Estados e transições passam a fazer parte da entrega, em vez de depender de suposições do desenvolvedor.
Vocabulário compartilhado
Nomes de props e rótulos de anatomia conectam as decisões de design à implementação.

04 Exemplo de briefing

Experimente um briefing focado

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

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com o seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo-fonte original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md

Informe a finalidade do componente, as variantes visuais e a plataforma de destino. O resultado é uma especificação para implementação e testes, não um componente implementado.

Comece com uma única entrega

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

Briefing de exemplo

Use component-spec para documentar nosso botão de envio assíncrono. Especifique anatomia, tamanhos, props, foco, carregamento, estado desabilitado e comportamento de erro. Explique cliques repetidos e ativação por teclado, e inclua quando usar um link em vez do botão. Não afirme que o componente já está implementado.

Inspecione o resultado

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

As propriedades têm valores padrão e obrigatoriedade explícitos.
Cada estado relevante tem um exemplo de comportamento.
As expectativas de teclado e foco podem ser testadas.

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

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixa da fonte indicada abaixo. O comportamento e os requisitos da fonte original podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: design-systems/skills/component-spec/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Um contrato para um único componente, abrangendo anatomia, API, variantes, estados de interação, acessibilidade e uso.

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

06 Perguntas antes de começar

Dúvidas antes de começar

Ela gera código de produção?

A intenção é produzir uma especificação que os desenvolvedores possam implementar. Construir e testar o componente são etapas separadas.

Inclui acessibilidade?

Sim. Papéis, navegação por teclado, comportamento com leitores de tela e gerenciamento de foco são seções explícitas.

Como ela difere de uma biblioteca de padrões?

Ela especifica um único componente; um padrão descreve um arranjo mais amplo de problema e solução.

OpenDesign

Abra espaço para a próxima iteração de design.

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

Baixar OpenDesign Explorar skills de design