{
  "markdown": "<p align=\"center\">\n  <img src=\"./assets/effective-html-banner.png\" width=\"1280\" alt=\"Effective HTML by Plannotator — HTML wireframes, mockups, prototypes, charts, and diagrams\">\n</p>\n\n# Effective HTML\n\nFocused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.\n\n## Fat artifacts + fat context\n\nModern models can do a lot. Give them plenty of useful references and use\nartifacts to show what you mean. HTML can visualize almost anything, often more\nclearly than a wall of text. Your prompt can simply point to the artifacts,\nrepositories, and folders that carry the context.\n\n> [!NOTE]\n> You can use this repo without installing anything. Treat it as a reference\n> first and an installable skill collection second. See the\n> [Effective HTML guide](https://www.effectivehtml.com/).\n\nhttps://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0\n\n<p align=\"center\">\n  <a href=\"https://github.com/backnotprop/plannotator\">\n    <img src=\"./star-plannotator.svg\" width=\"340\" alt=\"Star Plannotator on GitHub\">\n  </a>\n</p>\n<p align=\"center\">\nRender and annotate local HTML with <a href=\"https://github.com/backnotprop/plannotator\">Plannotator</a>.\n</p>\n\n## Skill references\n\nThe repo includes six optional skills for pragmatic visual artifacts.\n\n| Skill | Use it for |\n| --- | --- |\n| [`html`](skills/html/SKILL.md) | Broad HTML requests, mixed artifacts, reports, explainers, presentations, landing pages, tools, and routing to a specialist |\n| [`design-artifact`](skills/design-artifact/SKILL.md) | Subject-specific creative direction for any HTML artifact without imposing a reusable house style |\n| [`html-wireframe`](skills/html-wireframe/SKILL.md) | Low-fidelity layout directions that test content, hierarchy, navigation, flows, and responsive structure |\n| [`html-prototype`](skills/html-prototype/SKILL.md) | Working prototypes with realistic states, interaction, keyboard support, and responsive behavior |\n| [`html-plan`](skills/html-plan/SKILL.md) | Plans, roadmaps, rollouts, and implementation sequences that preserve source commitments |\n| [`html-diagram`](skills/html-diagram/SKILL.md) | Architecture, sequence, process, state, hierarchy, timeline, and system diagrams |\n\nPractical guide: [HTML Wireframes and Prototypes for Coding Agents](https://docs.plannotator.ai/learn/code-context/html-wireframes-and-prototypes-for-coding-agents).\n\n## Install\n\nInstall the collection when you want these references available to your agent as\nreusable workflows:\n\n```bash\nnpx skills add plannotator/effective-html\n```\n\nList or install individual skills:\n\n```bash\nnpx skills add plannotator/effective-html --list\nnpx skills add plannotator/effective-html --skill design-artifact\nnpx skills add plannotator/effective-html --skill html-wireframe\nnpx skills add plannotator/effective-html --skill html-prototype\n```\n\n### Claude Code plugin\n\n```text\n/plugin marketplace add plannotator/effective-html\n/plugin install plannotator-effective-html@effective-html\n```\n\n### Codex plugin\n\n```bash\ncodex plugin marketplace add plannotator/effective-html\ncodex plugin add plannotator-effective-html@effective-html\n```\n\n## How the skills work\n\nThe skills separate creative freedom from reliability:\n\n- Visual direction comes from the conversation, project, audience, and subject.\n- `design-artifact` provides a reusable design process without prescribing a reusable look.\n- Wireframes stay intentionally unfinished so reviewers focus on structure.\n- Prototypes implement one credible flow and its relevant states.\n- Plans preserve source commitments.\n- Diagrams choose a visual model and rendering method that fit the relationship being explained.\n- Every artifact is responsive, accessible, self-contained, and verified in a browser.\n\nDetailed guidance lives only where it is needed. The broad `html` skill routes the work, `design-artifact` supplies optional creative direction, and specialist skills own fidelity and behavior. Each skill remains independently usable.\n\nThis project was inspired by Thariq Shihipar's [The unreasonable effectiveness of HTML](https://thariqs.github.io/html-effectiveness).\n\n<p align=\"center\">\n  <a href=\"https://github.com/plannotator/tot\">\n    <img src=\"./use-tot.svg\" width=\"300\" alt=\"Share HTML with tot\">\n  </a>\n</p>\n<p align=\"center\">\nCreate a shareable link for an HTML file with <a href=\"https://github.com/plannotator/tot\">tot</a>.\n</p>\n",
  "bytes": 4457,
  "sha": "9079484d25cf99b7d49130471ef93251b3ddac08912360f15f48090128b5658d",
  "repo_slug": "plannotator/effective-html",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_plannotator_effective_html_html_plan_b9502034/readme"
}