skills.rest
raghavbadhwar
raghavbadhwarCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Generates production-quality HTML and CSS from approved design mockups using Pretext text layout.

Updated Aug 9, 2026
Search Tags:#html#front-end#css#text layout#pretext#design finalization#mockup to code
One-click install
npx skills add https://github.com/raghavbadhwar/rstack --skill design-html-raghavbadhwar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/raghavbadhwar/rstack/tree/main/design-html
Command: npx skills add https://github.com/raghavbadhwar/rstack --skill design-html-raghavbadhwar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved design mockup or plan into real, working front-end code usually means hand-writing HTML/CSS and guessing at text wrapping and layout behavior. This Skill converts design intent into production-quality Pretext-native HTML/CSS where text reflows, heights are computed, and layouts are dynamic. ## Core Features & Use Cases - Design finalization: Works from approved /design-shotgun mockups, /plan-ceo-review plans, /plan-design-review context, or a plain user description to produce real HTML/CSS. - Dynamic text layout: Uses the vendored Pretext engine (about 30KB, zero dependencies) so text actually reflows and container heights are computed rather than hardcoded. - Smart API routing: Picks the right Pretext patterns for each design type, from landing pages to dense content layouts. - Use Case: After approving a mockup in a design review, say "build the design" and receive a working HTML page whose typography and spacing behave like the real product. ## Quick Start Ask the agent to build the design or turn the approved mockup into HTML, and it will generate the Pretext-native page for you.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I turn a design mockup into HTML and CSS?▼

Invoke the skill with a phrase like "build the design" or "code the mockup" after approving a mockup. It generates Pretext-native HTML/CSS where text reflows naturally and layout heights are computed instead of hardcoded.

What is Pretext and why is it used for HTML generation?▼

Pretext is a vendored text-layout engine included with the skill at about 30KB with zero dependencies. It measures and segments text so generated pages have real line breaking, computed heights, and dynamic layouts rather than static approximations.

Can I use this without an existing mockup or plan?▼

Yes. The skill works from approved /design-shotgun mockups, CEO or design review plans, or from scratch with a plain user description of the page you want built.

Does the generated HTML require external dependencies?▼

No. The Pretext runtime is vendored directly into the skill directory, so the generated layouts work with zero external package dependencies and minimal overhead.

When should I not use design-html?▼

Avoid it when you only need early-stage design exploration or wireframes; use design brainstorming or review skills first. This skill is the finalization step once a design direction is approved.

Related Skills

Explore More Design & Creative Skills→
limzivectorlimzivector

design-html

Convert approved design mockups into HTML/CSS code using Pretext patterns.

Community
Intermediate
dineshrevunurudineshrevunuru
1

verify-ui-quality

Runs mechanical pre-ship verification of self-built UI across intent, click-paths, browsers, and performance.

Community
Advanced
remiconnessonremiconnesson

tailwind-ui-refactor

Refactor Tailwind CSS interfaces to improve hierarchy, spacing, typography, and polish.

Community
Intermediate
LedgerHQLedgerHQ
23

disabled-context

Propagates disabled state from parent components to sub-components via a shared React context.

Official
Basic