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

Jump to install

Repository: TuYv/ccpm
Last source activity: June 28, 2026 at 00:16
Detected SKILL.md language: English
Stars: 1
Forks: 2

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/TuYv/ccpm --skill website-finishing-director

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

2 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

ad-account-auditor

Use when auditing a paid ad account for incremental contribution, wasted spend, or measurement integrity before scaling; runs a typed 20-item ROAS profile with verified vetoes and a SHIP/FIX/BLOCK/UNDECIDED gate on own exported data. Not for campaign structure design — use campaign-architect; not for creative production — use ad-creative-builder. 付费广告账户审计/ROAS评分

2026-08-14

ad-creative-builder

Use when the user asks to "write ad copy", "generate RSA headlines", or "build ad creative at volume"; produces ad units — RSA headlines/descriptions, hooks, and an angle matrix — message-matched to the destination landing page. Not for scoring an ad account — use ad-account-auditor; not for the post-click page — use landing-optimizer; not for organic articles — use content-writer. 广告创意/广告文案/RSA标题

2026-08-14

ad-test-designer

Use when the user asks to "design an A/B test", "set up a creative/landing test", "run an incrementality test", or "is this result statistically and practically material?"; produces a hypothesis, variant matrix, sample-size/duration/power plan, and a documented effect/uncertainty read from own exported results. It applies only a precommitted owner-approved action rule; the statistical helper never chooses a business action. Not for producing variants — use ad-creative-builder; not for reading back one shipped change — use paid-measurement-loop. 广告AB测试设计/实验设计/显著性判定/增效测试

2026-08-14

View all from this repository

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.