Description
Ask Claude Code or Codex to explain an architecture or sketch a UI and you get a wall of text or a flashy page you can’t interact with. Effective HTML is a set of agent skills for producing useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes, plans and diagrams.
It separates creative freedom from reliability: visual direction follows the project and audience instead of a house style, wireframes stay rough so reviewers focus on structure, and prototypes implement one credible flow with its states. Every artifact is responsive, accessible, single-file and verified in a browser.
html:Broad requests such as reports, explainers, presentations, landing pages and tools, routed to specialists.
design-artifact:Subject-specific creative direction without a fixed style.
html-wireframe:Low-fidelity layouts testing hierarchy, navigation, flows and responsiveness.
html-prototype:Working prototypes with real states, interaction and keyboard support.
html-plan:Roadmaps and rollouts that preserve source commitments.
html-diagram:Interactive architecture, sequence, process, state and timeline diagrams.
One-line install:npx skills add plannotator/effective-html, or as a Claude Code or Codex plugin, or read it as a reference.
It separates creative freedom from reliability: visual direction follows the project and audience instead of a house style, wireframes stay rough so reviewers focus on structure, and prototypes implement one credible flow with its states. Every artifact is responsive, accessible, single-file and verified in a browser.
Features
html:Broad requests such as reports, explainers, presentations, landing pages and tools, routed to specialists.
design-artifact:Subject-specific creative direction without a fixed style.
html-wireframe:Low-fidelity layouts testing hierarchy, navigation, flows and responsiveness.
html-prototype:Working prototypes with real states, interaction and keyboard support.
html-plan:Roadmaps and rollouts that preserve source commitments.
html-diagram:Interactive architecture, sequence, process, state and timeline diagrams.
One-line install:npx skills add plannotator/effective-html, or as a Claude Code or Codex plugin, or read it as a reference.
