website-finishing-director

What this skill does

# 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 do next? (3 pts)
Is the primary CTA visible and clear?
[ ] 3 — CTA visible above fold, action-specific text
[ ] 2 — CTA present but generic ("Learn more")
[ ] 1 — CTA below the fold or hard to find
[ ] 0 — No CTA visible

### 5. HOW does it feel? (3 pts)
Does the emotional tone match the brand quadrant?
[ ] 3 — Perfect quadrant match (warm brand = warm design)
[ ] 2 — Mostly aligned, minor dissonance
[ ] 1 — Noticeable mismatch (warm brand + cold design)
[ ] 0 — Opposite quadrant (positioning confusion)

### Pass 1 Score: ___/15

Verdict:
- 12-15: PASS — First impression is clear and emotionally aligned
- 8-11: NEEDS WORK — Visitor gets it, but slowly or with friction
- <8: FAIL — Redesign the above-fold experience
```

**Integration**: Compare the emotional feel against the `web-design-director` quadrant system. If the brand is Warm+Calm but the site feels Cold+Active, that's a P0 regardless of score.

**GUIA gotchas for this pass**:
- Calendly URL hardcoded in CTA instead of `/contact/` page (breaks analytics)
- Mixing warm copy tone with cold UI elements (terracotta palette + monospace font = confusion)

---

### Pass 2: Technical Foundation (25 points)

*"Is the infrastructure solid enough to build on?"*

```
## Pass 2 — Technical Foundation

### Performance (10 pts)

| Metric | Target | Score |
|--------|--------|-------|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 0-3 pts |
| INP (Interaction to Next Paint) | ≤ 200ms | 0-2 pts |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0-2 pts |
| Lighthouse Performance score | ≥ 85 | 0-3 pts |

Scoring:
- LCP: 3 = ≤2.5s, 2 = ≤4.0s, 1 = ≤6.0s, 0 = >6.0s
- INP: 2 = ≤200ms, 1 = ≤500ms, 0 = >500ms
- CLS: 2 = ≤0.1, 1 = ≤0.25, 0 = >0.25
- Lighthouse: 3 = ≥90, 2 = ≥85, 1 = ≥70, 0 = <70

### SEO Basics (8 pts)

- [ ] (2 pts) Canonical URLs defined + trailing slash consistent
- [ ] (1 pt) Meta titles unique per page (≤60 chars)
- [ ] (1 pt) Meta descriptions present per page (≤160 chars)
- [ ] (1 pt) Sitemap.xml accessible and valid
- [ ] (1 pt) robots.txt present and correct
- [ ] (1 pt) Structured data present (JSON-LD)
- [ ] (1 pt) Alt text on all images

### Security & Links (7 pts)

- [ ] (2 pts) HTTPS enforced (no mixed content)
- [ ] (2 pts) Security headers present (CSP, X-Frame-Options, HSTS, X-Content-Type-Options)
- [ ] (1 pt) No broken internal links (404s)
- [ ] (1 pt) No broken external links
- [ ] (1 pt) No exposed source maps or debug endpoints in production

### Pass 2 Score: ___/25

Verdict:
- 21-25: SOLID — Ship it
- 16-20: ACCEPTABLE — Fix P0s, ship with P1 backlog
- 11-15: FRAGILE — Significant technical debt
- <11: BROKEN — Do not lau