Plan-it turns complex coding work into a persistent, interactive plan.html artifact that both humans and AI agents can navigate, update, and verify.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install plan-it
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install plan-it using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is plan-it?
Plan-it is an HTML-first persistent planning skill for Openclaw Skills workflows and multi-step development tasks. Instead of producing a static markdown wall, it creates one self-contained plan.html file with interactive phases, draggable tickets, sliders, mockups, notes, and embedded JSON state. The file remains the canonical planning surface for both the developer and the coding agent.
The skill is designed to survive context clearing through session catchup and lifecycle hooks that restore the active phase, progress, and errors. It supports ten planning templates, browser-based interaction, Markdown and JSON export, optional SHA-256 attestation, approval workflows, completion evidence, and parallel plans. Its offline, single-file architecture requires no build step, CDN, or external service, making it a practical addition to Openclaw Skills collections focused on reliable agent execution.
plan-it Use Cases
- Start any complex implementation task that needs a navigable plan instead of linear Markdown.
- Break a feature, refactor, migration, or investigation into explicit phases, milestones, and actionable tickets.
- Track progress across context compaction, /clear, multiple sessions, or chained AI-agent workflows.
- Present implementation approaches, blast radius, confidence, cost estimates, and approval decisions to a human reviewer.
- Maintain ticket triage, incident timelines, annotated pull requests, module maps, or weekly project status.
- Capture findings after browser, view, or search operations using the two-action rule.
- Require completion evidence and re-runnable probes before a phase can be marked complete.
- Export an interactive plan to task_plan.md or plan.json for downstream tools and Openclaw Skills integrations.
- Run multiple independent plans by setting PLAN_ID and storing artifacts under .planning/
/plan.html.
How plan-it Works
- Restore context first by checking whether plan.html exists, reading its embedded JSON, and running session catchup to identify unsynced edits.
- Choose a template and initialize a single plan.html using /plan or scripts/init-plan.sh. Available templates include implementation-plan, three-approaches, ticket-triage, feature-flag-editor, module-map, annotated-pr, living-design-system, animation-sandbox, weekly-status, and incident-timeline.
- Render the artifact with /plan-render or scripts/render-plan.sh so it opens in the default browser.
- Interact with the plan by dragging cards, moving sliders, adding notes, reviewing mockups, and changing phase state. Interactive templates can persist browser edits through the Save button.
- Treat the plan-data JSON block as the source of truth. Update progress_log, findings, decisions, errors, phases, evidence, and timestamps without hand-editing the surrounding render layer.
- Lifecycle hooks inject a compact summary on prompt submission, surface the active phase before tools run, remind the agent to synchronize progress after writes, and check completion when the agent stops.
- When context compaction is imminent, the PreCompact hook prompts the agent to persist current progress and runs an attestation check so the artifact can be re-read later.
- Optionally enable approval and evidence gates. Human decisions are written into the JSON, while complete phases can require command output and re-runnable probes.
- Run /plan-attest at review checkpoints to create a SHA-256 content seal. The browser reports whether the plan is verified against the seal, edited since sealing, or not sealed.
- Export the canonical artifact with /plan-export markdown or /plan-export json when another tool or agent needs a lower-cost derived representation.
plan-it Setup
Install the plan-it skill through the host agent's skill or plugin mechanism, then ensure Python 3 or Python is available for the helper scripts. The skill directory contains templates, scripts, and reference documentation; the project directory receives the canonical plan.html file.
Initialize a plan from the skill directory:
bash scripts/init-plan.sh implementation-plan
Render the plan in a browser:
bash scripts/render-plan.sh
For an existing project, restore session context before continuing:
$(command -v python3 || command -v python) ${CLAUDE_PLUGIN_ROOT}/scripts/session-catchup.py "$(pwd)"
Useful commands include:
/plan
/plan-render
/plan-status
/plan-attest
/plan-export markdown
/plan-export json
/plan-goal
/plan-loop
For multiple concurrent plans, set a plan slug before using the skill:
export PLAN_ID=feature-auth
To enable strict completion evidence, set gate.enforce_evidence to true in the embedded plan-data JSON. To require phase approval, set gate.require_approval to true. Use /plan-attest --clear before reinitializing a plan whose integrity state needs to be removed. Browser Save uses the File System Access API in Chromium; Firefox and Safari fall back to downloading a replacement file that must be moved into the project root.
plan-it Data Schema & Taxonomy
The project-level plan.html is the single source of truth. It contains inline CSS, a vanilla JavaScript renderer, and a canonical JSON block:
<script type="application/json" id="plan-data">{...}</script>
Core metadata and state:
| Field | Purpose |
|---|---|
| schema_version | Identifies the plan-data format, currently v0.2.0. |
| plan_title, goal | Define the plan identity and desired outcome. |
| current_phase | Points to the active phase. |
| template | Records the selected planning template. |
| ownership | Identifies agent, user, or shared ownership. |
| created_at, updated_at | ISO 8601 lifecycle timestamps. |
| gate | Stores enforce_evidence and require_approval settings. |
| phases | Holds status, approvals, items, evidence, and milestones. |
| findings | Captures observations and research results. |
| progress_log | Records completed work and modified files. |
| decisions | Preserves important choices and rationale. |
| errors | Stores failures so they survive /clear and compaction. |
| history | Append-only, hash-chained records for decisions, seals, and completions. |
| integrity | Stores SHA-256 algorithm, value, timestamp, scope, and section hashes. |
| attestation_sha256 | Stores the optional whole-file attestation used by hook injection. |
Each phase can include an id, title, status (pending, in_progress, complete, or blocked), approval state, proposed approach, blast radius, confidence, cost estimate, checklist items, evidence packs, and milestones. Evidence requires a command, verbatim output, exit code, re-runnable probe, and checked_at timestamp. History entries include ts, kind, phase, summary, prev_hash, and hash.
File organization and limits:
- Skill directory: templates, helper scripts, and reference files.
- Project directory: plan.html, which remains canonical.
- Optional exports: task_plan.md and plan.json.
- Parallel plans: .planning/
/plan.html. - Single-file budget: up to 35KB of HTML and 50KB of embedded JSON.
- No external stylesheet, script source, CDN, remote URL, eval, or Function().
- The file uses semantic landmarks, ARIA labels, keyboard navigation, WCAG AA contrast, dark/light color-scheme support, and inline rendering code.
plan-it Advanced Features
- Lifecycle hooks for UserPromptSubmit, PreToolUse, PostToolUse, Stop, and PreCompact events.
- Session catchup that detects unsynced edits and helps reconcile git changes with embedded plan state.
- Active-phase summary injection so large plans do not consume the entire context window.
- SHA-256 attestation with offline browser recomputation and section-level divergence reporting.
- Tamper-evident hook injection using expected and actual whole-file hashes; injection is blocked when the file is modified after sealing.
- Optional evidence gates that require present, re-runnable proof without automatically executing probes or creating an RCE risk.
- Two-way approval cards with human approval, rejection, requested changes, timestamps, downstream phase locking, confidence, and estimated cost.
- Append-only, hash-chained history for seals, decisions, approvals, rejections, and completions.
- In-browser Save support for six interactive templates, including Chromium File System Access API handling and cross-browser download fallback.
- Ten built-in templates covering implementation planning, approaches, triage, feature flags, module mapping, pull requests, design systems, animation, status reporting, and incidents.
- Composition with Claude Code /goal and /loop for termination conditions and recurring plan rereads.
- Bidirectional-style workflow with Markdown export for planning-with-files and downstream chained-agent tooling.
- Offline-first, dependency-free rendering with vanilla JavaScript, inline styles, system fonts, responsive color schemes, and strict single-file constraints.
- Honest integrity boundary: seals are tamper-evident rather than tamper-proof, and re-sealing is deliberately recorded in history.
SKILL.md
Loading
Related Openclaw Skills
Voice Setup
Voice Setup turns a writer's samples, interview answers, or both into an editable and enforceable writing voice profile.
SocialDataX TikTok Data Assistant
A read-only TikTok research skill for discovering posts, analyzing comments, and exploring creator profiles with SocialDataX.
Azure Toolkit Pro
Azure Toolkit Pro automates enterprise Azure infrastructure management, multi-region deployment, compliance auditing, security scanning, monitoring, and cost optimization.
Diagram Tools Pro
Diagram Tools Pro uses natural-language AI Agent commands to create, render, export, version, and manage enterprise diagrams at scale.
Rabbit Reads
Rabbit Reads transforms long books, papers, theses, and other documents into a verified folder of concise, concept-focused cheatsheets with an index.
大藏经学术引用生成器
A CBETA-powered research assistant that locates Buddhist scripture passages and turns them into publication-ready academic citations.
Featured*
