Escolher a camada Web correta antes de codificar
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Mapa mestre Instrução para IA
Plataforma Web — MDN
Mapa de decisão para HTML, CSS, JavaScript, HTTP, Web APIs, Web Components e preocupações transversais.
Como usar
Anexe o arquivo à conversa com a IA e declare que ele é o contrato técnico da tarefa. Em seguida, forneça contexto, requisito, restrições e critérios de aceite.
Pronto para anexarFluxo recomendado
Como utilizar este .md em um projeto
1. Declare o ambienteBrowser, servidor, build, versão, dispositivos, compatibilidade e dependências.
2. Defina o objetivo do usuárioNão comece por uma classe/API; comece pelo comportamento que precisa existir.
3. Peça seleção de conceitosA IA deve citar as partes do guia aplicáveis e ignorar o restante.
4. ImplementeGere código somente depois da decisão e preserve a arquitetura existente.
5. ValideChecklist, edge cases, acessibilidade, segurança, responsividade/performance conforme o caso.
Aplicações
Quando anexar este guia
Evitar JavaScript para problemas resolvidos por HTML/CSS
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Combinar referências especializadas
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Revisar acessibilidade, segurança e performance
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Mapa do arquivo
Principais blocos de conhecimento
1. Contrato de execução para a IA
Seção coberta pelo guia Markdown.
2. Mapa de responsabilidades
Seção coberta pelo guia Markdown.
3. Referências para tecnologias Web
Seção coberta pelo guia Markdown.
4. Preocupações transversais
Seção coberta pelo guia Markdown.
Checklist de aceite
Seção coberta pelo guia Markdown.
Prompt-base para IA
Seção coberta pelo guia Markdown.
Fontes primárias
Seção coberta pelo guia Markdown.
Prompt
Prompt-base para copiar
Use o guia “Plataforma Web — MDN” anexado como contrato técnico para esta tarefa. 1. Diagnostique o requisito e o ambiente. 2. Aponte as seções do guia que serão usadas. 3. Escolha a solução mais simples que preserve semântica, acessibilidade, segurança e manutenção. 4. Não invente APIs/classes. 5. Implemente e revise pelo checklist do guia. Contexto: [DESCREVA o sistema, stack, estado atual e cenário da mudança] Objetivo: [DESCREVA o resultado observável que deve existir ao final] Restrições: [DESCREVA o que não pode mudar, compatibilidade, segurança e limites técnicos]
Exemplo preenchido — o que o usuário pode descrever
Use o modelo acima com dados concretos do projeto. O exemplo abaixo mostra o nível de detalhe esperado.
Contexto: Aplicação web responsiva feita com HTML, CSS e JavaScript, destinada a Chrome, Edge e Firefox atuais. Objetivo: Criar upload de arquivo com validação, prévia e feedback de progresso escolhendo a camada Web mais adequada para cada parte. Restrições: Preferir recursos nativos; acessível por teclado; sem biblioteca adicional; funcionar em contexto HTTPS.
ContextoStack, versões, arquitetura, página/módulo afetado, estado atual e comportamento existente.
ObjetivoResultado observável para o usuário ou para o sistema; diga o que deve funcionar ao final.
RestriçõesO que não pode mudar, compatibilidade, segurança, acessibilidade, performance, prazo e limites de escopo.