Repolode
Enviar
plannotator

plannotator/effective-html

Skills de agentes que orientam agentes de programação na criação de wireframes, protótipos interativos, planos e diagramas em HTML autocontidos.

Ver no GitHubSite
Estrelas
3,685
Forks
249
Issues abertas
2
Último commit
há 4 dias

O que é?

Effective HTML é uma coleção de skills opcionais para agentes que produzem artefatos em HTML em vez de textos longos. O projeto abrange wireframes de baixa fidelidade para testar layout, hierarquia e navegação; protótipos funcionais com estados realistas, suporte ao teclado e comportamento responsivo; planos e roadmaps que preservam os compromissos da fonte; e diagramas de arquitetura, sequência, estado e cronograma.

As skills são divididas por finalidade. Uma skill ampla de html encaminha as solicitações para skills especializadas, enquanto design-artifact oferece orientação criativa específica para cada tema sem impor um estilo visual fixo. Cada skill pode ser usada por conta própria. A instalação é feita com npx skills add, e há entradas de plugin para Claude Code e Codex.

Todos os artefatos produzidos pelas skills devem ser autocontidos, responsivos, acessíveis e verificados em um navegador. O projeto usa a licença MIT e funciona em conjunto com a ferramenta Plannotator para renderizar e anotar HTML local.

Recursos principais

  • 01Oferece uma skill ampla de html que encaminha as solicitações para skills especializadas.
  • 02Gera wireframes de baixa fidelidade para testar a hierarquia do conteúdo e a navegação.
  • 03Cria protótipos funcionais com interação, suporte ao teclado e comportamento responsivo.
  • 04Cria planos e roadmaps que preservam os compromissos da fonte.
  • 05Produz diagramas de arquitetura, sequência, estado e cronograma em HTML.

Casos de uso

  • Explorar opções de layout com revisores antes de implementar uma UI.
  • Transformar uma solicitação de funcionalidade em um protótipo clicável para receber feedback de stakeholders.
  • Documentar a arquitetura de um sistema ou o fluxo de uma solicitação em um diagrama HTML fácil de compartilhar.
  • Escrever um plano de implantação da implementação que os agentes possam seguir.

Tópicos

#agent-skills#html#prototyping#wireframe#diagrams#claude-code#codex#html-artifacts#html-prototype#html-wireframe

Perguntas frequentes

O que é effective-html?
Skills de agentes que orientam agentes de programação na criação de wireframes, protótipos interativos, planos e diagramas em HTML autocontidos. Effective HTML é uma coleção de skills opcionais para agentes que produzem artefatos em HTML em vez de textos longos. O projeto abrange wireframes de baixa fidelidade para testar layout, hierarquia e navegação; protótipos funcionais com estados realistas, suporte ao teclado e comportamento responsivo; planos e roadmaps que preservam os compromissos da fonte; e diagramas de arquitetura, sequência, estado e cronograma.
effective-html é gratuito? Qual é a licença?
effective-html é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
effective-html ainda é mantido?
Manutenção ativa. O último commit de effective-html foi em 15 de out. de 2026.
Para que posso usar effective-html?
Explorar opções de layout com revisores antes de implementar uma UI. Transformar uma solicitação de funcionalidade em um protótipo clicável para receber feedback de stakeholders. Documentar a arquitetura de um sistema ou o fluxo de uma solicitação em um diagrama HTML fácil de compartilhar. Escrever um plano de implantação da implementação que os agentes possam seguir.
Onde consigo effective-html?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/plannotator/effective-html

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados