frontend-design

Visão Geral

O que é frontend-design?

frontend-design é uma skill especializada para criar interfaces frontend visualmente distintas e prontas para produção. Diferente de ferramentas genéricas de design com IA, ela enfatiza direção criativa, estética, tipografia, movimento, layout e acabamento da interface. A skill é ideal para projetos onde a alta qualidade de design é essencial — como componentes web, páginas, aplicações, cartazes ou qualquer artefato que exija uma identidade visual forte.

Quem deve usar frontend-design?

Essa skill é indicada para desenvolvedores frontend, designers de UI e equipes de produto que desejam elevar a qualidade das suas interfaces além dos resultados padrão ou genéricos de IA. É especialmente valiosa quando você precisa:

• Construir interfaces com personalidade e tom claros da marca
• Garantir uma direção criativa e não genérica no design
• Aplicar princípios avançados de design para cor, tipografia, movimento e layout

Problemas que o frontend-design resolve

• Evita a estética "AI slop" exigindo contexto real do projeto
• Guia na coleta de contexto, garantindo que os designs se encaixem no público e casos de uso
• Fornece referências práticas para cor, interação, movimento, responsividade, espacialidade, tipografia e escrita UX

Como Usar

Passos para Instalação

1. Instale a skill usando:

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

2. Comece pelo arquivo SKILL.md para uma visão rápida dos requisitos e fluxo de trabalho.
3. Revise os arquivos e pastas de suporte:
   • README.md (se disponível)
   • AGENTS.md para orientações específicas de agentes
   • metadata.json para metadados da skill
   • pasta reference/ para aprofundamentos em cor, interação, movimento, responsividade, espacialidade, tipografia e escrita UX

Dicas de Fluxo de Trabalho

• Sempre colete o contexto do projeto antes de iniciar o design. Confirme o público-alvo, casos de uso e tom da marca.
• Adapte o fluxo da skill ao seu próprio repositório e ferramentas. Não copie literalmente — use os princípios e referências para guiar seu processo.
• Visualize estes arquivos-chave para orientações práticas:
  • reference/color-and-contrast.md
  • reference/interaction-design.md
  • reference/motion-design.md
  • reference/responsive-design.md
  • reference/spatial-design.md
  • reference/typography.md
  • reference/ux-writing.md

Perguntas Frequentes

O frontend-design é adequado para meu projeto?

Use frontend-design se precisar de interfaces frontend criativas e de alta qualidade e quiser evitar designs genéricos de IA. Não é ideal para protótipos rápidos onde o acabamento visual não é prioridade.

Quais arquivos devo verificar primeiro?

Comece pelo SKILL.md para obter contexto. Depois explore a pasta reference/ para princípios práticos de design e exemplos de código.

Como o frontend-design trata acessibilidade e responsividade?

A skill inclui referências para contraste de cor, estados de interação, temporização de movimento, layouts responsivos, sistemas espaciais e tipografia — tudo com as melhores práticas de acessibilidade.

Onde posso encontrar mais detalhes?

Abra a aba Files no repositório para inspecionar toda a árvore de arquivos, incluindo referências aninhadas e scripts auxiliares. Para dúvidas sobre instalação ou fluxo de trabalho, consulte os arquivos README.md e SKILL.md.