Website Finishing Director

guia-matthieu/website-finishing-director

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

8k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

145

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/guia-matthieu/clawfu-skills --skill website-finishing-director

The instruction itself

54 sections, as written by the author

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.