hakushiidev/claude-skills

Esta skill orienta a criação de interfaces frontend distintas e prontas para produção. Implemente código funcional real com atenção excepcional a detalhes estéticos.

Exemplos de prompts

• "Construa a seção hero a partir do briefing"
• "Crie um componente de card em estilo escandinavo"
• "Quero que isso pareça uma revista japonesa. Monte o layout."
• "Construa a página de configurações. Use o estilo que couber."

Antes de Escrever Qualquer Código

1. Explore o codebase existente primeiro. Varra especificamente por:

   • Diretórios de componentes: components/, ui/, shared/ e liste cada componente por nome e suas props/API
   • Variáveis / tokens CSS: arquivos chamados tokens.css, variables.css, theme.css, ou declarações :root com propriedades customizadas
   • Configuração do Tailwind: tailwind.config.js ou tailwind.config.ts, verifique theme.extend para valores customizados
   • Temas de frameworks UI: Material UI createTheme, Chakra extendTheme, shadcn globals.css e components.json
   • Storybook: diretório .storybook/ ou arquivos *.stories.* indicando componentes documentados
   • Carregamento de fontes: links do Google Fonts, declarações @font-face, imports de fontes
   • Padrões de layout: como páginas existentes lidam com grid, containers, breakpoints e espaçamento
   • Dependências UI no package.json: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   • Se existirem componentes que correspondam ou correspondam parcialmente ao que você precisa construir, estenda-os ou componha-os. Não crie duplicatas.

2. Entenda o contexto:

   • Que problema esta interface resolve? Quem a utiliza?
   • Qual é o tom emocional pretendido?
   • Quais são as restrições rígidas (framework, dispositivos, desempenho, acessibilidade)?

3. Comprometa-se com uma direção estética. Ou o usuário nomeia uma (veja filosofias abaixo) ou você escolhe uma que se encaixe no contexto. Declare sua escolha e o motivo antes de escrever código.

Filosofias Estéticas

Quando o usuário nomeia uma filosofia ou descreve uma vibe, use-as como guias de implementação concretos. Cada filosofia define tipografia, cor, layout, espaçamento, movimento e tratamento de detalhes.

Dieter Rams (Funcionalista)

Menos, mas melhor. Cada elemento merece seu lugar. Nada decorativo sem função.

• Tipografia: Sem serifa limpa (Helvetica Neue, Suisse Intl, Akkurat). Espaçamento de letras apertado em títulos. Altura de linha generosa no corpo. Uma escala de tamanho, usada estritamente.
• Cor: Contida. Monocromática com um único acento funcional. Fundos branco ou cinza claro. Cor é informação, não decoração.
• Layout: Grid estrito. Hierarquia funcional clara. Componentes alinhados a um sistema espacial. Sem assimetria por si só.
• Espaçamento: Escala matemática consistente (base 4px/8px). Preenchimento generoso. Espaço para respirar entre elementos.
• Movimento: Mínimo. Transições propositais apenas (mudanças de estado, revelações). Nenhuma animação decorativa.
• Detalhes: Bordas e divisores sutis em vez de sombras. Alinhamento preciso. Cantos arredondados usados com moderação e consistência.

Suíço / Tipografia Internacional

Objetividade através da estrutura. O grid é sagrado. O conteúdo é rei.

• Tipografia: Sem serifas fortes (Neue Haas Grotesk, Univers, Aktiv Grotesk). Contraste de escala dramático entre títulos e corpo. Subtítulos em caixa alta com espaçamento de letras generoso.
• Cor: Alto contraste. Preto, branco e uma cor primária. Blocos de cor ousados como elementos composicionais.
• Layout: Grid rígido de várias colunas. Equilíbrio assimétrico. Texto e imagem em diálogo. Alinhamento entre elementos é inegociável.
• Espaçamento: Definido pelo módulo do grid. Calhas são parte do design, não um pensamento posterior.
• Movimento: Transições de página e revelações acionadas por rolagem que respeitam o grid. Nenhum bounce divertido.
• Detalhes: Réguas (linhas horizontais) como elementos estruturais. Sem gradientes. Sem sombras. Achatamento é o ponto.

Minimalismo Japonês (Ma)

O espaço negativo é conteúdo. A contenção comunica sofisticação. Silencioso em vez de barulhento.

• Tipografia: Sem serifas finas ou serifas elegantes (Noto Sans, Cormorant). Altura de linha generosa (1,8-2,0). Tamanho de corpo pequeno com margens grandes de espaço em branco.
• Cor: Naturais suaves (cinzas quentes, pedra, sálvia, washi). Mudanças tonais sutis em vez de contrastes fortes. Quase monocromático.
• Layout: Assimétrico, mas equilibrado. Conteúdo deslocado do centro. Grandes áreas vazias são intencionais. O conteúdo flutua no espaço.
• Espaçamento: Espaço em branco extremo. Preenchimento e margens 2-3x o que parece "normal". Elementos respiram.
• Movimento: Desvanecimentos lentos e suaves (400-600ms). Sem bounce, sem overshoot. Transições de opacidade em vez de deslocamentos de posição.
• Detalhes: Bordas finas. Textura sutil (grão de papel, linho). Nenhuma sombra afiada. Efeitos suaves e difusos.

Brutalista / Cru

A estrutura é visível. Sem polimento. A anti-estética é a estética.

• Tipografia: Fontes do sistema, mono-espaçadas (JetBrains Mono, IBM Plex Mono, Courier) ou faces de exibição agressivas. Tamanhos mistos. Texto como textura.
• Cor: Preto e branco primários. Se cor, é crua e conflitante (amarelo de construção, laranja de perigo, verde de terminal). Sem gradientes.
• Layout: Bordas visíveis. Modelo de caixa exposto. Blocos empilhados. Aspereza deliberada. Conteúdo primeiro, beleza nunca.
• Espaçamento: Apertado ou intencionalmente irregular. Preenchimento que parece comprimido.
• Movimento: Nenhum, ou chocante (mudanças de estado instantâneas, cortes secos). Sem easing.
• Detalhes: Contornos visíveis. Elementos de formulário padrão do navegador podem ser intencionais. Interfaces apenas de texto. Sem ícones, a menos que funcionais.

Escandinavo

Calor mais contenção. Beleza funcional. Acessível por padrão.

• Tipografia: Sem serifas arredondadas e amigáveis (Nunito, Poppins, Circular, Cera Pro). Pesos médios. Tamanhos de leitura confortáveis.
• Cor: Paleta natural. Brancos quentes, azuis suaves, verdes suaves, argila. Acentos pastéis. Sem preto puro (use carvão).
• Layout: Limpo e aberto. Baseado em cards. Cantos arredondados (8-12px). Layouts confortáveis e generosos.
• Espaçamento: Generoso, mas não extremo. Tudo parece acessível e sem desordem.
• Movimento: Easing suave e natural. Elevações de hover sutis. Conteúdo que se acomoda no lugar.
• Detalhes: Sombras suaves (grande desfoque, baixa opacidade). Elementos arredondados. Tons quentes em cinzas. Amigável para ilustrações.

Art Déco / Geométrico

Simetria ousada. Precisão decorativa. Declaração e luxo.

• Tipografia: Faces de exibição geométricas (Futura, Poiret One, Josefin Sans). Manchetes em caixa alta com espaçamento de letras extremo. Texto do corpo com serifa para contraste.
• Cor: Rico e profundo. Dourado/champanhe, esmeralda, marinho, bordô, preto. Acentos metálicos (gradientes dourados, efeitos de brilho).
• Layout: Simétrico e centralizado. Eixo vertical forte. Molduras e bordas decorativas. Profundidade em camadas.
• Espaçamento: Estruturado e formal. O preenchimento é arquitetônico.
• Movimento: Revelações elegantes. Animações de entrada escalonadas. Profundidade de paralaxe.
• Detalhes: Padrões geométricos (chevrons, explosões solares, formas de leque). Bordas ornamentais. Textura (mármore, metal escovado). Tipografia de declaração em escala hero.

Neo-Memphis

Caos lúdico. Anti-corporativo. Formas como personagens.

• Tipografia: Mistura de pesos e estilos. Misturar fontes é intencional. Manchetes enormes. Texto em ângulos.
• Cor: Primárias ousadas e neon. Combinações conflitantes (rosa e amarelo, azul e laranja). Tons neutros não. Cor plana, sem gradientes.
• Layout: Grid quebrado. Elementos sobrepostos. Formas (círculos, triângulos, rabiscos) como elementos composicionais. Assimétrico de propósito.
• Espaçamento: Denso em algumas áreas, vazio em outras. O ritmo é irregular.
• Movimento: Saltitante, lúdico. Efeitos de hover exagerados. Elementos que balançam, giram ou estouram.
• Detalhes: Bordas grossas. Formas geométricas como decoração. Padrões (pontos, traços, zigue-zagues). Sombras projetadas com bordas duras e cores brilhantes.

Editorial / Revista

Design liderado pelo conteúdo. A tipografia faz o trabalho pesado. Cada página é uma página dupla.

• Tipografia: Serifa de exibição para manchetes (Playfair Display, Fraunces, Instrument Serif). Sem serifa limpa para corpo (DM Sans, Source Sans). Escala dramática (manchetes hero com 72-120px). Citações em destaque. Capitulares.
• Cor: Mínima. Preto e branco com um acento. Cor usada editorialmente (para destacar, não decorar).
• Layout: Grid de colunas forte (3-5 colunas). Imagens com sangria total. Quebra de texto. Larguras de coluna mistas. Ritmo vertical.
• Espaçamento: Margens generosas. Entrelinha apertada em manchetes, aberta no corpo. Espaço em branco como ferramenta composicional.
• Movimento: Revelações acionadas por rolagem. Paralaxe em imagens. Transições de página suaves.
• Detalhes: Réguas finas como divisores. Tipografia de legenda. Metadados de edição/data. Detalhes inspirados em impressão (números de fólio, cabeçalhos contínuos).

Diretrizes de Implementação

• Tipografia: Escolha fontes distintas carregadas via Google Fonts ou CDN. Evite padrões genéricos (Inter, Roboto, Arial, fontes do sistema). Combine uma fonte de exibição com uma fonte de corpo.
• Cor: Use variáveis CSS para consistência. Cor dominante com acentos nítidos supera paletas seguras e distribuídas uniformemente.
• Movimento: Transições CSS para HTML. Biblioteca Framer Motion/Motion para React. Foque em momentos de alto impacto (revelações de carregamento de página, mudanças de estado) em vez de micro-interações espalhadas.
• Composição espacial: Layouts inesperados ganham atenção. Assimetria, sobreposição, fluxo diagonal, elementos que quebram o grid. Ou, se a filosofia exigir, grids estritos executados com precisão.
• Fundos e profundidade: Crie atmosfera. Malhas de gradiente, texturas de ruído, padrões geométricos, transparências em camadas, sobreposições de grão. Combine com a filosofia escolhida.

NUNCA produza estética genérica de IA: gradientes roxos sobre branco, fonte Inter, grids de card previsíveis, layouts de componentes padronizados. Cada saída deve parecer projetada para seu contexto específico.

Combine a complexidade da implementação com a visão estética. Uma interface Dieter Rams são 50 linhas de CSS preciso. Uma interface Neo-Memphis são 300 linhas de caos criativo. Ambas estão corretas.

Mobile-First

Construa o layout mobile primeiro, depois escale. Isso é inegociável.

• Comece com um layout de coluna única a 375px de largura.
• Adicione complexidade em cada breakpoint (media queries min-width, não max-width).
• Os alvos de toque devem ter pelo menos 44x44px no mobile.
• O texto do corpo deve ter pelo menos 16px no mobile (evita o zoom do iOS no foco de entrada).
• A navegação deve ter um padrão específico para mobile (hambúrguer, abas inferiores ou gaveta). Não dependa de barras de navegação horizontais que transbordam.
• Teste se os comprimentos de linha permanecem confortáveis (45-75 caracteres) em cada breakpoint.

Modo Escuro

Se existir um arquivo de tokens de design (de /design-tokens), use sua paleta de modo escuro. Se não, gere suporte a modo escuro junto com o tema claro.

• Use propriedades customizadas CSS para que alternar temas signifique alterar valores de variáveis, não reescrever componentes.
• Suporte tanto a media query prefers-color-scheme (preferência do sistema) quanto um atributo [data-theme="dark"] (alternância manual).
• Não simplesmente inverta cores. Fundos escuros devem ser quentes ou frios para combinar com a filosofia (carvão quente para Escandinavo, ardósia fria para Suíço, quase preto para Brutalista).
• Reduza texto branco puro para off-white (ex.: #E5E5E5 ou rgba(255,255,255,0.87)) para reduzir o cansaço visual.
• Sombras no modo escuro devem ser mais escuras e mais transparentes, não os mesmos valores do modo claro.
• Cores de acento podem precisar de ajustes de luminosidade para manter as taxas de contraste WCAG contra fundos escuros.
• Inclua uma media query prefers-reduced-motion para usuários que precisam dela. Desabilite ou simplifique todas as animações e transições dentro dessa consulta.