design-html

Convert design mockups into Pretext-native HTML with computed layouts and dynamic text reflow.

3|14|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/cegit27/moodle-proctor --skill design-html-cegit27
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/cegit27/moodle-proctor/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/cegit27/moodle-proctor --skill design-html-cegit27

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design mockups and product plans are static artifacts that cannot be deployed directly because they lack computed layouts, dynamic text reflow, and proper height calculations. This Skill bridges that gap by generating production-quality Pretext-native HTML that behaves correctly with real, varying content.

Core Features & Use Cases

  • Pretext-Native HTML/CSS: Generates lightweight, zero-dependency HTML with computed layouts where text reflows and heights adjust automatically to content.
  • Multiple Input Sources: Works from approved design mockups, CEO product plans, design review context, or plain text descriptions.
  • Dynamic Layout Primitives: Handles cards, chat bubbles, and editorial spreads that size themselves correctly without manual CSS tweaking.
  • Use Case: A teacher dashboard monitoring page needs to display a varying number of exam alerts and student names without breaking the layout when content grows or shrinks.

Quick Start

Use the design-html skill to turn the approved exam monitoring mockup into a working HTML page with reflowable text and dynamic card heights.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I convert a static design mockup into responsive HTML with dynamic text reflow?

To convert a static design mockup into responsive HTML with dynamic text reflow, you need to generate production-quality HTML with computed layouts where heights adjust automatically to content. This ensures cards and chat bubbles size themselves correctly without manual CSS tweaking.

What is the best way to build reflowable card layouts that adjust to varying content lengths?

Building reflowable card layouts that adjust to varying content lengths requires generating dynamic layout primitives in HTML. These primitives handle sizing correctly by computing heights automatically, ensuring the layout never breaks when content grows or shrinks.

Can I generate zero-dependency HTML from a plain text product plan?

Yes, you can generate zero-dependency, lightweight HTML from a plain text product plan. This process converts the text description directly into production-quality HTML that behaves correctly with real, varying content without relying on external libraries.

Does this approach work for creating chat bubbles and editorial spreads that need computed heights?

Yes, this approach works for creating chat bubbles and editorial spreads that need computed heights. It handles these dynamic layout primitives specifically, ensuring they size themselves correctly based on the actual content length without manual CSS adjustments.

Why does my frontend layout break when dynamic content grows or shrinks in size?

Your frontend layout breaks when dynamic content grows or shrinks because it lacks computed layouts and proper height calculations. You need to generate HTML with dynamic text reflow capabilities that adjust automatically to varying content sizes.