O que html-artifact-best-practices faz?
Uma Habilidade de Agente que ajuda agentes de IA a produzir artefatos HTML autônomos de alta qualidade em um único arquivo — julgar, criar, revisar e melhorar.
Funcionalidades Principais
- Julgar: Avaliar a qualidade de artefatos HTML existentes com base em critérios predefinidos (validação, acessibilidade, desempenho).
- Criar: Gerar novos artefatos HTML autônomos que seguem as melhores práticas, incluindo estrutura semântica e estilo embutido.
- Revisar: Inspecionar artefatos em busca de problemas comuns, como scripts quebrados, referências externas ou falta de responsividade.
- Melhorar: Aplicar correções automáticas e otimizações para elevar a qualidade do artefato.
Como Usar
- Ative a habilidade no seu agente de IA suportado.
- Forneça um artefato HTML existente (para julgar/revisar/melhorar) ou uma descrição (para criar).
- O agente usará as diretrizes definidas neste
SKILL.mdpara executar a tarefa.
Diretrizes para Artefatos HTML
- Único arquivo: Todo o HTML, CSS e JavaScript deve estar contido em um único arquivo.
- Sem dependências externas: Não use CDNs, fontes externas ou bibliotecas. Prefira recursos embutidos.
- Semântica acessível: Use elementos HTML apropriados (
<header>,<nav>,<main>) e atributosaria-*. - Responsivo: Design adaptável usando CSS Flexbox/Grid e media queries.
- Validação: O HTML deve passar no validador W3C sem erros críticos.
Plataformas Suportadas
- Claude Code
- Cursor
- Codex
- Outros agentes compatíveis com habilidades
Exemplo de Uso
Agente: Crie um artefato HTML autônomo para exibir um cronômetro interativo.
Resultado: Um arquivo index.html com um cronômetro funcional, estilizado e responsivo, sem dependências externas.
Contribuição
Sinta-se à vontade para abrir issues ou pull requests para sugerir melhorias ou reportar problemas.
Licença
MIT