Forge Website

---
name: forge-website
description: "Forge playbook for websites, landing pages, and frontend UI. Use when building or improving a website, landing page, marketing site, dashboard UI, or frontend — keywords: website, landing page, hero, CTA, responsive, mobile layout, UI, UX, accessibility, a11y, SEO, page speed, Lighthouse, frontend, React, Vue, Tailwind. Covers UI/UX, responsiveness, accessibility, SEO, performance, forms, and screenshot-loop review."
---

# Forge playbook — Website / landing / frontend

**Do not duplicate ECC skills — defer to:** `design-is` (design audit), `browser` (screenshot loop). This file is orchestration only.

## Hard rules
- Mobile **and** desktop layout verified by screenshot before claiming done.
- No placeholder/Lorem/test/mock content in anything headed for prod.
- Forms validate input and hit a real endpoint; clear error + success states.
- Any analytics/form keys live in env, never in the committed bundle.

## Team (conditional by stack/level)
- Lead: `planner` / `architect`.
- Build review: `react-reviewer` **or** `vue-reviewer` (by stack).
- Audits (parallel): `a11y-architect`, `seo-specialist`, `performance-optimizer`.
- Copy/CTA: `marketing-agent`.

## Skills / commands / MCP
`design-is` (pick a real style direction first — see `~/.claude/rules/ecc/web/design-quality.md`), `browser` (mobile+desktop screenshots), `/react-build` + `/react-review` (or the Vue equivalents), `/test-coverage`. Canva MCP only if asset generation is explicitly requested. `humanizer` skill (`.claude/skills/humanizer/SKILL.md`) MAY run as an on-demand rewrite pass on client-facing marketing/landing copy — never on exact-command setup docs or forge-report output, and not always-on (34KB context cost).
When a build uses GSAP/ScrollTrigger for scroll-driven or compositor-friendly motion (per `~/.claude/rules/ecc/web/performance.md`), load the relevant `gsap` skill (`.claude/skills/gsap/<skill-name>/SKILL.md`) on demand for correct API usage — not always-on.

## Fan-out & flow
L2 for a single page, L3 for a multi-page site.
**Serial:** design direction (`design-is`) → build → audits → fixes → review gate.
**Parallel:** a11y ∥ seo ∥ performance ∥ copy audits on the built artifact (independent).

## Domain gates
Accessibility pass; SEO meta/OG + canonical; performance budget (see `~/.claude/rules/ecc/web/performance.md`); responsive at ~360/768/1280; CTA clarity; no broken links.

## Ship-readiness (unique)
Screenshots at mobile+desktop breakpoints; no test copy; all CTAs/links resolve; forms submit to a real endpoint with validation; favicon/meta/OG present; 404 route; secrets in env. The `ship-readiness` website checklist is advisory; optionally run `codex-reviewer` (Codex) on important code — not a blocker.