Creates a text-only engineering implementation plan as a single self-contained HTML page saved to specs/ .html — the plan authored directly in styled HTML plus a freeform HTML zone where the agent can author any custom HTML/CSS/SVG/JS (inline SVG diagrams, interactive toggles, comparison matrices, decision trees) that aids comprehension. No images are generated; visual richness comes from inline HTML/SVG only. Use when the user says "htmlspec", wants a text-only HTML implementation plan, a browser-openable spec, or a richly-formatted HTML engineering plan without per-section image generation.
EnglishCreates a visual engineering implementation plan as a single self-contained HTML page saved to specs/ .html — the plan authored directly in styled HTML, with one AI-generated diagram image per section (hero + per major H2) generated in parallel and embedded inline, plus a freeform HTML zone for custom HTML/CSS/SVG/JS that aids comprehension. Images are always generated. Use when the user says "htmlvspec", wants a visual/illustrated HTML implementation plan, a browser-openable spec with per-section diagrams, or any HTML plan where images are required.
EnglishCreates a concise engineering implementation plan saved to specs/, then generates one information-rich, thematically-consistent diagram image per section (hero + per-H2) to aid planning of the engineering work. Use when the user says "vspec", asks for a visual/illustrated implementation plan, a spec with diagrams, or wants an engineering plan whose sections are each backed by an architecture/flow/data-model image.
EnglishExplore the listed skills and choose the workflows that fit your task.
Supported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Htmlspec
Creates a text-only engineering implementation plan as a single self-contained HTML page saved to specs/ .html — the plan authored directly in styled HTML plus a freeform HTML zone where the agent can author any custom HTML/CSS/SVG/JS (inline SVG diagrams, interactive toggles, comparison matrices, decision trees) that aids comprehension. No images are generated; visual richness comes from inline HTML/SVG only. Use when the user says "htmlspec", wants a text-only HTML implementation plan, a browser-openable spec, or a richly-formatted HTML engineering plan without per-section image generation.
Htmlvspec
Creates a visual engineering implementation plan as a single self-contained HTML page saved to specs/ .html — the plan authored directly in styled HTML, with one AI-generated diagram image per section (hero + per major H2) generated in parallel and embedded inline, plus a freeform HTML zone for custom HTML/CSS/SVG/JS that aids comprehension. Images are always generated. Use when the user says "htmlvspec", wants a visual/illustrated HTML implementation plan, a browser-openable spec with per-section diagrams, or any HTML plan where images are required.
Vspec
Creates a concise engineering implementation plan saved to specs/, then generates one information-rich, thematically-consistent diagram image per section (hero + per-H2) to aid planning of the engineering work. Use when the user says "vspec", asks for a visual/illustrated implementation plan, a spec with diagrams, or wants an engineering plan whose sections are each backed by an architecture/flow/data-model image.
Quick start
- Choose your skills. Select individual skills above, or choose the entire pack.
- Copy the install prompt. Use Copy install prompt above the list.
- Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.
Try it with your agent
After installation, start with a request like:
Use the Htmlspec skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- A coding agent that can access your project files and install skills.
- Your agent checks each skill’s instructions, dependencies, and permissions during setup.
- Reported license for the skills shown: MIT. The author’s terms apply.