skills.rest
Prat05devs
Prat05devsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-html

Generates production-quality Pretext-native HTML and CSS from approved design mockups.

2|Updated Jun 19, 2025
Search Tags:#html#front-end#code generation#css#mockup#pretext#design finalization
One-click install
npx skills add https://github.com/Prat05devs/dapper-city-threads --skill design-html-prat05devs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/Prat05devs/dapper-city-threads/tree/main/.agent/skills/design-html
Command: npx skills add https://github.com/Prat05devs/dapper-city-threads --skill design-html-prat05devs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved design mockup or plan into working front-end code is slow and error-prone when done by hand. This Skill converts design decisions into final HTML/CSS where text reflows naturally, heights are computed, and layouts are dynamic, with only about 30KB of overhead and zero dependencies. ## Core Features & Use Cases - Design finalization: Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or a plain user description. - Smart API routing: Picks the right Pretext patterns for each design type so layouts stay dynamic rather than fixed. - Use Case: After approving a landing page mockup in a planning session, invoke this Skill to produce the final responsive HTML/CSS implementation ready to ship. ## Quick Start Ask the assistant to build the design by turning the approved mockup into production HTML and CSS.

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 this Skill after approving a mockup or plan, and it generates Pretext-native HTML/CSS with dynamic layouts. It accepts input from /design-shotgun, /plan-ceo-review, /plan-design-review, or a plain text description of the page.

What is Pretext-native HTML generation?▼

Pretext-native generation produces HTML/CSS where text actually reflows, heights are computed, and layouts are dynamic rather than fixed. The Skill routes to the right Pretext patterns for each design type automatically.

Can I build a page from scratch without an existing mockup?▼

Yes, the Skill works from scratch with a user description in addition to approved mockups. Describe the page you want and it produces the final HTML/CSS implementation.

Does the generated HTML require external dependencies?▼

No, the output has zero dependencies and roughly 30KB of overhead. It is designed to be lightweight production-ready front-end code.

When should I use design-html versus a planning skill?▼

Use planning skills like /design-shotgun or /plan-design-review first to explore and approve a design. Use design-html afterward to finalize that approved design into actual HTML/CSS code.

Related Skills

Explore More Design & Creative Skills→
zhifengzhang-szzhifengzhang-sz

plan-design-review

Analyze plan-level design reviews to identify UX and feasibility gaps.

Community
Advanced
1IssaMohamed1IssaMohamed

polish

Audit and fix visual alignment, spacing, typography, and interaction issues in web interfaces.

Community
Advanced
darenhartdarenhart

validate-html5

Validate HTML5 markup, Canvas API usage, and cross-browser compatibility.

Community
Intermediate
allanninalallanninal
1

web-artifacts-builder

Create multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui.

Community
Advanced