Criar componentes interoperáveis
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Componentes nativos Instrução para IA
Web Components — MDN
Custom Elements, lifecycle, Shadow DOM, templates, slots, eventos, acessibilidade e distribuição por ES Modules.
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
Definir APIs por properties/attributes/events
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Encapsular DOM/estilos quando útil
Inclua o contexto do projeto e peça à IA que justifique a escolha técnica.
Distribuir componentes sem framework obrigatório
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. Quando usar
Seção coberta pelo guia Markdown.
3. Custom Elements
Seção coberta pelo guia Markdown.
4. Shadow DOM
Seção coberta pelo guia Markdown.
5. Templates e slots
Seção coberta pelo guia Markdown.
6. Eventos e integração
Seção coberta pelo guia Markdown.
7. Acessibilidade
Seção coberta pelo guia Markdown.
8. Distribuição
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 “Web Components — 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: Biblioteca de UI deve funcionar em páginas sem framework e ser distribuída como ES Modules. Objetivo: Criar um componente <status-badge> reutilizável com tema, atributos/propriedades documentados e evento de mudança. Restrições: API pequena e estável; acessibilidade nativa; lifecycle com cleanup; Shadow DOM somente se o encapsulamento trouxer benefício real.
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.