frontend-design

Visão Geral

O que é frontend-design?

A skill frontend-design permite que agentes criem interfaces frontend distintas e de nível de produção com qualidade excepcional de design. Diferente do código gerado por IA genérica, esta skill produz resultados criativos e refinados que refletem padrões reais de design. É ideal para construir componentes web, páginas, aplicações, cartazes e outros artefatos digitais onde direção visual, estética, tipografia, movimento, layout e acabamento da interface são críticos.

Quem deve usar frontend-design?

Esta skill é indicada para desenvolvedores, designers e equipes que buscam elevar seu UI/UX além dos estilos padrão e layouts genéricos. Use frontend-design quando seu projeto exigir uma aparência única, forte personalidade de marca e altos padrões de acessibilidade. É especialmente valiosa para quem quer evitar "AI slop" e alcançar resultados frontend profissionais.

Problemas resolvidos pelo frontend-design

• Evita estética genérica e repetitiva de IA
• Garante decisões criativas e conscientes do contexto
• Produz interfaces acessíveis, responsivas e visualmente atraentes
• Orienta tipografia, cor, movimento, layout espacial 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 geral e requisitos de contexto.
3. Revise os arquivos e pastas de suporte:
   • README.md para orientações gerais
   • AGENTS.md para notas específicas de agentes
   • metadata.json para metadados
   • pasta reference/ para aprofundamentos em cor, interação, movimento, responsivo, espacial, tipografia e escrita UX

Protocolo de Coleta de Contexto

Antes de iniciar qualquer trabalho de design, confirme o contexto do projeto:

• Público-alvo
• Casos de uso
• Personalidade e tom da marca
  Este contexto não pode ser inferido apenas pelo código. Sempre obtenha-o do criador ou da documentação do projeto.

Arquivos de Referência Principais

Confira estes arquivos para orientações práticas de design:

• reference/color-and-contrast.md: Sistemas modernos de cor e estrutura de paleta
• reference/interaction-design.md: Estados interativos e acessibilidade
• reference/motion-design.md: Temporização e easing de animações
• reference/responsive-design.md: Mobile-first, detecção de entrada, áreas seguras
• reference/spatial-design.md: Espaçamento, grids, hierarquia visual
• reference/typography.md: Seleção de fontes, hierarquia, legibilidade
• reference/ux-writing.md: Rótulos de botões, mensagens de erro, estados vazios

Adaptando o Fluxo de Trabalho

Integre os princípios do frontend-design no seu próprio repositório e ferramentas. Use as referências como guias práticos, não como templates para copiar e colar. Ajuste para sua marca, público e restrições do projeto.

Perguntas Frequentes

Onde encontro diretrizes detalhadas de design?

Consulte a pasta reference/ para guias especializados sobre cor, interação, movimento, layouts responsivos, design espacial, tipografia e escrita UX.

Como o frontend-design melhora a acessibilidade?

A skill enfatiza design adequado do foco, paletas de cores semânticas, estados interativos claros e tipografia legível — todos essenciais para interfaces acessíveis.

O frontend-design é adequado para todos os projetos?

Use frontend-design quando precisar de alta qualidade visual e direção de design única. Para protótipos rápidos ou projetos onde a estética não é prioridade, uma skill mais simples pode ser suficiente.

Como inspecionar a árvore completa de arquivos?

Abra a aba Files no diretório de skills do seu agente para ver todas as referências aninhadas e scripts auxiliares incluídos com o frontend-design.