Prompt para transformar HTML gerado pelo Claude em MVP Angular + Firebase com fluxo de trabalho otimizado

Objetivo: orientar a IA a transformar o HTML/CSS gerado pelo Claude em uma aplicação MVP funcional usando Angular no frontend e Firebase no backend, cobrindo desde a extração de componentes a partir do HTML até a entrega de código limpo, documentação e handoff para desenvolvedores.

Contexto: O design foi gerado com Claude (HTML/CSS) sem uso de Figma. O objetivo é manter o visual existente e converter rapidamente para uma base Angular + Firebase, sem retrabalho visual, mantendo manutenibilidade e escalabilidade. 

Instruções detalhadas:
- Analisar o HTML/CSS existente e extrair uma lista de componentes UI (ex.: header, nav, layouts de página, cards, modais, player, perfis, formulários, listas, botões, etc.).
- Mapear esses componentes para uma arquitetura Angular: módulos, componentes, serviços, guards, rotas, e state management básico.
- Propor uma estrutura de pastas clara (ex.: src/app/core, src/app/shared, src/app/features/{feature-name}, etc.), naming conventions e padrões de código (Angular Style Guide).
- Gerar scaffolding dev-ready: skeletons de componentes com TS/HTML/CSS, com inputs/outputs apropriados, roteamento configurado, e placeholders para lógica de negócio (serviços Angular).
- Definir a arquitetura Firebase: Auth (email/password ou providers), Firestore/RTDB para dados, Storage para uploads (vídeos), Hosting, e regras de segurança básicas. Incluir modelos de dados (collections, documents, subcollections) e exemplos de regras de segurança.
- Plano de MVP com prioridade: autenticação, operações CRUD básicas, perfis de jogador, upload de vídeo, fluxo de coach/review. Listar entregáveis por sprint/etapa.
- Prompts para Claude (ou outra IA) gerarem componentes Angular prontos a partir de descrições de design: fornecer prompts curtos e templates de handoff com especificações de props/inputs, outputs esperados (arquivos TS/HTML/CSS), e checagem de compatibilidade com a estrutura proposta.
- Saídas esperadas do prompt:
  1) Estrutura de pastas Angular recomendada.
  2) Lista de componentes derivados do HTML Claude com descrições curtas.
  3) Skeleton de componentes (arquivos .ts, .html, .css) compatíveis com Angular, com placeholders para lógica.
  4) Serviço Firebase inicial (auth, data service, storage), incluindo exemplos de código e configuração.
  5) Modelo de modelagem Firestore (collections, documents, subcollections) e regras de segurança.
  6) Plano de MVP com prioridades, épicos, histórias de usuário e critérios de aceitação.
  7) Template de hand-off para dev (documentação de arquitetura, convenções, guias de integração).
  8) Template de prompt para gerar outputs dev-ready (incluindo estilo de prompt, parâmetros, e abordagem de validação).
  9) Dicas de prompt engineering para obter outputs mais utilizáveis (ex.: prompts curtos para gerar componentes, prompts de verificação de compatibilidade, prompts de validação de segurança).
  10) Checklist de qualidade (acessibilidade, performance, testabilidade).
- Recomendações de estilo de código, padrões de segurança, e práticas de performance (lazy loading, preloading strategy, validação de formulários, proteção de rotas).
- Dicas de integração entre código Angular e serviços Firebase, incluindo exemplos de configuração do ambiente (environment.ts), inicialização do Firebase, e como estruturar providers.
- Formato de saída desejado: blocos de código de exemplo (TS/HTML/CSS) apenas como scaffolds, sem dependências específicas de implementação, para facilitar a adaptação pelo time.
- Critérios de aceitação: o MVP deve compilar, possuir autenticação básica, CRUD funcional, navegação entre telas, upload de vídeo com storage, e fluxos de coach/review descritos com estados claros.
- Considerações de validação: incluir testes unitários básicos, checagem de tipos, e sugestões de testes de integração simples.
- Perguntas rápidas para alinhar com a equipe (escopo, limites, escolhas de tecnologia) e pontos de decisão (modularização, uso de Firestore vs RTDB, estrutura de hospedagem).
- Entrega final: repositório com estrutura de código, documentação de arquitetura, guia de handoff para dev, e exemplos de prompts de uso contínuo para evolução do MVP.

Dicas adicionais:
- O prompt deve permanecer claro e objetivo, evitando ambiguidade entre design e implementação.
- Use prompts curtos para gerar componentes específicos e prompts mais longos para gerar a arquitetura completa e o handoff.
- Inclua exemplos de entradas (HTML Claude) e saídas esperadas (componentes Angular, serviços Firebase).
- Sugira as melhores práticas de manter o visual sem Figma (classes utilitárias, CSS encapsulado, guidelines de styling).
- Indique como validar rapidamente com um revisor de UI/UX e com o time de backend.

Ferramenta ideal por etapa (sugestão): utilize ChatGPT para a elaboração da arquitetura, Hand-off, e geração de código scaffold; utilize Claude para geração de componentes específicos a partir de descrições de design; combine com ferramentas de verificação de consistência de código para checagens rápidas. No geral, a recomendação principal é usar ChatGPT para a maior parte da entrega por ser mais robusto em codificação e integração de serviços, com Claude em fases de design-to-code quando necessário. 

Observações finais: inclua no final do output um resumo com 3 decisões críticas e 3 trade-offs a considerar durante a implementação.