| 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
- 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 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
- Fix security headers (P0) — 15 min task, high security impact
- Create custom 404 page (P0) — maintain brand experience on dead links
- 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
- Clarify the hero — visitors need to understand the product category in 3 seconds
- Remove fake testimonials — empty space is better than fake social proof
- 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:
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
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
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.
