skills.rest
BarrettLowe
BarrettLoweCOMMUNITY
Explore all skills by this author →
GitHub

plan-html

Generate custom HTML implementation plans with SVG diagrams from structured PLAN data.

Updated Mar 7, 2016
Search Tags:#html#layout#implementation plan#svg#diagram
One-click install
npx skills add https://github.com/BarrettLowe/dotfiles --skill plan-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-html
Source: https://github.com/BarrettLowe/dotfiles/tree/main/claude/skills/plan-html
Command: npx skills add https://github.com/BarrettLowe/dotfiles --skill plan-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of detailed, hand-crafted dark-theme HTML implementation plans with custom SVG diagrams, saving time and ensuring visual consistency.

Core Features & Use Cases

  • Custom HTML Rendering: Generate custom HTML artifacts with components like numbered milestones, meta tables, and SVG diagrams.
  • Rich Component Vocabulary: Utilize a fixed set of components to build the plan, including milestone timelines, data flow graphs, and risk matrices.
  • Layout Control: Precisely control the layout of each component using inline SVG for diagrams.
  • Use Case: For software development projects, use this Skill to create detailed implementation plans that can be shared with stakeholders.

Quick Start

Generate a plan for a new feature by using the /plan-html command and specifying the feature goal.

Frequently Asked Questions about plan-html

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

FAQPage Schema
How do I generate an HTML implementation plan with SVG diagrams?▼

To generate an HTML implementation plan, you input structured data containing milestones, tasks, and feedback points. The tool processes this data to output custom HTML files with integrated styling and interactive SVG diagrams for dependencies.

What structured data format is needed for HTML layout control?▼

You need structured PLAN data with clearly defined milestones, tasks, and feedback points. This data provides the foundation for rendering custom HTML artifacts with precise layout control over components like meta tables and milestone timelines.

Can I use SVG diagrams to visualize task dependencies in HTML plans?▼

Yes, you can use SVG diagrams to visualize task dependencies within your HTML plans. The tool provides a rich component vocabulary that includes data flow graphs, milestone timelines, and risk matrices rendered as inline SVG.

What is the best way to automate HTML plan creation for software development projects?▼

The best way to automate HTML plan creation is using a command-driven approach with structured data inputs. This generates dark-theme HTML files with custom visual components, ensuring visual consistency for stakeholder sharing.

Do I need dependencies to create custom HTML artifacts with milestone timelines?▼

No external dependencies are required to create custom HTML artifacts with milestone timelines. The tool operates independently to transform your structured PLAN data into self-contained HTML files with integrated styling.

Why use inline SVG for layout control in HTML implementation plans?▼

Using inline SVG for layout control in HTML implementation plans ensures precise visual rendering of diagrams across different browsers. It allows for custom data flow graphs and milestone timelines to be embedded directly within the HTML output.

Related Skills

Explore More Software Engineering Skills→
rpoole-devrpoole-dev

Thesis Tracker

Manage investment theses with structured data points and milestones.

Community
Intermediate
XyHalcyonXyHalcyon

architecture-diagram

Generate dark-themed SVG architecture diagrams and convert them to HTML files.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-ufm-component

Implement custom Umbraco Flavored Markdown components with custom syntax markers.

Official
Intermediate
mchien15mchien15

mermaidjs-v11

Renders Markdown-embedded MIME v11 diagrams to interactive HTML.

Community
Intermediate