frontend-design

Visão Geral

O que é frontend-design?

A skill frontend-design é um conjunto especializado para criar interfaces frontend visualmente distintas e prontas para produção. Diferente de geradores de código genéricos, esta skill enfatiza direção criativa, estética, tipografia, movimento, layout e refinamento da interface. Foi desenvolvida para ajudar você a entregar componentes web, páginas e aplicações que se destacam e transmitem intencionalidade, não parecendo saídas típicas de IA.

Quem deve usar o frontend-design?

Esta skill é ideal para desenvolvedores frontend, designers UI/UX e equipes de produto que desejam elevar a qualidade visual e interativa de seus projetos web. Use frontend-design quando precisar de:

• Design UI criativo e de alta qualidade para apps web, landing pages ou artefatos digitais
• Orientação sobre cor, tipografia, movimento e layouts responsivos
• Evitar interfaces genéricas e sem inspiração geradas por IA
• Garantir acessibilidade e melhores práticas de design

Quais problemas ela resolve?

• Evita o "desleixo da IA" exigindo contexto real de projeto e marca antes do início do design
• Fornece sistemas de design acionáveis para cor, espaçamento, tipografia e interação
• Garante que acessibilidade e design responsivo estejam incorporados desde o começo
• Oferece código e padrões de design práticos e prontos para produção

Como Usar

Passos para Instalação

1. Adicione a skill ao seu projeto:
   Execute:

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

2. Revise a documentação principal:
   • Comece pelo SKILL.md para uma visão geral e protocolo de coleta de contexto.
   • Consulte README.md, AGENTS.md e metadata.json para notas adicionais de configuração e uso.
3. Explore as referências de design:
   A pasta reference/ contém guias práticos sobre:
   • Cor e contraste (reference/color-and-contrast.md)
   • Design de interação (reference/interaction-design.md)
   • Design de movimento (reference/motion-design.md)
   • Design responsivo (reference/responsive-design.md)
   • Design espacial (reference/spatial-design.md)
   • Tipografia (reference/typography.md)
   • Escrita UX (reference/ux-writing.md)
4. Adapte ao seu fluxo de trabalho:
   Integre os princípios de design e exemplos de código no seu próprio repositório e cadeia de ferramentas. A skill é feita para ser adaptada, não copiada literalmente.

Dicas Principais para o Fluxo de Trabalho

• Sempre colete o contexto do projeto (público, casos de uso, tom da marca) antes de iniciar o design.
• Use os sistemas fornecidos de cor, espaçamento e tipografia para uma UI consistente e acessível.
• Consulte os guias de movimento e interação para garantir interfaces polidas e intuitivas.
• Verifique os arquivos em reference/ para CSS e padrões de design prontos para uso.

Perguntas Frequentes

Quando devo usar a skill frontend-design?

Use frontend-design quando precisar criar ou melhorar a qualidade visual e interativa de componentes web, páginas ou aplicações — especialmente quando o contexto do design e a personalidade da marca são importantes.

Quais arquivos devo consultar primeiro?

• SKILL.md para visão geral e requisitos de contexto
• reference/color-and-contrast.md para orientações sobre sistema de cores
• reference/interaction-design.md para melhores práticas de estado e acessibilidade
• reference/motion-design.md para animação e temporização
• reference/responsive-design.md para layouts adaptativos
• reference/spatial-design.md para espaçamento e grades

O frontend-design gera código ou apenas diretrizes?

Ele oferece ambos: trechos de código práticos e prontos para produção (principalmente CSS) e diretrizes detalhadas de design para ajudar na implementação eficaz.

O frontend-design é adequado para todo tipo de projeto?

Esta skill é mais indicada para projetos onde qualidade de design, diferenciação da marca e acessibilidade são prioridades. Para ferramentas puramente funcionais ou internas, onde estética é menos relevante, uma abordagem mais simples pode ser suficiente.

Onde posso encontrar mais detalhes?

Explore a árvore completa de arquivos na aba Files, incluindo todas as referências aninhadas e scripts auxiliares, para orientações e exemplos aprofundados.