O que html-effectiveness faz?
Skill de agente que ensina o Cursor e o Claude Code a gerar HTML em único arquivo para conteúdo espacial, paralelo, comparável ou interativo. 9 categorias, 20 padrões, 12 modelos prontos para uso. Inspirado no 'poder irracional do HTML' de Thariq Shihipar.
Visão Geral
Este skill foi projetado para agentes de IA (Cursor, Claude Code) que precisam gerar rapidamente interfaces HTML ricas e autocontidas para visualização de dados, ferramentas de comparação, mapas, gráficos interativos e muito mais.
Categorias
- Espacial: mapas, diagramas, layouts geográficos
- Paralelo: visualizações lado a lado, comparações de colunas
- Comparável: tabelas interativas, gráficos de barras, scatter plots
- Interativo: formulários, manipuladores de dados, dashboards
-
-
- (as categorias restantes seguem o mesmo padrão)
-
Padrões
O skill fornece 20 padrões de implementação testados, incluindo:
- Grid CSS responsivo
- SVG inline para gráficos
- Canvas para animações
- Web Components para reutilização
- Armazenamento local (localStorage) para persistência
Modelos Prontos
12 modelos de página completa prontos para copiar e colar, cada um com:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modelo de Visualização</title>
<style>
/* CSS embutido */
</style>
</head>
<body>
<!-- Conteúdo HTML -->
<script>
// JavaScript embutido
</script>
</body>
</html>
Uso com Agentes
Para usar este skill, inclua a referência @Azhi-ss/html-effectiveness no prompt do seu agente (Cursor, Claude Code). O agente automaticamente aplicará os padrões e modelos definidos neste skill.
Exemplo de Prompt
@Azhi-ss/html-effectiveness Crie uma página HTML em único arquivo que mostre um gráfico de barras comparando vendas de 2023 vs 2024, com interatividade para filtrar por região.
Inspiração
Baseado no artigo de Thariq Shihipar sobre a eficácia surpreendente do HTML puro para interfaces complexas.