← All skill packs

Planning & Specification Workflows

Skill pack
3 skills0 selected
dislerSkills in this pack

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.

English

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.

English

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.

English

Explore the listed skills and choose the workflows that fit your task.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills3CategorygeneralStars0

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

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. 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:

Example request
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.
Planning & Specification Workflows | Agent Skills Atlas