ITDanZF/skill

Reconstrução de Protótipo Frontend

Ativação

Use este skill somente quando ambas as condições forem verdadeiras:

• O usuário fornece ou faz referência clara a uma imagem de página, captura de tela, mockup ou protótipo.
• O usuário pede explicitamente para gerar, recriar, converter, implementar ou restaurar a página frontend relacionada.

Se o usuário pedir apenas para revisar ou descrever a imagem, não implemente código a menos que seja solicitado.

Fluxo de Trabalho

1. Inspecione a imagem do protótipo primeiro.

   • Identifique o tipo de página, viewport, principais regiões de layout, grade de alinhamento, ritmo de espaçamento, escala tipográfica, densidade e hierarquia visual.
   • Extraia elementos visíveis: navegação, formulários, botões, tabelas, cartões, listas, abas, filtros, mídia, estados vazios, indicadores de status e ícones.
   • Infira interações prováveis apenas a partir das affordances visíveis, como ações com hover, abas selecionadas, dropdowns, alternadores, filtros, modais, paginação ou estados de entrada.
   • Trate conteúdo ambíguo como exibição estática, a menos que o usuário peça comportamento funcional.

2. Inspecione o projeto frontend local antes de codificar.

   • Identifique o framework, roteamento, convenções de componentes, método de estilo, tokens de tema, variáveis CSS, configuração do Tailwind, sistema de design, biblioteca de ícones e padrões de página existentes.
   • Prefira componentes existentes, escalas de espaçamento, utilitários de tipografia, tokens de cor e primitivas de layout.
   • Corresponda ao padrão de página ou componente existente mais próximo quando ele não conflitar com o protótipo.

3. Planeje a superfície de implementação.

   • Escolha a menor estrutura de arquivo/componente que se encaixe nas convenções do projeto.
   • Mantenha os dados estáticos do protótipo locais e óbvios, a menos que o projeto tenha um padrão estabelecido de fixture ou dados mock.
   • Não introduza novo gerenciamento de estado, bibliotecas de componentes, frameworks CSS ou alterações globais de tema para uma recriação de página estática.

4. Implemente a página.

   • Recrie o layout e a estrutura visual com HTML semântico e componentes nativos do projeto.
   • Use CSS para layout, dimensionamento, espaçamento, comportamento responsivo, estados hover/focus, transições, camadas e estados visuais simples.
   • Use JavaScript apenas para comportamento que realmente exija estado ou manipulação de eventos.
   • Mantenha o código eficiente, legível e em estilo de produção: limites claros de componentes, duplicação mínima, nenhuma abstração avulsa que torne a página mais difícil de escanear.

5. Verifique o resultado visualmente.

   • Execute o servidor de desenvolvimento local relevante ou pré-visualização estática quando necessário.
   • Compare a página renderizada com o protótipo no viewport alvo e em pelo menos um ponto de interrupção responsivo, quando aplicável.
   • Corrija discrepâncias óbvias de espaçamento, hierarquia, cor, dimensionamento e estouro antes de finalizar.

Regras de Tema e Cor

Use o tema do projeto local como fonte da verdade:

• Prefira tokens do projeto, variáveis CSS, valores do tema Tailwind, props do sistema de design e variantes de componentes existentes.
• Se o projeto tiver um token semântico correspondente, use-o mesmo que a cor da captura de tela seja ligeiramente diferente.
• Se o projeto não tiver um token adequado, use a cor da captura de tela diretamente e mantenha-a local na página/componente recriado.
• Não modifique arquivos de tema globais apenas para corresponder a uma captura de tela, a menos que o usuário peça explicitamente.
• Preserve a consistência da marca em vez da cópia perfeita de cores quando a intenção do tema local for clara.

Extração de Layout e Elementos

Capture estes detalhes antes de escrever código:

• Estrutura da página: cabeçalho, barra lateral, rodapé, largura do conteúdo, regiões de rolagem, áreas fixas.
• Grade: colunas, linhas, calhas, ritmo de cartões/tabelas/listas, comportamento em pontos de interrupção.
• Tipografia: escala de títulos/corpo/legendas, peso, altura da linha, truncamento.
• Controles: tamanhos de botão, alturas de entrada, estados selecionado/desabilitado/carregando, ícones, badges.
• Fidelidade do conteúdo: rótulos, texto visível, números, datas, avatares, placeholders de imagem e estados vazios.
• Camadas: sombras, bordas, divisores, sobreposições, popovers e relações de z-index.

Não abuse do posicionamento absoluto. Prefira flex, grid, dimensionamento intrínseco, aspect-ratio, restrições min/max e regras responsivas baseadas em contêiner. Use posicionamento absoluto apenas para sobreposições, badges, âncoras decorativas ou camadas específicas da captura de tela que não possam ser expressas de forma limpa de outra forma.

Orientações de Interação

Para recriação de página estática, implemente interações apenas no nível implícito pela solicitação:

• Sempre inclua visuais acessíveis de hover, foco, ativo, selecionado, desabilitado e carregamento quando o protótipo os sugerir.
• Implemente abrir/fechar simples, alternância de abas, seleção ou filtragem apenas quando o usuário pedir comportamento interativo ou o protótipo depender claramente disso.
• Prefira seletores CSS e comportamento HTML nativo para interações simples quando prático.
• Evite JavaScript usado apenas para corrigir layout, espaçamento, truncamento, cores ou comportamento responsivo. Resolva isso com CSS.

Regras de Qualidade de Código

Siga práticas de frontend para grandes bases de código:

• Mantenha os componentes coesos e nomeados por domínio ou função visível, não por fragmentos visuais vagos.
• Evite dividir a página em muitos componentes minúsculos, a menos que haja responsabilidades independentes reais.
• Mantenha os dados de amostra estáticos tipados quando o projeto usar TypeScript.
• Use bibliotecas de ícones existentes em vez de SVGs codificados manualmente quando disponíveis.
• Adicione texto alternativo, rótulos, estilos de foco por teclado e estrutura semântica quando apropriado.
• Evite números mágicos codificados quando o projeto tiver tokens de espaçamento, dimensionamento ou cor.
• Não adicione dependências para efeitos que CSS ou utilitários existentes possam resolver.

Lista de Verificação de Conclusão

Antes da resposta final, confirme:

• A imagem foi inspecionada quanto a layout, elementos, tema e interações implícitas.
• O tema do projeto existente e as convenções de frontend foram verificados.
• As cores preferem tokens locais, com cores da captura de tela usadas apenas para tokens ausentes.
• CSS lida com layout visual e estados sempre que possível.
• A página renderizada foi pré-visualizada, ou o motivo pelo qual não pôde ser pré-visualizada foi declarado.