{"slug": "agent-skill-to-create-html-docs-for-planning", "title": "Agent skill to create HTML docs for planning", "summary": "Parth J. Shah released visual-planning-skills, a set of four Claude Code skills that generate interactive HTML documents for planning and explaining AI workflows, replacing text-heavy plans with animated diagrams and decision cards. The skills, including visual-explainer, visual-plan, visual-schema, and challenge-plan, are available via GitHub and can be installed with the command 'claude plugin marketplace add parthjshah95/visual-planning-skills'.", "body_md": "Struggling to understand the giant walls of text your AI throws at you? Frustrated by jargon AI invents that only it can fathom?\n\nNo one understands AI these days.\n\n** Open the interactive explainer →** It plays this deck with controls. It shows the whole flow, a live decision card, and install steps for eight agents.\n\nSlide credits: Steve Yegge (the workflow comic); the r/ClaudeAI community: the moderator-bot summary, u/nightbunnies, u/endlesskitty, u/Careless_Leg_4905; the Swole Doge format. The ASD-STE100 subskill draws on danyuchn/asd-ste100-skill.\n\n`visual-plan`\n\ndraws the plan. `asd-ste100`\n\nkeeps the words plain. Decision cards ask questions you can answer.\n\n| Skill | What it does |\n|---|---|\n`visual-explainer` |\n\"Visually explain how the code works.\" Creates an HTML file with animations and diagrams. |\n`visual-plan` |\n\"Visually plan this task.\" Replaces the plan mode with an HTML version of it. Less text, more interactivity. |\n`visual-schema` |\n\"Visualize my database schema.\" Visually see the models, relationships, and fields on a draggable canvas. |\n`challenge-plan` |\n\"Challenge this plan for over-engineering.\" A different model reviews the plan. It may only cut, never add. |\n\nThe skills work together, but none needs the others.\n\n`visual-plan`\n\nreuses the drawing patterns from`visual-explainer`\n\n.`challenge-plan`\n\nis separate.`visual-plan`\n\nnever runs it for you. You run it when a plan needs a check.\n\nAbove: visual-explainer explains one subject, how a deploy pipeline works. A scene player walks the mechanism step by step. Source: pipeline-explainer.html.\n\nAbove: visual-plan plans one small feature, Add CSV export to the Reports page. It shows the change as an animation. It turns the one real decision into a card you answer in the browser. Source: plan.html.\n\nAbove: visual-schema draws a small bookstore database. The tables come from the model source. Click a table to see its relationships. Drag to pan, zoom to fit. Source: bookstore-schema.html.\n\nEvery example is one self-contained HTML file. Open the live link, or download the source and open it in a browser.\n\n| Example | Made with | Open |\n|---|---|---|\n| Deploy-pipeline explainer | `visual-explainer` |\n|\n\n`visual-explainer`\n\n[live](https://parthjshah95.github.io/visual-planning-skills/skills/visual-plan/examples/visual-plan-explainer.html)·[source](/parthjshah95/visual-planning-skills/blob/main/skills/visual-plan/examples/visual-plan-explainer.html)`visual-plan`\n\n[live](https://parthjshah95.github.io/visual-planning-skills/skills/visual-plan/examples/csv-export/plan.html)·[source](/parthjshah95/visual-planning-skills/blob/main/skills/visual-plan/examples/csv-export/plan.html)`visual-schema`\n\n[live](https://parthjshah95.github.io/visual-planning-skills/skills/visual-schema/examples/bookstore-schema.html)·[source](/parthjshah95/visual-planning-skills/blob/main/skills/visual-schema/examples/bookstore-schema.html)\n\n```\nclaude plugin marketplace add parthjshah95/visual-planning-skills\nclaude plugin install visual-planning-skills@visual-planning-skills\n```\n\nThen call a skill by name: `/visual-explainer`\n\n, `/visual-plan`\n\n, `/visual-schema`\n\n, or `/challenge-plan`\n\n. Or describe the task and let the agent choose.\n\nCopy the skill folders to where your agent loads skills. For Claude Code, that is `~/.claude/skills/`\n\n:\n\n```\ngit clone https://github.com/parthjshah95/visual-planning-skills\ncp -R visual-planning-skills/skills/* ~/.claude/skills/\n```\n\nEach `SKILL.md`\n\nis self-contained. The [interactive explainer](https://parthjshah95.github.io/visual-planning-skills/skills/visual-plan/examples/visual-plan-explainer.html) lists the skill folders for Codex/ChatGPT, Cursor, OpenCode, OpenClaw, Hermes, Windsurf, and Antigravity.\n\n## Optional: set what a finished plan must contain for your team.\n\nA finished plan means different things to different teams. One team merges straight to trunk. Another team needs a dev environment, a monitoring window, and a sign-off. So `visual-plan`\n\nkeeps that contract in an optional file, not in the skill.\n\n- Pass a file with\n`instructions=<path>`\n\n, or drop a`custom-instructions.md`\n\nfile at your workspace root. - With no file, the skill uses a default: a goal, a picture of the change, the steps, a check that it worked, and the open decisions.\n- A\n`custom-instructions.md`\n\nfile adds three things only: extra required sections, extra required decisions (each one becomes a card), and where the agent records the approved plan.\n\nSave this as `custom-instructions.md`\n\n. It adds a dev test plan, a prod monitoring plan, and four fixed decisions. Change it or delete it as you need.\n\n```\n# Custom instructions: staged dev/prod delivery\n\n## Required sections\n- **Dev test plan**: the environment, the steps, the expected results, and the logs to check.\n- **Prod monitoring plan**: one production-only check, a fixed monitoring window, the failure\n  threshold, the rollback choice, and who to notify.\n\n## Required decisions\n- Pause for a human PR review before the dev merge? (default: no, for low-risk changes)\n- Confirm the dev test steps and expected results.\n- Confirm the prod validation steps and the rollback choice.\n- Is extended monitoring needed? If yes, give the window and thresholds.\n\n## Record the approved plan in\n- The tracker ticket. Move the ticket to \"ready to start\" on approval.\n```\n\nMIT. See [LICENSE](/parthjshah95/visual-planning-skills/blob/main/LICENSE).", "url": "https://wpnews.pro/news/agent-skill-to-create-html-docs-for-planning", "canonical_source": "https://github.com/parthjshah95/visual-planning-skills", "published_at": "2026-08-25 23:31:19+00:00", "updated_at": "2026-08-25 23:44:19.740823+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "generative-ai"], "entities": ["Parth J. Shah", "Claude Code", "visual-planning-skills", "visual-explainer", "visual-plan", "visual-schema", "challenge-plan", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/agent-skill-to-create-html-docs-for-planning", "markdown": "https://wpnews.pro/news/agent-skill-to-create-html-docs-for-planning.md", "text": "https://wpnews.pro/news/agent-skill-to-create-html-docs-for-planning.txt", "jsonld": "https://wpnews.pro/news/agent-skill-to-create-html-docs-for-planning.jsonld"}}