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

okestro-planning-html

Renders planning spec markdown into static and interactive standalone HTML prototypes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning a finished planning spec markdown into a presentable HTML screen is repetitive and error-prone: designers must keep design tokens consistent, map each spec section to a page area, and produce both a Figma-ready static version and a clickable demo. This Skill automates that conversion with a shared template so outputs stay consistent. ## Core Features & Use Cases - Dual output in one run: Generates a static HTML file (input for the Figma conversion step) and an interactive standalone prototype with inline vanilla JS (tabs, steppers, toggles, dynamic lists, validation, live summary) for human review and demos. - Template-driven rendering: Clones the shared template (tokens.css, base.css, template.html) so colors, fonts, and shadows come only from design tokens, with hifi/wire themes and a fixed 1440px canvas. - 1:1 section mapping with integrity checks: Maps each spec section ### N to an .area block (.area-no N) and verifies the counts match across markdown, static, and interactive outputs. - Use Case: After writing a v6 spec md for an alarm settings screen, run this Skill to get html/v6/<screen>.html for Figma conversion plus <screen> (인터랙티브).html for stakeholder review. ## Quick Start Render the spec markdown at md/v6/alarm-settings.md into the shared-template HTML, producing both the static and interactive versions in html/v6.

Frequently Asked Questions about okestro-planning-html

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

FAQPage Schema
How do I convert a planning 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 `### N` section to an `.area` block, and saves a standalone HTML file with tokens.css and base.css inlined into a single `<style>` tag.

How do I create an interactive HTML prototype from a spec document?▼

The Skill generates a sibling `<screen> (인터랙티브).html` alongside the static version, attaching inline vanilla JS for tabs, steppers, toggles, dynamic lists, validation, and live summaries. It uses a single state object with event delegation and requires no external runtime.

Can the interactive prototype be used for Figma conversion?▼

No. Only the static HTML file is passed to the Figma conversion step, because the interactive version's JavaScript cannot be converted and adds noise. Both files live in the same html/vN folder as siblings.

Does the HTML output require external CSS or JS files?▼

No. Both outputs are single standalone files: tokens.css and base.css are inlined into a `<style>` tag, and interaction logic is inlined in a `<script>` tag. External CSS is only used when explicitly requested.

What happens when the markdown section count does not match the HTML areas?▼

The Skill stops and flags the mismatch. It verifies that the number of `### N` sections in the markdown equals the `.area-no` count in both the static and interactive HTML files, treating any gap as a missing-content signal.

Related Skills

Explore More Product & Management Skills→
javierteliozjaviertelioz

create-specification

Generate Markdown specification documents with YAML frontmatter in the spec/ directory.

Community
Intermediate
double-coding-labdouble-coding-lab
4

pp-doctor

Inspects Figma design files for naming, layout, structure, and asset issues before code generation.

Official
Advanced
Atlas-Memory-FrameworkAtlas-Memory-Framework
1

plan-to-html

Convert markdown planning artifacts into standalone HTML review views.

Official
Intermediate
BangjjackBangjjack

figma-to-component

Convert Figma frames into React and TypeScript components using CVA and Radix patterns.

Official
Intermediate