skills.rest
abdulazeezoj
abdulazeezojCOMMUNITY
Explore all skills by this author →
Website𝕏@abdulazeezojGitHub

design-html

Generates production-quality HTML/CSS with computed text layout using the Pretext engine.

Updated Sep 13, 2026
Search Tags:#html#frontend#css#mockup#text layout#pretext#design finalization
One-click install
npx skills add https://github.com/abdulazeezoj/monovella-poc --skill design-html-abdulazeezoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/abdulazeezoj/monovella-poc/tree/main/.agents/skills/gstack/design-html
Command: npx skills add https://github.com/abdulazeezoj/monovella-poc --skill design-html-abdulazeezoj

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning an approved mockup or design plan into real HTML usually means hand-tuned CSS guesses where text overflows, heights break, and layouts collapse on resize. This Skill finalizes designs into HTML where text actually reflows, heights are computed, and layouts stay dynamic. ## Core Features & Use Cases - Pretext-native layout: Uses the bundled Pretext engine (prepare/layout APIs) to compute text heights, shrinkwrap chat bubbles, and flow text around obstacles instead of CSS approximations. - Design finalization workflow: Works from approved /design-shotgun mockups, /plan-ceo-review plans, /plan-design-review context, or a plain user description. - UX doctrine built in: Applies usability principles (visual hierarchy, scanning behavior, mobile touch targets) to every layout decision. - Use Case: After approving a landing page mockup, ask to build the design and receive a self-contained HTML page whose text blocks resize correctly on any viewport with zero dependencies. ## Quick Start Ask the assistant to turn the approved mockup into a real HTML page using the design-html skill.

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 real HTML?▼

Invoke the skill with an approved mockup, plan, or plain description. It generates HTML wired to the Pretext engine so text heights are computed at runtime and layouts reflow on resize instead of relying on fixed CSS guesses.

What is Pretext and why does this skill use it?▼

Pretext is a bundled zero-dependency JavaScript text layout engine. It prepares text measurements once after fonts load, then computes line counts and heights in sub-millisecond calls on every resize, so containers size themselves correctly.

Can it handle chat bubbles or text around images?▼

Yes. The skill includes wiring patterns for shrinkwrap containers that binary-search the tightest width for a given line count, and an obstacle-aware layout that flows editorial text around floated elements line by line.

Does the generated HTML need external dependencies?▼

No. The Pretext engine is vendored into the skill and inlined into the output, adding roughly 30KB with zero external dependencies. The generated page runs standalone in the browser.

When should I not use this skill for a design?▼

Use it at the finalization stage, not for exploring design directions. If you still need mockup variants or plan review, run the upstream planning or design-review skills first, then finalize here.

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
zaeem-rafiqzaeem-rafiq

gstack

Unify planning, design review, and browser-based testing workflows.

Community
Advanced
FoundationForgeFoundationForge

accessibility-review

Identify WCAG 2.1 AA accessibility issues in Figma designs or live pages.

Official
Intermediate
futureteafuturetea

frontend-design

Generate distinctive React frontend interfaces with CSS variables and animations.

Community
Advanced