/website-finishing-director

name: website-finishing-director
description: "Run a structured 5-pass finishing audit on any website before launch — scoring visual polish, technical foundation, UX completeness, content quality, and cross-device readiness on 100 points. Use when: **Pre-launch** - Final validation before going live; **Post-redesign** - Verify nothing broke during the overhaul; **Client handoff** - Structured proof that the site is ready; **Quarterly review** - Catch accumulated debt; **Single-pass focus** - Run just Pass 2 after a perf sprint"
license: MIT
metadata:
  author: ClawFu
  version: 1.0.0
  mcp-server: "@clawfu/mcp-skills"

Website Finishing Director

> Structured 5-pass website finishing audit — from first impression to launch readiness — scored on 100 points. Like painting: primer, base coat, details, clear coat, final inspection. No site ships without a finishing pass.

When to Use This Skill

• **Pre-launch gate** — Final validation before DNS goes live or traffic is sent
• **Post-redesign audit** — After a visual overhaul, verify nothing regressed
• **Client handoff** — Generate a structured report proving the site meets quality standards
• **Quarterly maintenance** — Catch accumulated UX debt, broken links, stale content
• **Targeted pass** — Run just one pass (e.g., "Pass 2 only" after a performance sprint)

Methodology Foundation

**Sources**:

• Nielsen Norman Group — Heuristic evaluation framework (10 usability heuristics)
• Google Web Vitals — LCP, CLS, INP thresholds
• OWASP — Security headers baseline
• Oli Gardner / Unbounce — Landing page conversion best practices
• Don Norman — Emotional Design (visceral/behavioral/reflective layers)
• GUIA production memory — 8 shipped websites, documented gotchas across Next.js, Framer Motion, GSAP, Lenis, Railway, Docker

**Core Principle**: A website that passes Lighthouse and has correct meta tags is technically valid but not *finished*. Finishing is the gap between "it works" and "it's ready." It requires evaluating the site as a visitor experiences it — progressive, emotional, cross-device — not as a checklist of individual metrics.

**Why This Matters**: Existing tools (Lighthouse, Screaming Frog, Awwwards) each audit one dimension. No tool combines visual polish + UX completeness + technical foundation + content quality + brand alignment in a sequential, scored workflow. This skill is that tool.

---

What Claude Does vs What You Decide

> "Claude runs the audit. You decide what ships."

| Claude handles | You provide | |---------------|-------------| | Running each pass systematically against the checklist | The live URL or codebase access | | Scoring each checkpoint with rationale | Context: brand positioning, target audience, launch timeline | | Classifying issues as P0/P1/P2 | Override decisions (e.g., "P1 is acceptable for MVP") | | Generating the final report with fix suggestions | Final Go/No-Go judgment | | Flagging GUIA stack gotchas from production memory | Validation on real devices (Claude can't open Safari) |

**Remember**: This is a centaur workflow. Claude structures the audit rigorously; you validate the verdict with human eyes on real devices.

---

What This Skill Does

1. **5-Second First Impression Test** — Evaluates clarity, emotional fit, and CTA visibility in the first moments 2. **Technical Foundation Audit** — Performance (Core Web Vitals), SEO basics, security headers, broken links 3. **UX Completeness Check** — Component states, form behavior, animation polish, mobile usability 4. **Content & Brand Validation** — Copy quality, placeholder detection, voice consistency, visual coherence 5. **Cross-Device & Launch Readiness** — Browser testing, OG previews, analytics, 404 page, favicon

How to Use

Full website audit before launch

I'm about to launch [site URL]. Run a full website-finishing-director audit (all 5 passes).
Brand quadrant: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm].
Target audience: [who].

Single pass after a specific fix

I just optimized performance on [site URL]. Run Pass 2 only (Technical Foundation).

Landing page quick audit

Audit this landing page: [URL]. Use the Landing Page profile (passes 1, 2, 4).

---

Instructions

When running this audit, follow the 5 passes in order. Each pass builds on the previous one — foundation before polish. Score each checkpoint, classify issues by priority, then generate the final report.

Audit Profiles

Not every site needs all 5 passes. Select the profile that matches the project:

| Profile | Passes | When to use | |---------|--------|-------------| | **Landing Page** | 1, 2, 4 | Single-page campaign or product page | | **Full Website** | 1, 2, 3, 4, 5 | Multi-page site with navigation, forms, content | | **E-commerce** | 2, 3, 5 | Store with cart, checkout, product pages |

Adjust point totals proportionally when using a reduced profile. The Go/No-Go thresholds apply to the percentage score, not raw points.

---

Pass 1: First Impression (15 points)

*"What does a visitor understand and feel in 5 seconds?"*

Show the homepage (or hero section) for 5 seconds. Answer these 5 questions — 3 points each:

## Pass 1 — First Impression (5-Second Test)

### 1. WHAT is this? (3 pts)
Can a visitor identify what the site/product/service IS?
[ ] 3 — Immediately clear, no ambiguity
[ ] 2 — Clear after reading subheadline
[ ] 1 — Vague, requires scrolling to understand
[ ] 0 — No idea what this is

### 2. WHO is it for? (3 pts)
Are there signals identifying the target audience?
[ ] 3 — Obvious demographic/psychographic signals
[ ] 2 — Implied but not explicit
[ ] 1 — Generic ("everyone")
[ ] 0 — Actively confusing (signals wrong audience)

### 3. WHY should I care? (3 pts)
Is the value proposition or benefit visible?
[ ] 3 — Clear benefit, emotionally resonant
[ ] 2 — Feature-focused but understandable
[ ] 1 — Present but buried
[ ] 0 — No value proposition visible

### 4. WHAT do I d