agentleFS
Sign inStart free
podopodo/design-agent-skills/skills/design-html/SKILL.md

design-html

Skill32 starsChanged 6 months agoMITView on GitHub

Finalize a design as production-ready HTML/CSS. Garry Tan's gstack design-html skill generates Pretext-native HTML/CSS (computed text layout, so text reflows and heights adjust on resize) from an approved mockup, a plan, or a freeform brief.

27 other projects use a version of this, 7 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use plan-tune, ios-clean and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • ShreyRaviSkill

    plan-tune

    Self-tuning question sensitivity + developer psychographic for gstack (v1: observational). Review which AskUserQuestion prompts fire across gstack skills, set per-question preferences (never-ask / always-ask / ask-only-for-one-way), inspect the dual-track profile (what you declared vs what your behavior suggests), and enable/disable question tuning. Conversational interface — no CLI syntax required.

    Also in 9 projects that use this

  • Saqlain-811Skill

    ios-clean

    Remove the DebugBridge SPM package and all #if DEBUG wiring from an iOS app. (gstack)

    Also in 5 projects that use this

  • Saqlain-811Skill

    ios-fix

    Autonomous iOS bug fixer. (gstack)

    Also in 5 projects that use this

  • ShreyRaviSkill

    landing-report

    Read-only queue dashboard for workspace-aware ship. Shows which VERSION slots are currently claimed by open PRs, which sibling Conductor workspaces have WIP work likely to ship soon, and what slot /ship would pick next. No mutations — just a snapshot. Use when asked to "landing report", "what's in the queue", "show me open PRs", or "which version do I claim next". (gstack)

    Also in 8 projects that use this

  • timurgaleevSkill

    document-generate

    Generate missing docs for a feature, module or project as tutorials, how-tos, reference and explanation.

    Also in 7 projects that use this

  • bastosSkill

    ios-design-review

    Review iOS app UI/UX design quality using Apple's design principles and the Liquid Glass-era design language from WWDC25/26. Use when asked for a design review, UX critique, visual design assessment, or evaluation of an app's interface quality, design intent, alignment with the new Apple design system, or usability. Triggers: "design review", "UX review", "visual design critique", "review the UI", "does this design work", "evaluate this interface", "design feedback", "Liquid Glass review".

    Also in 5 projects that use this

  • +1 more from Saqlain-811
  • +5 more from ShreyRavi

The file

Create a free account to mount
Files
SKILL.md

design-html

Catalogue stub — part of garrytan/gstack (design-html)

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->

Decision tree

  1. Is the full skill already installed?
    • f=~/.claude/skills/gstack/design-html/SKILL.md; [ -e "$f" ] && ! grep -qs "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → invoke it and proceed
    • pointer → go to step 2

  2. Install (the skills CLI cannot install this one):

    This skill is part of gstack and calls gstack's shared tooling (~/.claude/skills/gstack/bin/…), so install gstack itself rather than the single skill. ./setup needs Bun, builds binaries, downloads Chromium and registers a Stop hook in your Claude settings; ask the user before running it.

    git clone --single-branch --depth=1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack
cd ~/.claude/skills/gstack && ./setup

Heads-up

  • Requires: Bun; Claude Code
  • License: MIT
  • Large download (~185 MB): the skills CLI gives up cloning after 300 s; if it times out, retry with SKILLS_CLONE_TIMEOUT_MS=900000.
<!-- das:install:end -->

Invoke after install

  • Skill name: design-html (upstream's own phrases: "build the design", "code the mockup", "make design real")
  • Trigger phrases: "design html", "design to HTML", "implement design", "mockup to code"
  • It works best after gstack's /design-shotgun has produced an approved mockup; it can also work from a plan or a freeform brief
  • Lighter, degraded alternative (instructions only, without gstack's bin/ helpers): npx skills add garrytan/gstack --full-depth --skill design-html

What it does

Part of Garry Tan's gstack: turns an approved design into finalized, production-quality HTML/CSS. Its engine is Pretext, so text layout is computed rather than approximated and text reflows on resize. It detects its input (an approved mockup from /design-shotgun, a plan, a freeform brief, or an earlier output to evolve), analyses the design, generates the HTML (vanilla or for the detected framework), runs a live-preview refinement loop with verification screenshots, and extracts design tokens at the end. Figma is not a documented input, and the skill relies on gstack's shared tooling and workflow.

When NOT to use

  • A Figma file or spec is the source of truth → use figma-official-skills
  • You are still defining the visual language and design system → use design-consultation
  • You want a design review of a plan or live UI before building → use plan-design-review or design-review-garrytan

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free