← ClaudeAtlas

buildlisted

Assembles landing page sections. GUARD against AI-slop and hardcodes. Refuses to work without DESIGN-LOCK. Uses only tokens from tokens.css. Bounded by the section list in DESIGN-LOCK §8. Runs /typography pass on every saved section. Verifies references/approved-manifest.md coverage per section.
dkadts/landing-kit-building · ★ 2 · Web & Frontend · score 73
Install: claude install-skill dkadts/landing-kit-building
# /build Main assembler. Everything before this is preparation. Here HTML/CSS/JS sections come into existence. ## When to use - After `/tokens` (tokens.css exists and is filled). - After `/copy-analyze` (brief/copy-analysis.md with recommended structure exists). - After `/blocks` (brief/blocks/*.md filled). - After `/animation` (brief/animation.md exists — motion classes drive CSS). - After `/media` and `/icons` (assets in site/media/). ## Requirements — HARD BLOCKING Refuse to work if: - `DESIGN-LOCK.md` is not fully LOCKED (any TBD remains). - `site/css/tokens.css` has any value = `0` / empty / TBD comment. - `brief/copy-analysis.md` is missing (we don't know the structure). - The section requested is not in DESIGN-LOCK §8 "Section vocabulary". - `references/approved-manifest.md` is missing (created by `/refs`; must exist even if empty). - `brief/animation.md` is missing (created by `/animation`). ## Process **Step 1. Read sources of truth** - `DESIGN-LOCK.md` — what is allowed, what is not. - `site/css/tokens.css` — which variables are available. - `brief/copy-analysis.md` — section structure. - `inbox/texts/*` — copy for this section. - `brief/blocks/<block>.md` — if this is an interactive block. - `brief/animation.md` — motion classes to apply per element. - `site/media/_srcset-snippets.md` — ready `<img>` tags. - `site/media/icons/_snippets.html` — ready inline `<svg>` snippets. - `references/approved-manifest.md` — required elements for this section. **Step 2.