gs:design-html

gs:design-html is a skill for Claude Code, Codex from thanh-abaii/gstack-windows-port. It costs 150 tokens per session (15,827 once invoked), scanned A, original, MIT.

A tool that turns an approved design or written description into HTML and CSS for a Pretext-based project. Pretext is the site format this tool targets.

In plain words
What is it for?
Use it to build production web pages from mockups, design plans, review notes, or a description from scratch.
Why use it?
It helps turn design decisions into working web pages with content that can reflow and layouts whose heights are calculated.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/thanh-abaii/gstack-windows-port/gstack-design-html
Any agent
npx skills add thanh-abaii/gstack-windows-port --skill gstack-design-html
Clone the repo
git clone --depth 1 https://github.com/thanh-abaii/gstack-windows-port

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for gs:design-html

README.md
[![agentmods](https://agentmods.dev/badge/skills/thanh-abaii/gstack-windows-port/gstack-design-html.svg)](https://agentmods.dev/skills/thanh-abaii/gstack-windows-port/gstack-design-html)
Your own site
<a href="https://agentmods.dev/skills/thanh-abaii/gstack-windows-port/gstack-design-html"><img src="https://agentmods.dev/badge/skills/thanh-abaii/gstack-windows-port/gstack-design-html.svg" alt="Measured on agentmods" height="20"></a>
Per session 150 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 15,827 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00150 $0.15827
Opus 5 $0.00075 $0.07914
Sonnet 5 $0.00030 $0.03165
Haiku 4.5 $0.00015 $0.01583

Measured 5d ago against content hash a95911784698, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

gs:design-html scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -fsSL "https://bun.sh/install" -o "$tmpfile"
skills/gstack-design-html/SKILL.md · 1,464 lines

How it starts

The opening of the file, as written. The whole thing — 1,464 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Preamble (run first)

python "bin/gstack-boot.py" --skill design-html | iex

If PROACTIVE is "false", do not proactively suggest gstack skills AND do not auto-invoke skills based on conversation context. Only run skills the user explicitly types (e.g., /gs:qa, /gs:ship). If you would have auto-invoked a skill, instead briefly say: "I think /skillname might help here — want me to run it?" and wait for confirmation. The user opted out of proactive behavior.

If SKILL_PREFIX is "true", the user has namespaced skill names. When suggesting or invoking other gstack skills, use the /gstack- prefix (e.g., /gstack-qa instead of /qa, /gstack-ship instead of /ship). Disk paths are unaffected — always use $GSTACK_ROOT/[skill-name]/SKILL.md for reading skill files.

If output shows UPGRADE_AVAILABLE <old> <new>: read $GSTACK_ROOT/gstack-upgrade/SKILL.md and follow the "Inline upgrade flow" (auto-upgrade if configured, otherwise AskUserQuestion with 4 options, write snooze state if declined). If JUST_UPGRADED <from> <to>: tell user "Running gstack v{to} (just updated!)" and continue.

If WRITING_STYLE_PENDING is yes: You're on the first skill run after upgrading to gstack v1. Ask the user once about the new default writing style. Use AskUserQuestion:

v1 prompts = simpler. Technical terms get a one-sentence gloss on first use, questions are framed in outcome terms, sentences are shorter.

Keep the new default, or prefer the older tighter prose?

Options:

  • A) Keep the new default (recommended — good writing helps everyone)
  • B) Restore V0 prose — set explain_level: terse

If A: leave explain_level unset (defaults to default). If B: run $GSTACK_BIN/gstack-config set explain_level terse.

Always run (regardless of choice):

Remove-Item -Force ~/.gstack/.writing-style-prompt-pending
touch ~/.gstack/.writing-style-prompted

This only happens once. If WRITING_STYLE_PENDING is no, skip this entirely.

If LAKE_INTRO is no: Before continuing, introduce the Completeness Principle. Tell the user: "gstack follows the Boil the Lake principle — always do the complete thing when AI makes the marginal cost near-zero. Read more: https://garryslist.org/posts/boil-the-ocean" Then offer to open the essay in their default browser:

open https://garryslist.org/posts/boil-the-ocean
touch ~/.gstack/.completeness-intro-seen

Only run open if the user says yes. Always run touch to mark as seen. This only happens once.

If TEL_PROMPTED is no AND LAKE_INTRO is yes: After the lake intro is handled, ask the user about telemetry. Use AskUserQuestion:

Help gstack get better! Community mode shares usage data (which skills you use, how long they take, crash info) with a stable device ID so we can track trends and fix bugs faster. No code, file paths, or repo names are ever sent. Change anytime with gstack-config set telemetry off.

Options:

  • A) Help gstack get better! (recommended)
  • B) No thanks

If A: run $GSTACK_BIN/gstack-config set telemetry community

If B: ask a follow-up AskUserQuestion:

How about anonymous mode? We just learn that someone used gstack — no unique ID, no way to connect sessions. Just a counter that helps us know if anyone's out there.

Options:

  • A) Sure, anonymous is fine
  • B) No thanks, fully off

If B→A: run $GSTACK_BIN/gstack-config set telemetry anonymous If B→B: run $GSTACK_BIN/gstack-config set telemetry off

Always run:

touch ~/.gstack/.telemetry-prompted

This only happens once. If TEL_PROMPTED is yes, skip this entirely.

If PROACTIVE_PROMPTED is no AND TEL_PROMPTED is yes: After telemetry is handled, ask the user about proactive behavior. Use AskUserQuestion:

gstack can proactively figure out when you might need a skill while you work — like suggesting /gs:qa when you say "does this work?" or /gs:investigate when you hit a bug. We recommend keeping this on — it speeds up every part of your workflow.

Read the full file on GitHub · 1,464 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 1,464 lines · 150 tokens per session scan A a95911784698

Subscribe to this mod's changes

gs:design-html is a skill published in the GitHub repository thanh-abaii/gstack-windows-port (34 stars, last pushed 3mo ago), licensed MIT. It adds 150 tokens to every session and 15,827 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

Shade ShadCN install

Guardrails for running pnpm dlx shadcn@latest add in Shade — never overwrite existing components, fresh branch first, swap raw colours for semantic tokens after integrating. Trigger when the user proposes a shadcn add, or when a fresh ShadCN-shaped file lands in apps/shade/src/components/ui.

TryGhost/Ghost · 72 tokens

chakra-ui-builder

Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…

chakra-ui/chakra-ui · 214 tokens

frontend-visual-qa

Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…

daymade/claude-code-skills · 145 tokens

prototype-web

可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA.

nexu-io/html-anything · 24 tokens

waitlist-page

【模板: 等候名单页 / Waitlist】 【意图】为新产品 / 早鸟内测做一张极简等候页。 【布局】.

nexu-io/html-anything · 25 tokens

design-frontend-dev

Clean Impeccable frontend design skill. Use when the user wants to design, redesign, critique, audit, polish, harden, optimize, adapt, clarify, colorize, animate, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, onboarding, empty states…

The-Vibe-Company/companion · 127 tokens