skills.rest
pelchers
pelchersCOMMUNITY
Explore all skills by this author →
GitHub

frontend-planning-html

Generate self-contained HTML/CSS/JS prototypes from a planning brief and sitemap.json.

Updated Mar 1, 2026
Search Tags:#prototype#design exploration#frontend planning#html css javascript#sitemap-driven#style variants
One-click install
npx skills add https://github.com/pelchers/SessionSaver --skill frontend-planning-html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-planning-html
Source: https://github.com/pelchers/SessionSaver/tree/main/.codex/skills/frontend-planning-html
Command: npx skills add https://github.com/pelchers/SessionSaver --skill frontend-planning-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Planning and prototyping frontend ideas using plain HTML, CSS, and JavaScript to explore concepts without heavy frameworks, enabling fast stakeholder feedback and rapid design iteration.

Core Features & Use Cases

  • Produce production-like static prototypes (index.html, style.css, app.js) from a sitemap-driven plan.
  • Support multiple style directions and passes to compare design directions and UX flows.
  • Deliver self-contained, navigable concepts that work offline and require no authentication for review.

Quick Start

Create the planning brief in .docs/planning/frontend/brief.md and run the planning workflow to generate style-specific frontend concepts.

Frequently Asked Questions about frontend-planning-html

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

FAQPage Schema
How do I generate static HTML prototypes from a sitemap for design exploration?▼

You can plan and prototype frontend concepts by generating production-like static HTML, CSS, and JavaScript artifacts directly from a sitemap.json and planning brief, creating navigable pages for early design exploration without heavy frameworks.

Can I create multiple style variants from a single frontend planning brief?▼

Yes, you can generate multiple style directions and passes from a single planning brief, allowing you to compare different design concepts and UX flows for stakeholder evaluation.

Do I need any frameworks or dependencies to generate these plain HTML frontend concepts?▼

No dependencies are required. The workflow generates self-contained static pages using plain HTML, CSS, and JavaScript, producing navigable concepts that work offline and require no authentication for review.

What's the best way to plan frontend concepts without heavy frameworks for stakeholder review?▼

Use a sitemap-driven planning brief to generate self-contained static HTML, CSS, and JavaScript prototypes, enabling fast stakeholder feedback and rapid design iteration without configuring heavy frameworks.

What file format does the sitemap need to be in for generating HTML prototypes?▼

The sitemap must be provided as a sitemap.json file. The workflow derives the self-contained static frontend pages directly from this JSON file combined with the markdown planning brief.

Are the generated frontend HTML prototypes navigable without authentication?▼

Yes, the generated static frontend concepts are entirely self-contained, navigable without authentication, and work offline, making them ideal for immediate stakeholder review and style-direction evaluation.

Related Skills

Explore More Design & Creative Skills→
joshua3403joshua3403

phase-3-mockup

Generate structured HTML/CSS/JS prototypes from user prompts.

Community
Basic
TaylorHustonTaylorHuston
69

ui-design

Generate HTML UI design variants stored in ideas/[project]/docs/ui-designs/.

Community
Basic
yangsi7yangsi7

create-plan

Create detailed implementation plans from feature specs or bug reports.

Community
Intermediate
loadinglucianloadinglucian
1

frontend-design

Transform vague frontend requirements into production-ready HTML/CSS/JS components.

Community
Advanced