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."

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:

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

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

Verdict

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

Issues

P0 — Blockers

next.config.js

headers()

/app/not-found.tsx

P1 — Important

prefers-reduced-motion

globals.css

@media (prefers-reduced-motion: reduce)

layout.tsx

P2 — Nice-to-have

HomeContent.tsx

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

Verdict

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

Issues

P0 — Blockers

P1 — Important

P2 — Nice-to-have

<head>

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

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

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

• 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.