One skill, six workbenches

#Overview

Think of the skill as a bound shop manual. The tools below are different workbenches; the manual doesn't change, only where you put it on the shelf and how you ask for it. Every build it produces ships the same floor: light and dark themes, mobile-first layout, no AI visual tells, no em-dashes, humanized copy.

• Claude.ai Native

  Upload the .skill file once, then just ask for websites.

• Claude Code Native

  Drop the folder in .claude/skills and it self-triggers.

• Codex CLI Native

  Lives in ~/.codex/skills, summoned with an @ mention.

• Antigravity CLI Native

  Replaced Gemini CLI; skills carried over intact.

• OpenCode Native

  Registered through AGENTS.md and the skill tool.

• GitHub Copilot Partial

  No skill loader; content gets pasted into instructions.

#Quick start

The fastest possible loop, regardless of tool: install once, then describe the site. A loaded prompt skips every clarifying question:

Build me a local business site for Fog Line Coffee in Daly City.
One page, sections for menu, hours, and location.
Brand colors #1B3A2F and #E8C547. Here are the real prices: ...

Anything you leave out, the skill asks about (site type) or decides and tells you (subject specifics). Anything you state wins over the skill's own taste, including palettes it would normally veto.

#Claude.ai Native

Install

Open the .skill file card in the chat where it was built and hit Save skill, or add it under Settings and Capabilities. It applies to new conversations, not the one you saved it in.

Invoke

Just ask for a website in a fresh chat. The skill's description matches phrases like "build me a site" or "landing page for", so it fires on its own. To force it, name it:

Use the handcraft-html skill and build a portfolio site.
I shoot film photography, mostly around the Sunset district.

Options that matter here

Claude.ai renders the result as an artifact, so browser storage is off. The skill knows this and holds the theme choice in memory instead of localStorage. If you'll host the file yourself later, say "this is for local hosting" and persistence gets wired in.

#Claude Code Native

Install

# project-scoped: travels with the repo
mkdir -p .claude/skills && cp -r handcraft-html .claude/skills/

# or personal: available in every project
cp -r handcraft-html ~/.claude/skills/

Invoke

Claude Code discovers skills at session start and triggers them when a task matches the description. Ask for a page and it engages; mention the skill by name to guarantee it.

Options that matter here

Say "split files" to get index.html, styles.css, and main.js as separate files for real dev work, and ask for the redesign flow by pointing it at an existing file: "redesign src/landing.html with the skill, keep the copy."

#Codex CLI Native

Install

mkdir -p ~/.codex/skills
cp -r handcraft-html ~/.codex/skills/

Invoke

Codex treats skills as the successor to its older custom prompts, which are deprecated. Mention the skill with an @ or let it trigger on a matching task:

@handcraft-html make a docs site for our CLI, sections for install, commands, config

Options that matter here

Codex versions move fast; if the @ mention doesn't autocomplete, check that your CLI is recent (skill support landed around v0.122) and that the folder name matches the skill's name field exactly: handcraft-html, no renames.

#Antigravity CLI Native

Install

# fresh install: get agy from antigravity.google/download, then
agy inspect                       # confirm it runs and see what's registered

# migrating from Gemini CLI: pull your old skills and extensions across
agy plugin import gemini
agy inspect                       # verify handcraft-html came over

Invoke

Skills stay first-class in Antigravity: the CLI registers installed skills and activates them when your task matches the description. Use the /skills slash command in a session to list what's loaded and confirm handcraft-html registered; naming the skill in your prompt still works as a manual trigger.

Options that matter here

Antigravity leans into long-running agent loops, which suits iterative design rounds: ask it to build the page, screenshot it at phone width, run the skill's checklist, and fix failures in one loop. If the skill didn't survive migration, place the folder manually and re-run agy inspect before assuming deeper breakage.

#OpenCode Native

Install

OpenCode runs skills through agent-driven execution: the agent reads AGENTS.md, learns what skills exist, and pulls them in with its skill tool. Place the folder in your project and point AGENTS.md at it:

## Skills
When the task involves building or redesigning HTML pages,
load and follow skills/handcraft-html/SKILL.md before writing code.

Invoke

Ask for a page as usual. Because the routing lives in AGENTS.md prose rather than a formal loader, be explicit the first time ("use the handcraft-html skill") to confirm the wiring works, then trust the automatic path.

#GitHub Copilot Partial

Copilot has no first-class SKILL.md loader, so the skill gets flattened into custom instructions. It still works, it just loses the on-demand loading that keeps context lean elsewhere.

Install

# concatenate the skill into repo-level instructions
cat handcraft-html/SKILL.md handcraft-html/references/*.md >> .github/copilot-instructions.md

Invoke

Instructions apply automatically to Copilot Chat in that repo. Ask for HTML work and the rules ride along.

#Themes

Try any color palette here. It changes the colors and type pairing while keeping your selected layout. The docs style control changes the layout; "Style default" pairs Classic with Anthropic, Minimal with Mono, and Notebook or Glass with Slate.

Color palettes

Docs styles

The three newer docs themes combine a layout with a default palette. Choose a style below, then pick another palette above if the subject calls for it.

Build an API reference for our CLI, Notebook theme.
Use the Forest palette instead of Notebook's Slate default.

#Options you can pass

None of these are flags; they're plain sentences in your prompt. Stated options always beat the skill's defaults.

#Debugging

Symptoms, likely causes, fixes. Work top to bottom.

skill never triggersdiscovery problem

Start a fresh session; skills register at session start, not mid-conversation. Verify the folder sits in the tool's discovery path and is still named handcraft-html. If it still ignores you, invoke by name; if a by-name invoke also fails, the install path is wrong.

output still looks AI generatedchecklist skipped

Reply with: "run the self-check in references/ai-tells.md against this output and fix every failure." That forces the audit pass. If a specific tell survives (say, the three-card icon grid), name it; the checklist has a line item for it.

em-dashes appearingcopy pass skipped

Say "search the file for the em-dash character and remove every one." The checklist mandates this search, but a distracted run can skip it. If this recurs in one tool constantly, its context may be truncating the skill; see the flattening entry below.

white flash on load in dark modetheme script misplaced

The theme script must be inline in the head, before the stylesheet. If it landed at the bottom of the body, ask: "move the theme initialization inline into the head so it runs before first paint."

horizontal scroll on a phonea fixed width escaped

Usually one culprit: a fixed-width element, an unwrapped table, or a long unbroken string. Ask the tool to "find whatever overflows at 360px wide and contain it." Tables should get a scroll wrapper, not shrink to unreadable.

broken image iconshotlinked stock URLs

The skill bans external image URLs, so this means the rule got dropped. Ask for inline SVG or labeled placeholders instead, then re-run the checklist, which has a line for exactly this.

rules ignored in Copilotcontext flattening

Copilot holds the whole flattened skill at once and long instruction files lose force at the tail. Trim to SKILL.md plus ai-tells.md, and move the two rules you care about most (em-dashes, no stock looks) to the top of the instructions file.