skills.rest
sanjanb
sanjanbCOMMUNITY
Explore all skills by this author →
GitHub

design-html

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved design mockup or plan into real, working front-end code is slow and error-prone, especially when text must reflow naturally and layouts must compute heights dynamically. This Skill converts design intent into production-quality Pretext-native HTML/CSS so text reflows, heights are computed, and layouts stay 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. - Pretext-native output: Generates HTML/CSS backed by the vendored Pretext text-layout engine (about 30KB overhead, zero dependencies) with smart API routing that picks the right layout patterns per design type. - Use Case: After approving a landing page mockup, invoke the skill to produce a working page where headlines, paragraphs, and CJK or bidirectional text wrap and measure correctly without manual CSS tweaking. ## Quick Start Ask the agent to build the approved design 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 working HTML?▼

Invoke the design-html skill after approving a mockup from /design-shotgun or a plan from /plan-ceo-review. It generates Pretext-native HTML/CSS where text reflows, heights are computed, and layouts remain dynamic.

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

Pretext is a vendored JavaScript text-layout engine that measures text, computes line breaks, and handles CJK and bidirectional scripts. The skill uses it so generated pages have accurate text metrics with about 30KB overhead and zero dependencies.

Can I use design-html without an existing mockup?▼

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

Does the generated HTML support CJK and right-to-left text?▼

Yes. The bundled Pretext engine implements Unicode bidirectional algorithm handling, CJK line-breaking rules, and grapheme-level measurement, so Chinese, Japanese, Korean, Arabic, and Hebrew text lay out correctly.

What are the limitations of generated Pretext layouts?▼

Text measurement requires OffscreenCanvas or a DOM canvas context, so layout computation runs in browser-like environments. The skill focuses on design finalization; complex application logic still needs separate implementation.

Related Skills

Explore More Design & Creative Skills→
Prat05devsPrat05devs
2

design-html

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

Community
Advanced
Walrus-ComputingWalrus-Computing
20

gstack

Coordinate planning, review, browser QA, shipping, and memory in Claude Code.

Official
Advanced
dev-giosdev-gios
1

qa-visual

Capture screenshots and analyze rendered elements for design system compliance.

Community
Advanced
AreteDriverAreteDriver
4

web-frontend-builder

Scaffold React, Next.js, or static HTML projects with TypeScript and Tailwind CSS.

Community
Intermediate