skills.rest
tayiorbeii
tayiorbeiiCOMMUNITY
Explore all skills by this author →
GitHub

gstack-design-html

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

Updated Jun 24, 2026
Search Tags:#html#frontend#code generation#css#mockup#pretext#design finalization
One-click install
npx skills add https://github.com/tayiorbeii/paperclip-factory-kit-hermes --skill gstack-design-html-tayiorbeii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gstack-design-html
Source: https://github.com/tayiorbeii/paperclip-factory-kit-hermes/tree/main/skills/paperclip/gstack-design-html
Command: npx skills add https://github.com/tayiorbeii/paperclip-factory-kit-hermes --skill gstack-design-html-tayiorbeii

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved design mockup or plan into working front-end code usually means hand-translating visuals into HTML and CSS, which loses fidelity and wastes time. This Skill finalizes designs by generating production-quality Pretext-native HTML/CSS where text reflows, heights are computed, and layouts are dynamic. ## Core Features & Use Cases - Design finalization: Converts approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, or design review context from /plan-design-review into working HTML/CSS. - Smart API routing: Picks the right Pretext patterns for each design type, with roughly 30KB overhead and zero dependencies. - From-scratch builds: Works directly from a plain user description when no prior mockup exists. - Use Case: After approving a landing page mockup in a design review, invoke this Skill to produce the final responsive HTML page with computed layout heights and reflowing text. ## Quick Start Ask the assistant to finalize the approved mockup into production HTML and CSS using the gstack-design-html skill.

Frequently Asked Questions about gstack-design-html

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

FAQPage Schema
How do I turn an approved design mockup into HTML?▼

Invoke the skill after approving a mockup from /design-shotgun or a design review. It generates Pretext-native HTML/CSS with dynamic layouts, computed heights, and reflowing text, adding about 30KB of overhead with no dependencies.

What inputs does design finalization with Pretext accept?▼

It accepts approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or a plain user description when starting from scratch.

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

Yes. Provide a plain-language description of the page you want, and the skill generates the HTML/CSS directly. Prior planning artifacts improve fidelity but are not required.

Does the generated HTML require external dependencies?▼

No. The output is Pretext-native with zero dependencies and roughly 30KB overhead. Layouts are dynamic, so text reflows and heights are computed rather than hardcoded.

When should I not use this design-to-HTML workflow?▼

Avoid it when the design is not yet approved or still under review, since it is a finalization step. Use upstream planning and review skills first, then run this once the design direction is settled.

Related Skills

Explore More Design & Creative Skills→
martin-hsu-testmartin-hsu-test
1

design-html

Generate production-ready HTML/CSS from approved design mockups and plans.

Community
Advanced
marjan-ahmedmarjan-ahmed

frontend-qa

Automate frontend accessibility and QA validation for HTML, CSS, and JavaScript.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
mikemai2awesomemikemai2awesome
13

frontend-a11y

Ensure accessible HTML, CSS, and JavaScript with native semantics.

Community
Intermediate