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?

You are not alone.

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

The fix

visual-plan draws the plan. asd-ste100 keeps the words plain. Decision cards ask questions you can answer.

The skills

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.

visual-explainer example

▶  View it live on GitHub Pages

_{Above: visual-explainer explains one subject, how a deploy pipeline works. A scene player walks the mechanism step by step. Source: pipeline-explainer.html.}

visual-plan example

▶  View it live on GitHub Pages

_{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.}

visual-schema example

▶  View it live on GitHub Pages

_{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.}

Examples

Every example is one self-contained HTML file. Open the live link, or download the source and open it in a browser.

Install

Clone the repo once. Then copy the skill folders to where your agent loads skills.

git clone https://github.com/parthjshah95/visual-planning-skills
cd visual-planning-skills

Each SKILL.md is self-contained.

Custom instructions

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

License

MIT. See LICENSE.