frontend-design
Visão Geral
Esta cópia pública de entrada empacota packages/skills-catalog/skills/(design)/frontend-design de https://github.com/tech-leads-club/agent-skills no formato editorial nativo do Omni Skills, sem ocultar sua origem.
Use-a quando o operador precisar que o fluxo de trabalho original, os arquivos de suporte copiados e o contexto do repositório permaneçam intactos enquanto o validador público e o melhorador privado continuam seu fluxo downstream normal.
Esta entrada mantém os arquivos originais copiados intactos e usa o bloco external_source em metadata.json mais ORIGIN.md como a âncora de proveniência para revisão.
Esta habilidade guia a criação de interfaces frontend de alto nível e com qualidade de produção que evitam a estética genérica de "IA slop". Implemente código funcional real com atenção excepcional aos detalhes estéticos e escolhas criativas.
As seções da fonte importada que não mapearam claramente para os cabeçalhos públicos ainda são preservadas abaixo ou nos arquivos de suporte. Seções importadas notáveis: Direção de Design, O Teste de IA Slop.
Quando Usar Esta Habilidade
Use esta seção como o filtro de ativação. Ela deve tornar o limite de ativação explícito antes que o operador carregue arquivos, execute comandos ou abra um pull request.
- Use quando a solicitação corresponder claramente à intenção da fonte importada: Criar interfaces frontend de alto nível e com qualidade de design. Use esta habilidade quando o usuário pedir para construir componentes web, páginas, artefatos, pôsteres ou aplicativos. Gera código criativo e refinado...
- Use quando o operador deve preservar os detalhes do fluxo de trabalho original em vez de reescrever o processo do zero.
- Use quando a proveniência precisa permanecer visível na resposta, PR ou pacote de revisão.
- Use quando referências, exemplos ou scripts copiados da fonte original melhorarem materialmente a resposta.
- Use quando o fluxo de trabalho deve permanecer revisável no repositório público de entrada antes que o melhorador privado assuma.
Tabela Operacional
| Situação | Comece aqui | Por que é importante |
|---|---|---|
| Primeiro uso | metadata.json | Confirma o repositório, branch, commit e caminho importado através do bloco external_source antes de tocar no fluxo de trabalho copiado |
| Revisão de proveniência | ORIGIN.md | Fornece aos revisores uma trilha de auditoria em linguagem simples para a fonte importada |
| Execução do fluxo de trabalho | references/color-and-contrast.md | Começa com o menor arquivo copiado que altera materialmente a execução |
| Contexto de suporte | references/interaction-design.md | Adiciona o próximo arquivo de origem copiado mais relevante sem carregar todo o pacote |
| Decisão de transferência | ## Habilidades Relacionadas | Ajuda o operador a mudar para uma habilidade nativa mais forte quando a tarefa se desvia |
Fluxo de Trabalho
Este fluxo de trabalho é intencionalmente editorial e operacional ao mesmo tempo. Ele mantém a fonte importada útil para o operador, ao mesmo tempo que satisfaz os padrões de entrada pública que alimentam o fluxo do melhorador downstream.
- Confirme o objetivo do usuário, o escopo do fluxo de trabalho importado e se esta habilidade ainda é o roteador correto para a tarefa.
- Leia a visão geral e os arquivos de proveniência antes de carregar quaisquer arquivos de suporte copiados.
- Carregue apenas as referências, exemplos, prompts ou scripts que alteram materialmente o resultado para a solicitação atual.
- Execute o fluxo de trabalho original mantendo a proveniência e os limites da fonte explícitos nas notas de trabalho.
- Valide o resultado em relação às expectativas originais e às evidências que você pode apontar nos arquivos copiados.
- Escalone ou transfira para uma habilidade relacionada quando o trabalho sair do centro de gravidade deste fluxo de trabalho importado.
- Antes de mesclar ou encerrar, registre o que foi usado, o que mudou e o que o revisor ainda precisa verificar.
Notas do Fluxo de Trabalho Importado
Importado: Direção de Design
Comprometa-se com uma direção estética OUSADA:
- Propósito: Que problema esta interface resolve? Quem a usa?
- Tom: Escolha um extremo: brutalmente minimalista, caos maximalista, retrofuturista, orgânico/natural, luxuoso/refinado, lúdico/infantil, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Há tantos sabores para escolher. Use estes para inspiração, mas projete um que seja fiel à direção estética.
- Restrições: Requisitos técnicos (framework, desempenho, acessibilidade).
- Diferenciação: O que torna isso INESQUECÍVEL? Qual é a única coisa que alguém vai lembrar?
CRÍTICO: Escolha uma direção conceitual clara e execute-a com precisão. Maximalismo ousado e minimalismo refinado funcionam – o segredo é a intencionalidade, não a intensidade.
Em seguida, implemente código funcional que seja:
- De nível de produção e funcional
- Visualmente marcante e memorável
- Coeso com um ponto de vista estético claro
- Meticulosamente refinado em cada detalhe
Exemplos
Exemplo 1: Solicite o fluxo de trabalho original diretamente
Use @frontend-design para lidar com <tarefa>. Comece pelo fluxo de trabalho original copiado, carregue apenas os arquivos que alteram o resultado e mantenha a proveniência visível na resposta.
Explicação: Este é o ponto de partida mais seguro quando o operador precisa do fluxo de trabalho importado, mas não do repositório inteiro.
Exemplo 2: Solicite uma revisão baseada em proveniência
Revise @frontend-design com base em metadata.json e ORIGIN.md, depois explique quais arquivos copiados você carregaria primeiro e por quê.
Explicação: Use isto antes de revisão ou solução de problemas quando precisar de uma explicação precisa e auditável da origem e seleção de arquivos.
Exemplo 3: Restrinja os arquivos de suporte copiados antes da execução
Use @frontend-design para <tarefa>. Carregue apenas as referências, exemplos ou scripts copiados que alteram o resultado e nomeie os arquivos explicitamente antes de prosseguir.
Explicação: Isso mantém a habilidade alinhada com a divulgação progressiva, em vez de carregar todo o pacote copiado por padrão.
Exemplo 4: Monte um pacote de revisão
Revise @frontend-design usando os arquivos originais copiados mais a proveniência, depois resuma quaisquer lacunas antes de mesclar.
Explicação: Isso é útil quando o PR está aguardando revisão humana e você deseja um pacote de auditoria reproduzível.
Notas de Uso Importadas
Importado: Exemplos
Exemplo 1: Página de destino com estética forte
O usuário diz: "Construa uma landing page para um produto de ferramentas de desenvolvedor, algo que não pareça com todos os outros SaaS." Ações: Escolha uma direção ousada (ex.: brutalista ou editorial); escolha um par de tipografia distinto e uma paleta coesa; implemente com espaçamento fluido e um ponto focal claro; evite cartões dentro de cartões e clichês de métricas de herói. Resultado: Um layout de página única com hierarquia clara, tipografia memorável e nenhum sinal genérico de IA (sem gradientes roxos, sem cartões arredondados com bordas grossas acentuadas).
Exemplo 2: Dashboard ou interface de aplicativo
O usuário diz: "Crie um painel para visualizar análises com um tema escuro." Ações: Comprometa-se com uma estética escura específica (ex.: escuro refinado com neutros matizados, não o glow-padrão em preto); use consultas de contêiner para painéis; adicione um momento de movimento bem pensado (ex.: carregamento escalonado de lista); garanta que estados vazios sejam úteis. Resultado: Painel funcional que parece intencionalmente projetado – paleta distinta, sem brilho ciano/roxo, hierarquia de dados clara e comportamento responsivo.
Exemplo 3: Pôster ou artefato de marketing
O usuário diz: "Faça um pôster para uma palestra de conferência sobre desempenho frontend." Ações: Escolha um conceito tipográfico ou visual forte; use uma escala tipográfica modular e paleta limitada; evite layout genérico de foto de stock + manchete. Resultado: Um pôster que poderia ser um artefato de design independente – tipografia e composição memoráveis, não um preenchimento de template.
Melhores Práticas
Trate a habilidade pública gerada como uma camada de empacotamento revisável em torno do repositório original. O objetivo é manter a proveniência explícita e carregar apenas o material de origem copiado que melhora materialmente a execução.
-
Tipografia → Consulte a referência de tipografia para escalas, combinações e estratégias de carregamento.
- Escolha fontes que sejam bonitas, únicas e interessantes.
- Combine uma fonte de exibição distinta com uma fonte de corpo refinada.
- FAÇA: Use uma escala tipográfica modular com tamanho fluido (clamp) FAÇA: Varie pesos e tamanhos de fonte para criar hierarquia visual clara NÃO FAÇA: Use fontes muito usadas – Inter, Roboto, Arial, Open Sans, padrões do sistema NÃO FAÇA: Use tipografia monoespaçada como atalho preguiçoso para vibes "técnicas/desenvolvedor" NÃO FAÇA: Coloque ícones grandes com cantos arredondados acima de cada título – eles raramente agregam valor e fazem os sites parecerem padronizados ### Cor & Tema → Consulte a referência de cor para OKLCH, paletas e modo escuro.
- Comprometa-se com uma paleta coesa.
- Cores dominantes com acentos nítidos superam paletas tímidas e uniformemente distribuídas.
- FAÇA: Use funções de cor CSS modernas (oklch, color-mix, light-dark) para paletas perceptualmente uniformes e de fácil manutenção FAÇA: Matize seus neutros em direção ao seu tom de marca – mesmo uma dica sutil cria coesão subconsciente NÃO FAÇA: Use texto cinza em fundos coloridos – parece desbotado; use um tom da cor de fundo NÃO FAÇA: Use preto puro (#000) ou branco puro (#fff) – sempre matize; preto/branco puro nunca aparece na natureza NÃO FAÇA: Use a paleta de cores de IA: ciano no escuro, gradientes roxo-para-azul, acentos neon em fundos escuros NÃO FAÇA: Use texto gradiente para "impacto" – especialmente em métricas ou títulos; é decorativo em vez de significativo NÃO FAÇA: Padrão para modo escuro com acentos brilhantes – parece "legal" sem exigir decisões reais de design ### Layout & Espaço → Consulte a referência espacial para grades, ritmo e consultas de contêiner.
Notas Operacionais Importadas
Importado: Diretrizes de Estética Frontend
Tipografia
→ Consulte referência de tipografia para escalas, combinações e estratégias de carregamento.
Escolha fontes que sejam bonitas, únicas e interessantes. Combine uma fonte de exibição distinta com uma fonte de corpo refinada.
FAÇA: Use uma escala tipográfica modular com tamanho fluido (clamp) FAÇA: Varie pesos e tamanhos de fonte para criar hierarquia visual clara NÃO FAÇA: Use fontes muito usadas – Inter, Roboto, Arial, Open Sans, padrões do sistema NÃO FAÇA: Use tipografia monoespaçada como atalho preguiçoso para vibes "técnicas/desenvolvedor" NÃO FAÇA: Coloque ícones grandes com cantos arredondados acima de cada título – eles raramente agregam valor e fazem os sites parecerem padronizados
Cor & Tema
→ Consulte referência de cor para OKLCH, paletas e modo escuro.
Comprometa-se com uma paleta coesa. Cores dominantes com acentos nítidos superam paletas tímidas e uniformemente distribuídas.
FAÇA: Use funções de cor CSS modernas (oklch, color-mix, light-dark) para paletas perceptualmente uniformes e de fácil manutenção FAÇA: Matize seus neutros em direção ao seu tom de marca – mesmo uma dica sutil cria coesão subconsciente NÃO FAÇA: Use texto cinza em fundos coloridos – parece desbotado; use um tom da cor de fundo NÃO FAÇA: Use preto puro (#000) ou branco puro (#fff) – sempre matize; preto/branco puro nunca aparece na natureza NÃO FAÇA: Use a paleta de cores de IA: ciano no escuro, gradientes roxo-para-azul, acentos neon em fundos escuros NÃO FAÇA: Use texto gradiente para "impacto" – especialmente em métricas ou títulos; é decorativo em vez de significativo NÃO FAÇA: Padrão para modo escuro com acentos brilhantes – parece "legal" sem exigir decisões reais de design
Layout & Espaço
→ Consulte referência espacial para grades, ritmo e consultas de contêiner.
Crie ritmo visual através de espaçamento variado – não o mesmo preenchimento em todos os lugares. Abrace a assimetria e composições inesperadas. Quebre a grade intencionalmente para ênfase.
FAÇA: Crie ritmo visual através de espaçamento variado – agrupamentos apertados, separações generosas FAÇA: Use espaçamento fluido com clamp() que respira em telas maiores FAÇA: Use assimetria e composições inesperadas; quebre a grade intencionalmente para ênfase NÃO FAÇA: Enrole tudo em cartões – nem tudo precisa de um contêiner NÃO FAÇA: Aninhe cartões dentro de cartões – ruído visual, achate a hierarquia NÃO FAÇA: Use grades de cartões idênticas – cartões do mesmo tamanho com ícone + título + texto, repetidos infinitamente NÃO FAÇA: Use o template de layout de métrica de herói – número grande, rótulo pequeno, estatísticas de suporte, acento gradiente NÃO FAÇA: Centralize tudo – texto alinhado à esquerda com layouts assimétricos parece mais projetado NÃO FAÇA: Use o mesmo espaçamento em todos os lugares – sem ritmo, os layouts parecem monótonos
Detalhes Visuais
FAÇA: Use elementos decorativos intencionais e propositais que reforçam a marca NÃO FAÇA: Use glassmorphism em todos os lugares – efeitos de desfoque, cartões de vidro, bordas brilhantes usadas decorativamente em vez de propositalmente NÃO FAÇA: Use elementos arredondados com borda grossa colorida em um lado – um acento preguiçoso que quase nunca parece intencional NÃO FAÇA: Use sparklines como decoração – pequenos gráficos que parecem sofisticados, mas não transmitem nada significativo NÃO FAÇA: Use retângulos arredondados com sombras genéricas – seguros, esquecíveis, poderiam ser qualquer saída de IA NÃO FAÇA: Use modais a menos que não haja realmente alternativa melhor – modais são preguiçosos
Movimento
→ Consulte referência de movimento para tempo, easing e movimento reduzido.
Concentre-se em momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas cria mais encanto do que micro-interações espalhadas.
FAÇA: Use movimento para transmitir mudanças de estado – entradas, saídas, feedback FAÇA: Use easing exponencial (ease-out-quart/quint/expo) para desaceleração natural FAÇA: Para animações de altura, use transições de grid-template-rows em vez de animar altura diretamente NÃO FAÇA: Anime propriedades de layout (largura, altura, preenchimento, margem) – use apenas transform e opacity NÃO FAÇA: Use easing de bounce ou elástico – parecem datados e bregas; objetos reais desaceleram suavemente
Interação
→ Consulte referência de interação para formulários, foco e padrões de carregamento.
Faça as interações parecerem rápidas. Use UI otimista – atualize imediatamente, sincronize depois.
FAÇA: Use divulgação progressiva – comece simples, revele sofisticação através da interação (opções básicas primeiro, avançadas atrás de seções expansíveis;