skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

html-plans

Author and publish plans as self-contained themed HTML documents with inline SVG diagrams.

Updated Mar 27, 2026
Search Tags:#planning#documentation#html#publishing#mermaid#design docs#postplan
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill html-plans-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-plans
Source: https://github.com/gmackie/agent-skills/tree/main/skills/html-plans
Command: npx skills add https://github.com/gmackie/agent-skills --skill html-plans-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, postplan, and includes references (resource) components.

What problem does it solve? Plans written as markdown files are hard to share, lack visual structure, and render inconsistently. This Skill produces rich, self-contained HTML plan documents with diagrams and publishes them to a stable public URL via postplan. ## Core Features & Use Cases - HTML Plan Authoring: Creates implementation plans, migration plans, design docs, and PRD-style plans as single themed HTML files with hero headers, stat tiles, timelines, and task tables. - Mermaid to Inline SVG: Renders mermaid diagrams at authoring time with mermaid-cli and inlines the SVG, since published plans block JavaScript execution. - Publishing & Versioning: Uploads plans with npx postplan upload, keeping a stable URL across re-uploads with version history. - Use Case: Draft a database migration plan styled like a terminal, render its architecture diagram to SVG, upload it, and share the public URL with your team for review. ## Quick Start Write an implementation plan for the current feature as a themed HTML file and publish it with postplan, then give me the URL.

Frequently Asked Questions about html-plans

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I publish a plan as an HTML document?▼

Author the plan as a single self-contained HTML file, then run npx postplan upload with the file path and a description. The first upload creates a draft, and re-uploading the same path publishes a new version at the same URL.

How to include mermaid diagrams in a published HTML plan?▼

Render each mermaid diagram to SVG at authoring time using npx -p @mermaid-js/mermaid-cli mmdc, then inline the full SVG into the HTML. Published plans block JavaScript, so mermaid cannot render in the browser.

Can HTML plans use JavaScript or external stylesheets?▼

No. Postplan serves plans with script-src 'none', so scripts never execute, and uploads are rejected if they contain external scripts, event handlers, forms, iframes, or external stylesheets and fonts. Use inline CSS and details/summary elements only.

Why was my plan upload rejected by postplan?▼

Uploads are rejected when the HTML contains external script sources, module scripts, inline event handlers like onclick, javascript: URLs, forms, iframes, embeds, objects, or meta-refresh tags. Remove these and keep everything self-contained in one file.

Are published plans private or public?▼

Uploads are public by default. Never include secrets, credentials, API keys, internal hostnames, or customer data; for sensitive plans, keep the HTML file local and share the file path instead.

Related Skills

Explore More Product & Management Skills→
Brave-LabsBrave-Labs

Dev10x-scope

Scope software engineering problems through a phase-driven workflow.

Official
Intermediate
kehwarkehwar

execute-plan-phase

Execute a plan phase and update the plan and PRD with outcomes.

Community
Intermediate
cyariecyarie

performing-codebase-research

Verify codebase structure and entry points with file:line references.

Community
Advanced
JimLiuJimLiu
24.8k

baoyu-markdown-to-html

Convert Markdown to WeChat-ready HTML with inline CSS and code highlighting.

Community
Advanced