skilld
All skills
garrytan avatar

/design-html

@01593aa official
by Garry Tangarrytan/gstack135k stars
20,051

Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack)

Requires /design-shotgun /plan-ceo-review /plan-design-review /gstack-upgrade /plan-tune /retro /ship /qa-only /document-generate /context-save /learn /qa /review /design-consultation

Ask your Agent

Use this Skill: https://skilld.dev/gh/garrytan/gstack/design-html

This session only. Nothing lands on disk.

sectionsdetector-install-offer.md

≈917 tokens on demand. Your agent reads this file only when SKILL.md points to it.

<!-- AUTO-GENERATED from detector-install-offer.md.tmpl — do not edit directly --> <!-- Regenerate: bun run gen:skill-docs --> <!-- Derived in part from nothing third-party: gstack's own consent flow for downloading impeccable's engine (Apache-2.0, see NOTICE.md). -->

Design detector: the one-time install offer

Read this only when the Setup probe printed DESIGN_DETECTOR_INSTALL_OFFER. It is the same question /design-review asks; whichever design skill runs first asks it, and the answer is remembered.

Install offer (one question, asked once). If the probe printed DESIGN_DETECTOR_INSTALL_OFFER: version=<v> platform=<p> bytes=<n> dest=<path>, the user has never answered this. Ask now, before any other step, in an interactive session only: with SESSION_KIND: spawned or a headless run, never install and never ask; continue as if the answer were "not now". In Conductor, render the brief as prose and STOP. Use this skill's AskUserQuestion format:

D<N> — Install impeccable's design detector engine?
Project/branch/task: <one line from the current work>
ELI10: impeccable is a separate Apache-2.0 tool (Paul Bakaus). Its engine is one <n>-byte program that checks pages and CSS for 61 mechanical design mistakes. gstack can download that one file (version <v>, from github.com/pbakaus/impeccable releases) into <dest>, check it against a checksum recorded in gstack, and log the download in ~/.gstack/security/egress.jsonl. No impeccable skill, no editor hook; the engine never touches the network when gstack runs it. Without it this skill works as it does today.
Stakes if we pick wrong: yes puts a third-party binary on this machine; no leaves machine-catchable design mistakes to judgment alone.
Recommendation: A because the download is pinned, logged, and reversible (delete <dest>).
Note: options differ in kind, not coverage — no completeness score.
Pros / cons:
A) Install the engine now (recommended)
  ✅ Every design review opens with 61 deterministic checks, tagged by rule id
  ✅ One checksum-verified file under your home directory, logged, removable with rm
  ❌ A third-party binary you did not build runs over your project files in scans
B) Not now
  ✅ Nothing changes on this machine; the question returns next time a design skill runs
  ❌ Design reviews keep relying on judgment alone for mistakes a machine can catch
C) Never ask again
  ✅ Design skills stay silent about impeccable (reversible: gstack-config set design_detector_install_prompted false)
  ❌ An engine you install later is still used, but gstack never reminds you
D) Turn the detector off
  ✅ No probe, scan, or handoff line in any design skill (gstack-config set design_detector off)
  ❌ An engine installed later is ignored until design_detector is back to auto
Net: a pinned, logged 16 MB download for machine-checked findings, versus every design check staying a judgment call.

On A, run the install and read its first line (IMPECCABLE_INSTALLED: <path> then the fresh probe lines, or IMPECCABLE_INSTALL_REFUSED: <reason>, after which this skill continues without scans):

bun --no-env-file run $HOME/.claude/skills/gstack/bin/gstack-design-detect.ts install --host claude

On B, continue without scans. On C, run ~/.claude/skills/gstack/bin/gstack-config set design_detector_install_prompted true. On D, run ~/.claude/skills/gstack/bin/gstack-config set design_detector off. Never pass --sha256 or --base yourself: they exist for maintainers and mirrors. If the user also wants the /impeccable skill and its hook, they run npx impeccable install themselves; gstack never does.

Source: SKILL.md on GitHub

Third-party checks

1 warningtoday4 checks · Risk SAFE
  • Gen Agent Trust Hubtoday

    The skill is a professional design tool for generating high-quality HTML using a specialized layout engine. It performs standard development operations including running local project utilities, serving a preview server on localhost, and managing design artifacts. It includes a transparent, consent-based mechanism for downloading a well-known design utility and utilizes a minified text-layout library consistent with its stated functionality.

  • Sockettoday

    No alerts

  • Snyktoday

    Risk: LOW · No issues

  • ZeroLeaks5mo

    2 findings · Score: 71/100

Provenance

Signed by skilld at 01593aa. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 15 hours ago.

Activeupdated 5 days ago

Capability

What it can do
Runs commands Reads files Edits files
preamble-tier
2
version
1.0.0
triggers
[
  "build the design",
  "code the mockup",
  "make design real"
]
All 8 allowed tools
BashReadWriteEditGlobGrepAgentAskUserQuestion

Topics

README badge

README badge for garrytan/gstack/design-html

What it does

Generates production-quality HTML and CSS for approved designs using Pretext patterns, with dynamic layout reflow and computed heights. Targets design-to-code handoff after mockup review or planning, with zero dependencies and smart pattern selection based on design type.

Generated from the current SKILL.md.

Frequently asked

Does this skill generate Pretext-native HTML or framework-specific code?
It generates Pretext-native HTML/CSS. The skill automatically selects the right Pretext patterns based on your design type, handling text reflow and dynamic layouts without external dependencies.
What design sources can this skill work from?
It accepts approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or a plain text description from the user.
How much overhead does this skill add?
30KB overhead with zero dependencies.
When should I invoke this skill?
Use it after approving a design or finishing a plan, or when you want to turn a mockup into production HTML. Triggers include 'finalize this design', 'turn this into HTML', or 'build me a page'.

Generated from the current SKILL.md. These answers refresh after source changes.