extract

Visão Geral

O que é a skill extract?

A skill extract foi criada para ajudar equipes e desenvolvedores a identificar, extrair e consolidar componentes reutilizáveis de UI, tokens de design e padrões em um sistema de design coeso. Ao destacar padrões repetidos e valores codificados, o extract simplifica o processo de construir ou refatorar bibliotecas de componentes para um design de interface escalável e fácil de manter.

Quem deve usar o extract?

• Equipes de produto que constroem ou mantêm um sistema de design
• Designers UI/UX e desenvolvedores frontend que buscam reduzir duplicações
• Organizações que desejam garantir consistência em suas interfaces de usuário

Problemas que o extract resolve

• Detecta componentes de UI repetidos e valores de design codificados
• Orienta a extração de tokens de design (cores, espaçamento, tipografia) para reutilização
• Ajuda a migrar padrões inconsistentes para um sistema unificado
• Suporta a criação ou enriquecimento de um sistema de design a partir de bases de código existentes

Como Usar

Passos para Instalação

1. Instale a skill extract usando o comando abaixo:

   npx skills add https://github.com/pbakaus/impeccable --skill extract

2. Comece pelo arquivo SKILL.md para uma visão detalhada do fluxo de trabalho.

3. Revise arquivos relacionados como README.md, AGENTS.md e metadata.json para mais contexto.

4. Explore diretórios como rules/, resources/, references/ ou scripts/ para materiais de apoio.

Fluxo de Trabalho Típico

1. Descobrir

• Localize seu sistema de design ou biblioteca de componentes no código.
• Analise a estrutura, convenções de nomeação e padrões de documentação.
• Identifique componentes repetidos, valores codificados e variações inconsistentes.

2. Planejar a Extração

• Priorize quais componentes e tokens extrair com base na frequência e potencial de reutilização.
• Confirme com sua equipe antes de criar um novo sistema de design, caso ainda não exista.

3. Extrair e Enriquecer

• Refatore padrões de UI repetidos em componentes reutilizáveis.
• Consolide tokens de design para cores, espaçamento e tipografia.
• Documente os novos componentes e tokens para uso futuro.

4. Migrar

• Substitua padrões antigos no código pelos novos componentes e tokens sistematizados.
• Garanta consistência e atualize a documentação conforme necessário.

Quando Usar o extract

• Ao iniciar ou expandir um sistema de design
• Durante projetos de refatoração ou modernização de UI
• Para garantir consistência e reduzir dívida técnica no código frontend

Perguntas Frequentes

O que o extract realmente faz?

o extract analisa seu código para encontrar padrões de UI repetidos e valores de design codificados, ajudando a refatorá-los em componentes e tokens reutilizáveis para seu sistema de design.

O extract é só para sistemas de design novos?

Não. O extract é útil tanto para criar sistemas de design novos quanto para melhorar os existentes, consolidando e enriquecendo sua biblioteca de componentes.

Quais arquivos devo revisar primeiro?

Comece pelo SKILL.md para entender o fluxo principal. Explore README.md e arquivos de metadados relacionados para orientações adicionais.

O extract pode ser usado com qualquer framework frontend?

O extract é focado no fluxo de trabalho e pode ser adaptado para a maioria dos frameworks frontend ou repositórios. Ajuste o processo para suas ferramentas e estrutura de projeto.

Onde posso ver todos os arquivos relacionados?

Acesse a aba Files no repositório para navegar pela árvore completa de arquivos, incluindo referências e scripts auxiliares.