quieter

Visão Geral

O que é a skill quieter?

quieter é uma skill de design de interface que ajuda a suavizar interfaces visualmente agressivas ou excessivamente estimulantes. Ela reduz sistematicamente a intensidade — como saturação de cor excessiva, contraste e animação — preservando a eficácia e clareza do seu design. Use quieter quando sua interface parecer muito ousada, barulhenta, exagerada ou chamativa, e você quiser um visual mais refinado e acessível.

Quem Deve Usar o quieter?

• Designers de UI que buscam acalmar interfaces carregadas ou agressivas
• Desenvolvedores frontend que trabalham com sistemas de design
• Equipes que desejam uma experiência de usuário mais profissional e menos distrativa

Problemas que Resolve

• Cores excessivamente saturadas e elementos de alto contraste
• Visuais concorrentes e animações excessivas
• Falta de hierarquia visual e refinamento
• Designs que parecem sobrecarregados ou pouco polidos

Como Usar

Passos para Instalação

1. Adicione a skill quieter ao seu projeto:

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

2. Comece pela documentação principal:
   • Abra o arquivo SKILL.md para um fluxo de trabalho detalhado e etapas de preparação.
   • Revise arquivos relacionados como README.md, AGENTS.md e metadata.json para contexto adicional, se disponíveis.

Visão Geral do Fluxo de Trabalho

1. Preparação Obrigatória:
   • Execute /frontend-design para coletar contexto e princípios de design.
   • Se não houver contexto de design, execute primeiro /teach-impeccable.
2. Avalie o Estado Atual:
   • Identifique fontes de intensidade visual (cor, contraste, animação, complexidade, escala).
   • Entenda o propósito, público e mensagem central do seu design.
   • Se o contexto estiver incerto, use a ferramenta AskUserQuestion para esclarecer os requisitos.
3. Planeje e Refine:
   • Desenvolva um plano para reduzir a intensidade sem perder mensagens-chave ou usabilidade.
   • Aplique as recomendações do quieter para ajustar cores, contraste, escala e animação.
   • Itere e revise as mudanças para equilíbrio e clareza.

Melhores Práticas

• Sempre colete e esclareça o contexto de design antes de fazer alterações.
• Foque em preservar o que funciona enquanto reduz apenas os elementos que causam superestimulação.
• Use quieter como parte de um processo mais amplo de refinamento do sistema de design.

Perguntas Frequentes

Quando devo usar a skill quieter?

Use quieter quando sua interface for descrita como muito ousada, barulhenta, agressiva ou exagerada, ou quando os stakeholders solicitarem um visual mais calmo e refinado.

quieter funciona com qualquer framework frontend?

quieter é independente de fluxo de trabalho e pode ser adaptado a qualquer stack frontend ou sistema de design. Ele oferece orientações de design, não correções específicas de código.

Quais arquivos devo revisar primeiro?

Comece pelo SKILL.md para o fluxo de trabalho principal. Verifique a aba Files para scripts e referências de suporte.

quieter é adequado para todos os projetos?

quieter é ideal para projetos onde a superestimulação visual é um problema. Para interfaces que exigem alta energia ou visuais chamativos (ex.: campanhas de marketing), use quieter de forma seletiva.

Onde posso encontrar mais orientações?

Explore a aba Files do repositório para a árvore completa de arquivos, incluindo referências aninhadas e scripts auxiliares para apoiar seu processo de refinamento de design.