skills.rest
dadafinger
dadafingerCOMMUNITY
Explore all skills by this author →
GitHub

planning-html

Convert product spec markdown into static and interactive HTML mockups using a shared design template.

Updated May 10, 2026
Search Tags:#markdown#html#design tokens#prototype#product planning#interactive mockup#spec rendering
One-click install
npx skills add https://github.com/dadafinger/dadafinger-skills --skill planning-html-dadafinger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: planning-html
Source: https://github.com/dadafinger/dadafinger-skills/tree/main/planning-html
Command: npx skills add https://github.com/dadafinger/dadafinger-skills --skill planning-html-dadafinger

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning a finished product planning spec (markdown) into a visual HTML mockup is repetitive and error-prone, especially when the output must follow a shared design system and stay in sync with the spec's numbered sections. This Skill renders a spec md into template-based HTML body-area mockups with guaranteed 1:1 section alignment. ## Core Features & Use Cases - Dual output in one run: Produces both a static HTML file (input for Figma conversion) and an interactive standalone prototype with inline vanilla JS (tabs, segments, toggles, dynamic lists, validation, live summaries) for human review and demos. - Design-token enforcement: Clones the shared template (tokens.css, base.css, template.html) and forbids hardcoded colors, fonts, or shadows, supporting Hi-fi and Wireframe themes via data-theme. - Structural integrity checks: Verifies that the count of spec sections (### N) matches .area-no blocks in both outputs, halting on mismatch. - Use Case: A product planner finishes a spec md for a new alarm settings screen and asks for the HTML; the Skill outputs html/vN/<screen>.html plus <screen> (인터랙티브).html, ready for Figma conversion and stakeholder review. ## Quick Start Render the spec markdown at md/v7/명세서(최신)/alarm-settings.md into both static and interactive HTML mockups using the shared template with the hifi theme.

Frequently Asked Questions about planning-html

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

FAQPage Schema
How do I convert a product spec markdown file to HTML?▼

Provide the spec markdown path, theme (hifi or wire), and output version. The Skill clones the shared template, maps each numbered spec section to an .area block, and outputs a standalone HTML file with inlined CSS at html/vN/<screen>.html.

What is the difference between the static and interactive HTML outputs?▼

The static file has no JavaScript and serves as input for Figma native conversion. The interactive version adds inline vanilla JS for tabs, toggles, segments, dynamic lists, and validation, intended for human review and demos.

Can I use external CSS files instead of inline styles?▼

By default, tokens.css and base.css are inlined into a single standalone HTML file. External CSS files with relative links are only created when the user explicitly requests CSS separation.

How do I switch between Hi-fi and Wireframe design themes?▼

Set the data-theme attribute on the html element to "hifi" or "wire". All styling switches automatically because components use only token variables; product branding changes require editing only the --brand variable.

What happens if the HTML section count does not match the spec markdown?▼

The Skill verifies that the number of ### N sections in the markdown equals the .area-no count in both HTML outputs. On mismatch it stops and flags the discrepancy as a missing-content signal rather than guessing.

Related Skills

Explore More Product & Management Skills→
CybernetKZCybernetKZ

tz

Authors change requirements as OpenSpec change directories with proposals, spec deltas, and task checklists.

Official
Advanced
tobilafinhangittobilafinhangit
2

figma-design-references

Convert Figma design frames to static HTML/CSS files.

Community
Intermediate
furrycolombia-sysfurrycolombia-sys
1

review-branch

Identify and patch discrepancies between the current branch and develop.

Community
Intermediate
partme-aipartme-ai
610

axure

Guide Axure RP prototyping for wireframes, interactions, and dynamic panels.

Official
Basic