Agent skill to create HTML docs for planning

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'.

Struggling to understand the giant walls of text your AI throws at you? Frustrated by jargon AI invents that only it can fathom? No one understands AI these days. 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. Slide 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. visual-plan draws the plan. asd-ste100 keeps the words plain. Decision cards ask questions you can answer. | Skill | What it does | |---|---| visual-explainer | "Visually explain how the code works." Creates an HTML file with animations and diagrams. | visual-plan | "Visually plan this task." Replaces the plan mode with an HTML version of it. Less text, more interactivity. | visual-schema | "Visualize my database schema." Visually see the models, relationships, and fields on a draggable canvas. | challenge-plan | "Challenge this plan for over-engineering." A different model reviews the plan. It may only cut, never add. | The skills work together, but none needs the others. visual-plan reuses the drawing patterns from visual-explainer . challenge-plan is separate. visual-plan never runs it for you. You run it when a plan needs a check. Above: visual-explainer explains one subject, how a deploy pipeline works. A scene player walks the mechanism step by step. Source: pipeline-explainer.html. Above: 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. Above: 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. Every example is one self-contained HTML file. Open the live link, or download the source and open it in a browser. | Example | Made with | Open | |---|---|---| | Deploy-pipeline explainer | visual-explainer | | visual-explainer 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 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 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 claude plugin marketplace add parthjshah95/visual-planning-skills claude plugin install visual-planning-skills@visual-planning-skills Then call a skill by name: /visual-explainer , /visual-plan , /visual-schema , or /challenge-plan . Or describe the task and let the agent choose. Copy the skill folders to where your agent loads skills. For Claude Code, that is ~/.claude/skills/ : git clone https://github.com/parthjshah95/visual-planning-skills cp -R visual-planning-skills/skills/ ~/.claude/skills/ Each SKILL.md is 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. Optional: set what a finished plan must contain for your team. A 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 keeps that contract in an optional file, not in the skill. - Pass a file with instructions=<path , or drop a custom-instructions.md file 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. - A custom-instructions.md file adds three things only: extra required sections, extra required decisions each one becomes a card , and where the agent records the approved plan. Save this as custom-instructions.md . It adds a dev test plan, a prod monitoring plan, and four fixed decisions. Change it or delete it as you need. Custom instructions: staged dev/prod delivery Required sections - Dev test plan : the environment, the steps, the expected results, and the logs to check. - Prod monitoring plan : one production-only check, a fixed monitoring window, the failure threshold, the rollback choice, and who to notify. Required decisions - Pause for a human PR review before the dev merge? default: no, for low-risk changes - Confirm the dev test steps and expected results. - Confirm the prod validation steps and the rollback choice. - Is extended monitoring needed? If yes, give the window and thresholds. Record the approved plan in - The tracker ticket. Move the ticket to "ready to start" on approval. MIT. See LICENSE /parthjshah95/visual-planning-skills/blob/main/LICENSE .