skills.rest
algorithmbasics
algorithmbasicsCOMMUNITY
Explore all skills by this author →
𝕏@AlgorithmLlcGitHub

design-html

Translate approved design mockups into responsive HTML and CSS.

Updated Apr 18, 2026
Search Tags:#html#layout#frontend#css#responsive#design-html#pretext
One-click install
npx skills add https://github.com/algorithmbasics/gstack --skill design-html-algorithmbasics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/algorithmbasics/gstack/tree/main/design-html
Command: npx skills add https://github.com/algorithmbasics/gstack --skill design-html-algorithmbasics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

design-html translates approved design mockups and planning context into production-ready HTML and CSS. It computes heights, ensures dynamic reflow, and outputs code that matches the intended layout for various devices with zero dependencies.

Core Features & Use Cases

  • Production-ready HTML/CSS from approved mockups via /design-shotgun, CEO plans from /plan-ceo-review, or from scratch with a user description.
  • Dynamic layout: computed heights, responsive behavior, and Pretext-driven patterns that adapt to content.
  • Design-to-code pipeline: aligns with planning artifacts (/plan-design-review) to preserve design intent during handoff to engineering.

Quick Start

Provide an approved mockup and run the HTML engine to generate production HTML.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I convert design mockups into production-ready HTML and CSS?▼

To convert design mockups into production-ready HTML and CSS, provide an approved mockup to generate deterministic code. It applies Pretext-driven layout patterns and dynamic height calculations to ensure responsive reflow across devices with zero external dependencies.

Can I generate responsive frontend code from a CEO plan or design review?▼

Yes, you can generate responsive frontend code from a CEO plan or design review. By processing inputs like /plan-ceo-review or /plan-design-review, the tool preserves design intent during the handoff to engineering and outputs matching HTML layouts.

What is the best way to calculate dynamic heights for responsive HTML layouts?▼

The best way to calculate dynamic heights for responsive HTML layouts is using Pretext-driven patterns. This approach computes heights automatically and ensures content adapts dynamically, producing deterministic HTML that adheres to responsive design rules.

Does this HTML generation approach require any external frontend dependencies?▼

No, this HTML generation approach requires zero external frontend dependencies. It outputs self-contained, production-grade HTML and CSS that natively adheres to responsive patterns without relying on external frameworks or libraries.

How do I build a design-to-code pipeline that preserves layout intent?▼

Build a design-to-code pipeline that preserves layout intent by aligning with planning artifacts like /plan-design-review. This ensures the computed HTML and CSS match the approved mockups and surface specific layout rules directly within the generated code.

Related Skills

Explore More Design & Creative Skills→
steadyfallsteadyfall

design-html

Convert approved mockups or planning inputs into production-ready HTML/CSS.

Community
Advanced
SChannarongSChannarong

frontend-design

Generate frontend code with accessibility, theming, and responsive behavior.

Community
Advanced
limzivectorlimzivector

design-html

Convert approved design mockups into HTML/CSS code using Pretext patterns.

Community
Intermediate
aivos-xieaivos-xie
1

pretext

Create dynamic text animations with HTML, CSS, JavaScript, and GSAP.

Community
Intermediate