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
- 5-Second First Impression Test — Evaluates clarity, emotional fit, and CTA visibility in the first moments
- Technical Foundation Audit — Performance (Core Web Vitals), SEO basics, security headers, broken links
- UX Completeness Check — Component states, form behavior, animation polish, mobile usability
- Content & Brand Validation — Copy quality, placeholder detection, voice consistency, visual coherence
- 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 laun