design-html

An agent skill by garrytan, from garrytan/gstack. Tags: design, html, ui-ux, web.

What it does

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

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add garrytan/gstack --skill design-html

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/garrytan/gstack
cp -r gstack/design-html ~/.claude/skills/design-html

Safety box score

Grade D, elevated risk: 51 of 100 risk points, rated 2026-10-16. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill generates Pretext-based HTML/CSS previews and writes design artifacts to the project’s gstack state. The main risks are local code execution, home-directory writes, optional third-party downloads, and a bundled minified runtime that is harder to audit.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	3 (high)	It routinely runs shell commands and native scripts such as `gstack-skill-start`, `gstack-design-detect.ts`, `gstack-render.ts`, package-manager installs, and `python3 -m http.server`, so the user is granting broad local code execution.
Network access	2 (moderate)	It can download a third-party detector engine from GitHub releases and, if the vendored bundle is missing, emits a CDN import from `https://esm.sh/@chenglou/pretext`, so the workflow may reach remote hosts.
Filesystem reach	2 (moderate)	It writes design outputs under `$GSTACK_STATE_ROOT/projects/$SLUG/designs/...` and also reads/writes under home paths like `~/.claude/skills/gstack/...` and `~/.gstack/`, which extends beyond the repo checkout.
Secrets & credentials	0 (none)	There is no direct capability to read credential stores, browser sessions, key files, or `.env` files; the only secret-adjacent text is a generic example about a session cookie in the docs.
Privilege & persistence	1 (low)	It does not ask for sudo or install services, and it avoids shell startup edits; the only privileged-adjacent behavior is changing gstack config/state under the user’s home directory.
Instruction hijack surface	2 (moderate)	The skill tells the agent to treat the skill file as executable instructions, honor instruction blocks from tool output, and auto-choose recommended options in spawned/unattended sessions, which reduces normal confirmation boundaries.
Irreversible actions	1 (low)	Its normal job is local artifact generation and previewing, not posting, paying, deploying, or deleting; the output stays mostly within the project and gstack state.
Transparency	2 (moderate)	It ships `vendor/pretext.js`, a heavily minified/packed bundle with very long lines, so part of the runtime is hard to audit from source alone.

Before installing

Read `sections/detector-install-offer.md` before allowing the detector download path.
Check whether you are okay with network access to `github.com` and `esm.sh` during design work.
Confirm the home-directory writes under `~/.gstack/` and `~/.claude/skills/gstack/` are acceptable.
If you will use framework output, inspect the package-manager install it may run and whether lockfiles may change.

Rated 2026-10-16 by an automated review of 6 files from the skill's repository.

Source

Repository: garrytan/gstack (all skills from this repository)
Path: design-html/SKILL.md
Branch: main
Updated: 2026-10-05

stitch::extract-static-html — Extract self-contained static HTML from a built web application or React components by inlining CSS and images.
stitch::generate-design — Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.
animate — Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool.
antfu-design — antfu-style design conventions, broadened.
hallmark — Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots.
interaction-design-board — Generate several genuinely different, runnable HTML interaction prototypes for one product surface, combine them in an interactive Design Board.