shixun926-dotcom/Frontend-Workflow

Frontend Workflow: Controle Mestre de Projetos Frontend

1. Prioridade Máxima: Ler o Projeto Primeiro

Antes de modificar qualquer arquivo, é obrigatório:

1. Ler os arquivos AGENTS.md, CLAUDE.md, README e outras especificações de desenvolvimento aplicáveis na raiz do projeto.
2. Verificar package.json, arquivos de lock, configuração de build, configuração de rotas e componentes existentes.
3. Identificar a stack tecnológica atual do projeto, versão do framework, biblioteca de componentes UI, esquema de CSS e comandos de execução.
4. Se for um projeto com frontend e backend separados, definir claramente os limites entre eles e não modificar os contratos da API do backend sem autorização.
5. Se o projeto já possui um sistema de design, especificação de componentes ou estilo de página, priorize a herança e o aprimoramento, em vez de descartar e refazer.

Não julgue a stack tecnológica apenas pela descrição do usuário ou nome do diretório. É necessário verificar os arquivos reais.

2. Identificar a Stack Tecnológica e Decidir a Forma de Uso do Skill

Caso A: Projeto React

Execute em sequência:

1. frontend-design: Definir direção visual, especificações de design e layout da página.
2. frontend-production-shadcn: Após confirmar a compatibilidade do projeto, implementar componentes, layout e interações.
3. premium-ui: Verificar as páginas reais e promover correções.

Somente se o projeto já adotou ou permite explicitamente o uso de tecnologias como React, Tailwind CSS e shadcn/ui, use diretamente o esquema de implementação de componentes específico deste skill.

Caso B: Projeto Vue 3

Execute em sequência:

1. frontend-design: Definir direção visual, especificações de design e layout da página.
2. Use frontend-production-shadcn apenas como referência de design e qualidade de engenharia; não execute as instruções de implementação exclusivas do React, JSX, React Hooks ou shadcn/ui contidas nele.
3. Use o Vue 3, TypeScript, roteamento, biblioteca de componentes UI e esquema de CSS existentes no projeto para concluir a implementação.
4. premium-ui: Verificar as páginas reais e promover correções.

Não migre um projeto Vue 3 para React apenas para adaptar o segundo Skill.

Caso C: Outras Stacks Tecnológicas

Primeiro, verifique as tecnologias e restrições existentes do projeto. Use frontend-design para planejamento visual, utilize os princípios de design transportáveis do frontend-production-shadcn como referência e conclua a implementação usando as tecnologias adequadas ao projeto atual. Por fim, use o método de revisão do premium-ui para aceitação.

3. Executar Rigorosamente as Três Fases

Fase 1: Design Visual

Invoque frontend-design.

Requisitos:

• Definir claramente o objetivo da página, os principais usuários e as operações principais.
• Determinar direção visual, fontes, cores, espaçamento, layout e hierarquia de informações.
• Propor direções de design com diferenças substanciais e justificar a escolha final.
• Formar uma especificação de design executável antes de iniciar a implementação.

Fase 2: Implementação de Engenharia

Com base na stack tecnológica, invoque frontend-production-shadcn ou apenas consulte seus princípios de design.

Requisitos:

• Primeiro, reutilizar componentes e dependências existentes.
• Implementar páginas completas, navegação, formulários, layout responsivo e estados de interação.
• Tratar estados de carregamento, dados vazios, erro, desabilitado e feedback de sucesso.
• Manter a lógica de negócios real; não usar interações falsas para simular funcionalidades concluídas.
• Não realizar refatorações em grande escala ou trocar de framework sem autorização.

Fase 3: Aceitação Visual

Invoque premium-ui, verificando a implementação real, não apenas lendo o código.

Requisitos:

• Priorizar iniciar o projeto e usar ferramentas de navegador ou captura de tela disponíveis para verificar a página.
• Verificar tipografia, alinhamento, espaçamento, cores, hierarquia, consistência de componentes e comportamento responsivo.
• Verificar se botões, formulários, navegação e interações principais estão funcionando.
• Registrar as diferenças entre o objetivo do design e o resultado real.
• Corrigir os problemas encontrados e reexaminar.

Se o ambiente não tiver navegador ou capacidade de captura de tela, é obrigatório declarar explicitamente que não é possível realizar uma aceitação visual real e não afirmar que a página já foi verificada.

4. Regras de Execução

1. Após cada fase, reporte brevemente a conclusão antes de prosseguir para a próxima.
2. Se um Skill não existir, não estiver carregado ou não puder ser executado, explique claramente e adote uma alternativa viável.
3. Não presuma que outros Skills serão executados automaticamente; quando necessário, solicite explicitamente a invocação ou leitura do Skill correspondente.
4. Siga os requisitos explícitos do usuário, as especificações do projeto e a stack tecnológica existente.
5. Não sacrifique acessibilidade, capacidade de manutenção, desempenho ou correção de negócios em busca de efeitos visuais.
6. Após a conclusão, execute os comandos de build, verificação e teste suportados pelo projeto e relate os resultados.

5. Entrega Final

Ao finalizar, reporte:

• Stack tecnológica identificada e versões.
• Direção de design adotada e principais decisões de design.
• Principais arquivos modificados e suas funcionalidades.
• Status de execução de cada uma das três fases.
• Resultados do build, testes e verificação visual real.
• Problemas não resolvidos e itens que precisam de confirmação manual.