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 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 launch

GUIA gotchas for this pass:

• trailingSlash: true missing in next.config.js (caused deindexation on Rental-CRM, Jan 2026)
• export const metadata on a 'use client' component (metadata not rendered server-side)
• Module-level SDK init (Supabase/Stripe) fails at build when env vars missing — lazy-initialize inside functions
• Vercel env vars trailing newline from echo — use printf instead
• Railway *.railway.internal hostnames unreachable during Nixpacks build — use public URLs

---

Pass 3: UX Completeness (25 points)

"Does the site handle real-world usage, not just the happy path?"

## Pass 3 — UX Completeness

### Component States (8 pts)

For EACH interactive component (buttons, cards, forms, modals, lists):
- [ ] (2 pts) Loading state — skeleton, spinner, or progressive render
- [ ] (2 pts) Error state — clear message + recovery action
- [ ] (2 pts) Empty state — helpful message, not blank screen
- [ ] (2 pts) Success state — confirmation feedback

Score: deduct per missing state across all components.
8 pts = all states covered. -1 per missing state (cap at 0).

### Forms (6 pts)

- [ ] (1 pt) Client-side validation with clear error messages
- [ ] (1 pt) Server-side validation (not just client)
- [ ] (1 pt) Success feedback after submission (toast, redirect, or inline)
- [ ] (1 pt) Submit button disabled during processing (no double-submit)
- [ ] (1 pt) Spam protection (honeypot, reCAPTCHA, or rate limiting)
- [ ] (1 pt) Privacy policy link near form (GDPR)

### Animation Polish (6 pts)

- [ ] (1 pt) `viewport={{ once: true }}` on scroll animations (no replay on scroll-back)
- [ ] (1 pt) `useGSAP` hook used (not `useEffect`) for GSAP animations
- [ ] (1 pt) `prefers-reduced-motion` respected (disable or reduce animations)
- [ ] (1 pt) No animation blocks content access (content visible even if animation fails)
- [ ] (1 pt) Lenis initialized correctly (not Locomotive Scroll)
- [ ] (1 pt) Exit animations don't cause layout shift

### Mobile Usability (5 pts)

- [ ] (1 pt) Touch targets ≥ 44px (iOS HIG standard)
- [ ] (1 pt) No horizontal overflow / horizontal scroll
- [ ] (1 pt) Font sizes ≥ 16px for body text (prevents iOS zoom)
- [ ] (1 pt) Sticky/fixed elements don't overlap content
- [ ] (1 pt) Scroll behavior works correctly (no scroll-jacking that traps users)

### Pass 3 Score: ___/25

Verdict:
- 21-25: COMPLETE — Real-world usage covered
- 16-20: MOSTLY THERE — Edge cases need attention
- 11-15: INCOMPLETE — Users will hit dead ends
- <11: UNFINISHED — UX not production-ready

GUIA gotchas for this pass:

• GSAP + React 18 Strict Mode fires animations 2x in dev (use useGSAP, not useEffect)
• Global CSS a { color: var(--color-coral) } overrides Tailwind text-white on anchor CTAs — use inline style={{ color: 'white' }}
• Framer Motion AnimatePresence exit animations break with Next.js App Router
• Too many simultaneous ScrollTrigger instances kill mobile performance
• Lenis package name: npm install lenis (NOT @studio-freight/lenis)

---

Pass 4: Content & Brand (20 points)

"Is the content finished, consistent, and on-brand?"

## Pass 4 — Content & Brand

### Copy Quality (8 pts)

- [ ] (2 pts) No placeholder text detected ("Lorem ipsum", "[Your Name]", "Coming soon",
      "example.com", "TODO", empty sections)
- [ ] (1 pt) No spelling or grammar errors
- [ ] (1 pt) Link text is descriptive (not "click here" or naked URLs)
- [ ] (1 pt) CTA copy is specific ("Start free trial" not "Submit")
- [ ] (1 pt) Heading hierarchy is logical (H1 → H2 → H3, one H1 per page)
- [ ] (1 pt) Alt text is descriptive (not "image1.png" or empty)
- [ ] (1 pt) Phone numbers, emails, addresses are real (not placeholder)

### Brand Voice (6 pts)

- [ ] (2 pts) Tone matches brand positioning (warm/cold, formal/casual)
- [ ] (2 pts) Voice is consistent across all pages (same person "speaking")
- [ ] (1 pt) No AI-smoothing markers ("Don't hesitate to contact us",
      "In today's fast-paced world", "It's important to note that")
- [ ] (1 pt) CTAs match the emotional quadrant (warm brand = inviting CTA, not aggressive)

### Visual Consistency (6 pts)

- [ ] (1 pt) Color palette used consistently (no off-brand colors)
- [ ] (1 pt) Typography hierarchy clear (display, heading, body, caption — max 2-3 fonts)
- [ ] (1 pt) Spacing rhythm consistent (not random padding between sections)
- [ ] (1 pt) Icon style uniform (don't mix outline, filled, and emoji)
- [ ] (1 pt) Image treatment consistent (all photos same filter/tone, or all illustrations)
- [ ] (1 pt) Component style consistent (cards, buttons, inputs follow same pattern)

### Pass 4 Score: ___/20

Verdict:
- 17-20: POLISHED — Content is finished and on-brand
- 13-16: GOOD — Minor inconsistencies, shippable
- 9-12: ROUGH — Content needs editing pass
- <9: UNFINISHED — Major content gaps or brand mismatch

GUIA gotchas for this pass:

• Calendly URL must match the correct professional (Valeria vs Matthieu vs client)
• Mixing warm copy ("We understand your challenges") with cold UI (dark mode, monospace, sharp corners)
• AI-generated copy detection: remove double line breaks before publishing (AI signature on LinkedIn)
• credou.bzh copy direction: mechanism-first, no CV, no parcours/timeline

---

Pass 5: Cross-Device & Launch (15 points)

"Does it work everywhere, and is everything ready to go live?"

## Pass 5 — Cross-Device & Launch

### Browser Testing (5 pts)

Test on the 3 major browsers. Score per browser:
- [ ] (2 pts) Safari — renders correctly, animations work, fonts load
- [ ] (2 pts) Chrome — renders correctly, animations work, fonts load
- [ ] (1 pt) Firefox — renders correctly, no major breaks

Per browser, check: layout, animations, fonts, forms, scroll behavior.
Deduct 1 pt per browser with visual bugs. Deduct 2 pts per browser with functional bugs.

### Device Testing (4 pts)

- [ ] (2 pts) Mobile (375px) — full site usable, no content cut off
- [ ] (1 pt) Tablet (768px) — layout adapts, no awkward breakpoints
- [ ] (1 pt) Desktop (1440px) — content doesn't stretch or float in empty space

### Launch Readiness (6 pts)

- [ ] (1 pt) Analytics installed and firing (GA4, Plausible, or equivalent)
- [ ] (1 pt) OG image renders correctly (test with opengraph.xyz or Twitter card validator)
- [ ] (1 pt) 404 page exists and is styled (not default browser/framework error)
- [ ] (1 pt) Favicon present in all sizes (16, 32, 180, 192, 512 — or SVG adaptive)
- [ ] (1 pt) Google Search Console configured (or equivalent)
- [ ] (1 pt) Social preview correct on LinkedIn, Twitter, WhatsApp

### Pass 5 Score: ___/15

Verdict:
- 12-15: LAUNCH READY — Ship it
- 9-11: ALMOST — Fix critical device/browser issues
- <9: NOT READY — Cross-device experience is broken

GUIA gotchas for this pass:

• Lenis smooth scroll has known issues on Safari — test carefully
• Vercel env vars with trailing newline break OG image URLs
• Docker healthcheck must pass before CI/CD reports success
• deploy.sh uses flock — no concurrent deploys on VPS
• Resend subdomain DNS: send.send.<zone> looks wrong but is correct (Resend adds send. prefix)

---

Step 6: Generate the Final Report

After running all applicable passes, compile the report:

## Final Report Template

# Website Finishing Audit: [Site Name]

**URL:** [https://...]
**Date:** [YYYY-MM-DD]
**Profile:** [Landing Page / Full Website / E-commerce]
**Auditor:** [Name] + Claude (website-finishing-director)

---

## Score Summary

| Pass | Name | Score | Max | Status |
|------|------|-------|-----|--------|
| 1 | First Impression | __/15 | 15 | [PASS/NEEDS WORK/FAIL] |
| 2 | Technical Foundation | __/25 | 25 | [SOLID/ACCEPTABLE/FRAGILE/BROKEN] |
| 3 | UX Completeness | __/25 | 25 | [COMPLETE/MOSTLY/INCOMPLETE/UNFINISHED] |
| 4 | Content & Brand | __/20 | 20 | [POLISHED/GOOD/ROUGH/UNFINISHED] |
| 5 | Cross-Device & Launch | __/15 | 15 | [READY/ALMOST/NOT READY] |
| **TOTAL** | | **__/100** | **100** | |

---

## Verdict

| Score Range | Verdict |
|-------------|---------|
| 85-100 | LAUNCH READY |
| 70-84 | CONDITIONAL — fix P0s then ship |
| 50-69 | NEEDS WORK — significant issues |
| <50 | NOT READY — major gaps |

**Override rule:** 1 unresolved P0 = NOT READY, regardless of total score.

**VERDICT: [LAUNCH READY / CONDITIONAL / NEEDS WORK / NOT READY]**

---

## Issues

### P0 — Blockers (must fix before launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P1 — Important (fix within 1 week of launch)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

### P2 — Nice-to-have (backlog)

| # | Pass | Issue | Location | Fix |
|---|------|-------|----------|-----|
| 1 | [1-5] | [Description] | [file:line or URL path] | [Concrete solution] |

---

## Strengths

- [What the site does well — acknowledge good work]
- [Specific design/technical/content wins]

## Recommendations

1. [Highest-priority improvement]
2. [Second priority]
3. [Strategic suggestion for next iteration]

---

## Sign-off

- [ ] All P0s resolved
- [ ] P0 + P1 resolved (optimal)
- [ ] Stakeholder review completed
- [ ] Go-live date confirmed: ____________

---

Examples

Example 1: Full Website Audit — credou.bzh

Context: Personal brand website for a consultant. Warm+Calm quadrant. Next.js 16, Framer Motion, Lenis. Just completed copy v3 and deployed.

Input:

Run a full website-finishing-director audit on credou.bzh. Brand quadrant: Warm+Calm. Target: decision-makers struggling with AI integration.

Output:

Website Finishing Audit: credou.bzh

URL: https://credou.bzh Date: 2026-02-12 Profile: Full Website Auditor: Matthieu + Claude (website-finishing-director)

---

Score Summary

Pass	Name	Score	Max	Status
1	First Impression	13/15	15	PASS
2	Technical Foundation	19/25	25	ACCEPTABLE
3	UX Completeness	18/25	25	MOSTLY THERE
4	Content & Brand	17/20	20	POLISHED
5	Cross-Device & Launch	11/15	15	ALMOST
TOTAL		78/100	100

---

Verdict

CONDITIONAL — Score 78/100. Fix P0s then ship.

---

Issues

P0 — Blockers

#	Pass	Issue	Location	Fix
1	2	Security headers missing (no CSP, no X-Frame-Options)	next.config.js	Add headers() config with CSP, X-Frame, HSTS, X-Content-Type
2	5	404 page is default Next.js error	/app/not-found.tsx	Create styled 404 page matching Papier/Encre theme

P1 — Important

#	Pass	Issue	Location	Fix
1	2	eslint.config.js missing	Project root	Add ESLint flat config
2	3	prefers-reduced-motion not handled	globals.css	Add @media (prefers-reduced-motion: reduce) to disable animations
3	3	Skip-to-content link missing	layout.tsx	Add visually hidden skip link
4	5	Social preview not tested on WhatsApp	OG image	Verify OG renders on WhatsApp share

P2 — Nice-to-have

#	Pass	Issue	Location	Fix
1	4	"Le plan" section cards could use more varied spacing	HomeContent.tsx	Vary vertical padding between card rows

---

Strengths

• Copy v3 (articulation bottleneck) is sharp — mechanism-first, no CV padding
• Papier/Encre dual theme is cohesive and on-brand
• Grain texture + borderless cards create genuine warmth (not template-y)
• Edge-rendered OG image is a solid SEO win

Recommendations

1. Fix security headers (P0) — 15 min task, high security impact
2. Create custom 404 page (P0) — maintain brand experience on dead links
3. Add prefers-reduced-motion (P1) — accessibility compliance

---

Why this works: The audit catches the gap between "technically deployed" and "actually finished." The site scores well on impression and content but has infrastructure gaps (security headers, 404) that a pure Lighthouse audit would flag separately without prioritization.

---

Example 2: Landing Page Audit — SaaS Product Launch

Context: New SaaS landing page for a productivity tool. Cold+Active quadrant. Single page, no forms, CTA links to waitlist.

Input:

Audit this landing page with the Landing Page profile (passes 1, 2, 4): taskflow.app. Quadrant: Cold+Active. Audience: engineering managers.

Output:

Website Finishing Audit: TaskFlow

URL: https://taskflow.app Date: 2026-02-12 Profile: Landing Page (Passes 1, 2, 4) Auditor: Product team + Claude (website-finishing-director)

---

Score Summary

Pass	Name	Score	Max	Status
1	First Impression	9/15	15	NEEDS WORK
2	Technical Foundation	22/25	25	SOLID
4	Content & Brand	11/20	20	ROUGH
TOTAL		42/60	60	(70%)

---

Verdict

CONDITIONAL — 70% score. P0 in Pass 1 requires attention.

---

Issues

P0 — Blockers

#	Pass	Issue	Location	Fix
1	1	WHAT is this? scored 1/3 — product category unclear in hero	Hero section	Add one line: "Project tracking for engineering teams" above the tagline
2	4	3 placeholder testimonials with stock photos	Social proof section	Remove section entirely, or replace with real beta user quotes

P1 — Important

#	Pass	Issue	Location	Fix
1	1	CTA says "Get Started" — generic for a waitlist	Hero CTA	Change to "Join the Waitlist" or "Request Early Access"
2	4	AI-smoothing detected: "In today's fast-paced engineering landscape..."	Hero subtitle	Rewrite: direct, specific, no filler
3	4	Feature icons mix filled and outline styles	Features grid	Standardize on one icon style

P2 — Nice-to-have

#	Pass	Issue	Location	Fix
1	2	Structured data missing (no Product or SoftwareApplication schema)	<head>	Add JSON-LD SoftwareApplication schema
2	4	Footer copyright says 2025	Footer	Update to 2026

---

Strengths

• Technical foundation is solid (22/25) — fast, well-optimized
• Dark UI + gradient accents match Cold+Active quadrant perfectly
• Responsive layout works well across breakpoints

Recommendations

1. Clarify the hero — visitors need to understand the product category in 3 seconds
2. Remove fake testimonials — empty space is better than fake social proof
3. Rewrite CTA to match the actual action (waitlist, not "get started")

---

Why this works: The Landing Page profile skips UX completeness (Pass 3) and cross-device (Pass 5), focusing on what matters most for a single page: does it communicate clearly, is the tech solid, and is the content honest? The 70% score flags it as shippable with fixes — the P0s are copy problems, not engineering problems.

---

Skill Boundaries (Frontier Recognition)

This skill excels for:

• Pre-launch validation of any website (static, dynamic, SPA, SSR)
• Generating structured audit reports for client handoff
• Catching the "finishing gap" between technically working and truly ready
• Teams using GUIA stack (Next.js, Framer Motion, GSAP, Lenis) — gotchas are baked in

This skill is NOT ideal for:

• Deep performance engineering — Use Lighthouse, WebPageTest, or Chrome DevTools directly
• Accessibility audit (WCAG compliance) — This covers basics but isn't a full a11y audit. Use axe-core or WAVE.
• Security penetration testing — This checks headers, not vulnerabilities. Use OWASP ZAP.
• Conversion rate optimization — Use landing-page-optimizer for CRO. This skill checks if the CTA exists, not if it converts.
• Design direction — Use web-design-director for choosing the visual direction. This skill validates the execution.

Quality Checkpoints

Before accepting the audit output, verify:

• All 5 passes (or profile-appropriate passes) have been scored
• Total points match (15 + 25 + 25 + 20 + 15 = 100 for full audit)
• Every P0 has a concrete fix (not just "improve this")
• The verdict respects the override rule (1 P0 = NOT READY)
• Strengths section acknowledges genuine wins (not just problems)

---

Iteration Guide

"First pass catches the obvious. Second pass catches the subtle."

Recommended Iteration Pattern

Pass	Focus	Questions to Ask
1st audit	Full sweep	"What's broken? What's missing? What's off-brand?"
2nd audit (after fixes)	P0 verification	"Are the blockers actually fixed? Did fixes introduce regressions?"
3rd audit (pre-launch)	Polish	"Would I be proud to share this URL publicly?"

Useful Follow-up Prompts

• "Re-run Pass 2 only — I fixed the security headers and 404 page."
• "The brand voice feels inconsistent between the homepage and about page. Deep-dive on Pass 4."
• "Score this against the E-commerce profile — we added a checkout flow."
• "Compare this audit to the previous one and show me what improved."

---

Learning Curve

Usage	What You'll Experience
1st audit	You discover gaps you didn't know existed (especially states and mobile)
3rd audit	You start building finishing into your workflow, not just tacking it on
10th audit	Your sites ship with fewer issues because you internalize the checklist

Pro tip: Run Pass 1 (First Impression) at 50% completion, not just at the end. Catching positioning mismatches early saves redesign time.

---

Checklists & Templates

Quick Pre-Launch Checklist (5 min)

## Quick Check (non-negotiable minimums)

- [ ] Site loads in < 4s on mobile
- [ ] CTA visible above the fold
- [ ] No placeholder text anywhere
- [ ] No broken links on main pages
- [ ] HTTPS enforced
- [ ] 404 page exists
- [ ] OG image renders

If ALL checked → safe to soft-launch
If ANY unchecked → run full audit

GUIA Stack Checklist (Next.js + Framer + GSAP)

## GUIA Stack Finishing Checklist

### Next.js Config
- [ ] trailingSlash: true in next.config.js
- [ ] export const metadata on server components (not 'use client')
- [ ] Lazy SDK init (getSupabase(), getStripe()) — not module-level
- [ ] sitemap.ts + robots.ts present

### Animation
- [ ] useGSAP (not useEffect) for GSAP
- [ ] viewport={{ once: true }} on scroll animations
- [ ] prefers-reduced-motion media query
- [ ] Lenis (not Locomotive Scroll)

### CSS
- [ ] Global a{color} doesn't override CTA text — use inline style if needed
- [ ] No horizontal overflow on mobile
- [ ] Touch targets ≥ 44px

### Deploy
- [ ] Env vars set with printf (no trailing newline)
- [ ] Docker healthcheck passes before success report
- [ ] deploy.sh flock prevents concurrent deploys

Red Flags Checklist

## Warning Signs in Your Audit

- [ ] Score is 85+ but something still "feels off" → trust your gut, re-examine Pass 1
- [ ] All passes score well except one pass scores <50% → that pass is a blocker
- [ ] P0 list has more than 3 items → the site isn't ready, period
- [ ] Multiple P2s in the same area → that's actually a P1 (systemic issue)
- [ ] "It works on my machine" for any browser test → test on real devices

---

Integration with Other ClawFu Skills

Skill	Integration Point
web-design-director	Use BEFORE building — determines the emotional quadrant. Pass 1 validates against it.
design-trends-2026	Pass 4 visual consistency can reference current trend alignment
minimalist-image-director	Pass 4 image treatment consistency
landing-page-optimizer	Conversion optimization AFTER this audit passes — CRO assumes the foundation works
landing-page-copy	Pass 4 copy quality — if copy fails, route to this skill for rewrite

Workflow sequence:

web-design-director → [build site] → website-finishing-director → [fix issues] → landing-page-optimizer
(direction)            (code)         (QA/finishing)               (iterate)      (CRO/optimization)

---

References

• Nielsen, Jakob. "10 Usability Heuristics for User Interface Design" (1994, updated 2020) — Foundation for UX completeness checks
• Google. "Web Vitals" — LCP, CLS, INP threshold definitions
• OWASP. "Secure Headers Project" — Security header recommendations
• Gardner, Oli. "101 Landing Page Optimization Tips" (Unbounce) — Pre-launch conversion checklist
• Norman, Don. "Emotional Design" (2004) — Visceral/behavioral/reflective design evaluation
• GUIA Production Memory — .claude/memory/agents/webdesign.md, seo.md, devops.md, gotchas.md

Related Skills

• web-design-director — Visual direction framework (use BEFORE this skill)
• design-trends-2026 — Current visual trends for Pass 4 validation
• minimalist-image-director — AI photography direction for image consistency
• landing-page-optimizer — Conversion optimization (use AFTER this skill)
• ai-video-qa — Sibling QA skill for video content (same scoring philosophy)

---

Skill Metadata

name: website-finishing-director
category: ai-design
subcategory: quality-assurance
version: 1.0
author: GUIA
source_expert: Nielsen Norman Group + Google Web Vitals + OWASP + GUIA Production Memory (8 shipped sites)
source_work: null
difficulty: intermediate
mode: centaur
estimated_value: QA/finishing audit engagement (~1500-3000 EUR per site)
tags: [web-design, qa, audit, finishing, pre-launch, ux, performance, seo, brand, cross-device, scoring]
created: 2026-02-12
updated: 2026-02-12

---

This skill is part of the GUIA Premium Marketing Skills Library — the 201 layer that bridges AI basics and technical implementation.