web-craft
[ Claude Code Skills · Landing-Page Web Dev ]
+ +
skill pack · 5 skills + reference + workflow · single-file output
Download & install

Give Claude Code the craft to build landing pages.

Five focused skills that push its output past the generic AI default — a warm-dark blueprint design system, one-column Swiss layout, hand-tuned UI motion, fast re-skinning, and knowing when to ask before it guesses.

Download the skills ▾ claude-web-craft.zip · unzip → copy into ~/.claude/skills/
Contents

What's inside

001 — 005 · skills
+ reference · + workflow
§ 01

polished-ui.

The craft details — house easing curves, design tokens, layered shadows, tactile press states, blur-in entrances — that separate hand-tuned UI from generic AI-default output.

micro-craft · motion · tokens
§ 02

industrial-web.

A full warm-dark blueprint design system and how to build a distinctive single-file landing page in it: palette, type roles, motifs, section anatomy, and an optional ASCII / three.js hero.

design system · single-file page
§ 03

swiss-grid.

Make a multi-section page cohere by aligning everything to one shared column (International Typographic Style): one container, one left edge, one rhythm, flush-left — not centered.

layout cohesion · one column
§ 04

token-reskin.

Rebrand or re-skin an existing page fast and safely through CSS custom properties — without breaking layout or interactivity, including recoloring inline SVGs.

rebrand · css variables
§ 05

ask-first.

Use the AskUserQuestion tool to resolve genuinely ambiguous direction before building — instead of guessing wrong and rebuilding.

clarify · before you build
+ also

design-system.css · WORKFLOW.md

A design-system.css starter ships inside the industrial-web skill — drop it straight into a page. WORKFLOW.md is the end-to-end process: clarify → build single-file → verify in a real browser → trim → commit.

starter css · end-to-end process
Setup

Install

~/.claude/skills/  ·  or  ·  project/.claude/skills/
install — claude-web-craft
  1. Unzip the download: unzip claude-web-craft.zip
  2. Copy the skills into place — global (every project):
    mkdir -p ~/.claude/skills && cp -R claude-web-craft/skills/* ~/.claude/skills/
  3. …or one project only: copy into <your-project>/.claude/skills/ instead.
  4. Verify it landed: ls ~/.claude/skills/industrial-web/SKILL.md
  5. Restart / reopen Claude Code so it re-scans the skills.
  6. Just ask it to build a landing page — it picks up the skills on its own.
claude-web-craft/ skills/ polished-ui/ SKILL.md industrial-web/ SKILL.md design-system.css swiss-grid/ SKILL.md token-reskin/ SKILL.md ask-first/ SKILL.md README.md WORKFLOW.md

Structure matters: a skill is discovered as ~/.claude/skills/<name>/SKILL.md. Copy the contents of skills/ — don't nest the claude-web-craft folder inside skills/, or nothing loads.