An interactive, resumable journey that turns a live-but-underperforming website into a ranked backlog of\ndefensible fixes. Across eight phases it diagnoses why visitors don't convert, then fixes usability,\nhierarchy, typography, message, speed, memory, and errors — asking you at each decision point and\nrecording results in docs/. Each change is tied to a reason; the big ones ship as tests.
Diagnose, fix, prove: evidence from real visitors decides what changes, and every fix ships as a\ntestable hypothesis. Order is deliberate — research first, then usability, look, message, speed,\nmemory, and error-tolerance, because each phase's output feeds the next.
\nThis skill sequences the phases, asks the decision questions, and records what you decide. The\nconstituent skills carry the method — invoke them rather than improvising their frameworks.
\n| Phase | \nSkill | \nQuestion it answers | \nArtifact | \n
|---|---|---|---|
| 1 | \ncro-methodology | \nWhy don't visitors convert, and which fix moves the most money? | \nExtends docs/METRICS.md, docs/WEBSITE.md, docs/EXPERIMENTS.md — GATE | \n
| 2 | \nux-heuristics | \nWhere do visitors stumble before they weigh the offer? | \nExtends docs/DESIGN.md, docs/EXPERIMENTS.md | \n
| 3 | \nrefactoring-ui | \nDoes the page look as clear as it reads? | \nExtends docs/DESIGN.md, docs/EXPERIMENTS.md | \n
| 4 | \nweb-typography | \nCan visitors comfortably read the copy? | \nExtends docs/DESIGN.md, docs/EXPERIMENTS.md | \n
| 5 | \nstorybrand-messaging | \nDoes a stranger grasp the offer in five seconds? | \nExtends docs/POSITIONING.md, docs/EXPERIMENTS.md | \n
| 6 | \nhigh-perf-browser | \nDoes the page arrive before patience runs out? | \nExtends docs/METRICS.md, docs/WEBSITE.md, docs/EXPERIMENTS.md | \n
| 7 | \nmade-to-stick | \nIs the idea memorable enough to survive to the decision? | \nExtends docs/POSITIONING.md, docs/EXPERIMENTS.md | \n
| 8 | \ndesign-everyday-things | \nDo the visitors who act ever get stuck? | \nExtends docs/DESIGN.md, docs/EXPERIMENTS.md | \n
docs/IMPROVE-WEBSITE-PLAN.md and every artifact in the Journey Map. If the tracker exists, summarize the journey state in 3-5 lines and ask which phase to enter. Done when the user has confirmed an entry point. A journey with a tracker is resumed, never restarted.docs/IMPROVE-WEBSITE-PLAN.md with every phase statused pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reason. Done when the tracker exists and the user has confirmed the phase plan.in-progress on proceed. Done when the user chose.npx skills add wondelai/skills/<slug> --global. If the user declines, run the phase from its Brief — the minimum viable method. State which mode you are in.done.docs/. Every recommendation lands as a checkbox or a table row with owner and priority. See references/artifact-templates.md when creating a docs/ file for the first time — create it from the full skeleton (all section headings), then fill the sections your phase names.Ask these before creating the tracker:
\nSkip heuristics: skip Phase 4 if body text already meets 16px / ~66ch / 1.5-1.7 line height; skip Phase 6\nif Core Web Vitals are already green (but triage a fast LCP fix first if the page barely renders); skip\nPhase 5 or 7 if messaging is already validated and clear. Never skip Phase 1 — it aims every other phase.
\nThen create docs/IMPROVE-WEBSITE-PLAN.md from the template and confirm the plan. Done when\ndocs/IMPROVE-WEBSITE-PLAN.md exists with every phase statused and the user has confirmed the plan.
Purpose: Find where and why the page loses visitors before any pixel changes. Phases 2-8 may only\nfix problems traceable to a Phase 1 finding.
\nBrief (fallback): Don't guess — discover. Map the funnel for blocked arteries (underperforming\nhigh-traffic stages) and missing links (stages that don't exist). Name the ONE action each page drives.\nBuild the O/CO table for the Big 5 (Trust, Price, Fit, Timing, Effort) in the customer's words, each counter at friction. Rank by ICE.
\nInvoke: Use the cro-methodology skill with the target page/flow, the ONE action, and real visitor input. Ask\nfor a funnel map, an O/CO table, missing persuasion assets, and an ICE-ranked hypothesis list.
Decide with the user: (1) Confirm the ONE action per page; cut competing CTAs. (2) Attack the\nhighest-money blocked artery or a missing link first? (3) Low traffic: accept qualitative + heuristic evidence.
\nArtifact: Extend docs/METRICS.md ## Funnel and ## Stage & One Metric That Matters; docs/WEBSITE.md\n## Conversion Elements and ## Audit Findings (issue | severity 0-4 | fix | status); docs/EXPERIMENTS.md\n## Experiment Backlog (ICE-ranked). Update the tracker.
Done when: the funnel is mapped, the ONE action set per page, every researched objection has a\ncounter, the backlog is ICE-ranked, and Phase 1 shows done — only then are Phases 2-8 unlocked.
\nPurpose: Find where visitors stumble — the friction that makes them quit before they weigh the offer.
\nBrief (fallback): Don't make me think. Users scan, satisfice, and muddle through. Run a heuristic\nevaluation against Nielsen's 10 heuristics; rate each issue 0-4 by frequency, impact, and persistence\nso catastrophes outrank cosmetics. Apply the Trunk Test to interior pages (what site, page, options,\nwhere am I, where's search?). Cut half the words, then half again; kill mystery-meat icon navigation.
\nInvoke: Use the ux-heuristics skill with the page/flow and the Phase 1 findings. Ask for a severity-rated\nevaluation, a Trunk Test result per key page, and rewritten error and label copy.
Decide with the user: Which severity-4 and -3 issues get fixed now versus backlogged? Confirm fixes\nrun by severity, not by ease.
\nArtifact: Extend docs/DESIGN.md ## UX Audit Findings (issue | heuristic | severity 0-4 | fix |\nstatus); append each fix to docs/EXPERIMENTS.md ## Experiment Backlog with ICE. Update the tracker.
Done when: every issue carries a 0-4 severity, the Trunk Test passes on each key page or is logged,\nand severity-4 issues have an owner.
\nPurpose: Make the page look as clear as it reads — one obvious focal point, not everything competing.
\nBrief (fallback): Great UI is systems, not talent. Design in grayscale first: establish hierarchy\nwith size, weight, and contrast before any color — combine levers, don't multiply (all three only for\nthe hero element). Enforce a spacing scale (4/8/16/24/32/48/64) where gaps between groups exceed gaps\nwithin them. Constrain text to 45-75 chars. Add color last: 5-9 shades per hue, grays tinted, not #000.
\nInvoke: Use the refactoring-ui skill with the page, the Phase 2 findings, and the CSS framework. Ask for a\ngrayscale hierarchy pass, spacing-scale corrections, a systematic palette, and exact class/CSS changes.
Decide with the user: Fix within the current design system or introduce new tokens? Confirm color\nwork waits until the grayscale layout reads.
\nArtifact: Extend docs/DESIGN.md ## Tokens (spacing scale · palette shades · shadows) and ## Components\n(component | decision | status); append fixes to docs/EXPERIMENTS.md ## Experiment Backlog. Update the tracker.
Done when: the layout reads in grayscale, the spacing scale is applied, one primary CTA dominates,\nand the token decisions are recorded.
\nPurpose: Fix the measurements that decide whether visitors can comfortably read the copy.
\nBrief (fallback): Size, line length, and line height matter more than the typeface. Fix three: body\n≥16px (18px for reading-heavy pages); line length 45-75 chars (~66 sweet spot) via ch or max-width; line\nheight 1.5-1.7 body, 1.1-1.25 headings. Build a modular scale; load fonts with swap, preload one, subset, <200KB.
\nInvoke: Use the web-typography skill with the reading-heavy templates and the DESIGN.md type decisions. Ask for\ncorrected CSS with a fluid clamp() scale and a font-loading plan.
Decide with the user: Keep the current typefaces or repair the pairing? Confirm the font-loading\nbudget (<200KB) that Phase 6 will verify.
\nArtifact: Extend docs/DESIGN.md ## Typography (typefaces · scale · measure · line height · loading\nstrategy); append fixes to docs/EXPERIMENTS.md ## Experiment Backlog. Update the tracker.
Done when: body size, measure, and line height meet targets on the key templates, the scale is\ndefined, and the loading strategy is recorded.
\nPurpose: Make a stranger understand what you do and why it matters in five seconds.
\nBrief (fallback): The customer is the hero; your brand is the guide (Yoda, not Luke). Run SB7: a\nCharacter wanting one thing, a Problem at three levels (external / internal / philosophical — most brands\nmiss the internal), a Guide with empathy and authority, a Plan of 3-4 safe steps, one Direct plus one\nTransitional CTA, and Failure/Success stakes. Write the \"We help [X] who struggle with [Y] to [Z]\" one-liner.
\nInvoke: Use the storybrand-messaging skill with the current copy, POSITIONING.md if it exists, and the internal\nproblems from the Phase 1 objections. Ask for above-the-fold rewrites, a BrandScript, and one-liners.
Decide with the user: Which one-liner passes the repeat-after-one-hearing test? Confirm the internal\nproblem the copy must name.
\nArtifact: Extend docs/POSITIONING.md ## Brand Script (StoryBrand), ## One-Liner, and ## Key Messages\n(surface | message | status); append copy tests to docs/EXPERIMENTS.md ## Experiment Backlog. Update the tracker.
Done when: the one-liner is chosen, above-the-fold copy names the internal problem with one Direct\nand one Transitional CTA, and the messages are logged by surface.
\nPurpose: Ensure a slow load doesn't waste the clarity work — the page must arrive before patience runs out.
\nBrief (fallback): Latency, not bandwidth, is the bottleneck — cut round trips. Target Core Web Vitals:\nLCP <2.5s, INP <200ms, CLS <0.1, TTFB <800ms. Preload the LCP hero element; reserve space (width/height or\naspect-ratio) to stop CLS; defer non-critical JS; inline critical CSS; cache immutable; on HTTP/2 undo sharding.
\nInvoke: Use the high-perf-browser skill with the page URL and a performance trace or Lighthouse run if\navailable. Ask for the LCP element, layout-shift sources, blocking resources, and a prioritized fix list.
Decide with the user: If the page barely renders, triage a fast LCP fix before the rest? Which fixes\nship now versus need a test?
\nArtifact: Extend docs/METRICS.md ## Baselines & Targets (CWV metric | baseline | target | miss response)\nand docs/WEBSITE.md ## Audit Findings; append fixes to docs/EXPERIMENTS.md ## Experiment Backlog. Update the tracker.
Done when: CWV baselines and targets are recorded, every fix has an owner, and any HTTP/1.1\nworkaround still active on HTTP/2 is flagged.
\nPurpose: Make the offer memorable enough to survive the gap between the visit and the decision.
\nBrief (fallback): Beat the Curse of Knowledge. Score key messages on SUCCESs (Simple, Unexpected,\nConcrete, Credible, Emotional, Stories). Concrete: replace abstraction with sensory specifics (\"order\nin 30 minutes, still hot\"; \"save 16 hours a month\"). Simple: the Commander's Intent — the one thing\nvisitors must remember. Make statistics human-scale (Sinatra Test); prefer specific over round figures.
\nInvoke: Use the made-to-stick skill with the headline, value prop, and key features plus the Phase 5 one-liner.\nAsk for a SUCCESs score per message with concrete rewrites, the Commander's Intent, and a human-scale stat.
Decide with the user: What is the single Commander's Intent message? Which abstractions become which\nconcrete specifics?
\nArtifact: Extend docs/POSITIONING.md ## Key Messages with SUCCESs scores and concrete rewrites; append\ncopy tests to docs/EXPERIMENTS.md ## Experiment Backlog. Update the tracker.
Done when: each key message has a SUCCESs score and a concrete rewrite, the Commander's Intent is\nnamed, and the key statistic is human-scale.
\nPurpose: Protect the visitors who decided to act — make the wrong action impossible, not just warned against.
\nBrief (fallback): There is no human error, only bad design. Bridge two gulfs: Execution (\"how do I\ndo this?\") with clear signifiers (pressable buttons, editable fields) and constraints (date picker over\nfree text, Submit disabled until valid); Evaluation (\"what happened?\") with feedback within 0.1s. Fix\nslips with undo and separated destructive actions; error messages say what went wrong and how to fix, no blame.
\nInvoke: Use the design-everyday-things skill with the conversion-critical flows (signup, checkout, account\nsetup). Ask for weak signifiers, where constraints make errors impossible, feedback gaps, and message rewrites.
Decide with the user: Where should a constraint replace an error message? Where should undo replace\nan are-you-sure confirmation?
\nArtifact: Extend docs/DESIGN.md ## UX Audit Findings (issue | heuristic = Norman gulf | severity 0-4 |\nfix | status); append fixes to docs/EXPERIMENTS.md ## Experiment Backlog. Update the tracker.
Done when: each conversion flow has signifier/constraint/feedback fixes logged, error messages meet\nthe checklist, and destructive actions offer undo.
\n| Skill | \nAdd when | \nArtifact | \n
|---|---|---|
| influence-psychology | \nobjection points need ethical persuasion assets (social proof, authority, real scarcity) | \nExtends docs/WEBSITE.md ## Conversion Elements | \n
| microinteractions | \ninteractions feel dead or unresponsive | \nExtends docs/DESIGN.md ## Microinteraction Inventory | \n
| top-design | \nthe redesign warrants a signature moment, not just fixes | \nExtends docs/DESIGN.md ## Design Direction | \n
| steve-jobs-design-review | \nbefore relaunch, for a brutal end-to-end verdict | \nExtends docs/WEBSITE.md ## Audit Findings | \n
Optional phases follow the same operating rules — load and use each listed skill exactly as a core phase would; insert where the Add-when condition first becomes true.
\n| Mistake | \nFix | \n
|---|---|
| Redesigning before researching — a prettier page on the same unaddressed objections converts identically. | \nRun Phase 1 (cro-methodology) first; no visual or copy change ships without a Phase 1 finding behind it. | \n
| Testing meek tweaks (button colors, font nudges) too small to ever reach significance. | \nUse ICE scoring to pick bold changes; ask \"could this 10x results?\" before you test it (cro-methodology). | \n
| Adding color before the grayscale layout works. | \nGrayscale first, color last; if the page fails desaturated, no palette saves it (refactoring-ui). | \n
| Optimizing speed in a vacuum, ahead of the clarity work. | \nSequence speed after clarity (Phase 6); exception — triage a fast LCP fix if the page barely renders (high-perf-browser). | \n
| Treating \"user error\" as the user's fault and adding more warnings. | \nPrevent errors with constraints and forgive them with undo, not dialogs (design-everyday-things). | \n
| Confusing clarity with stickiness — a clear message can be instantly forgotten. | \nRun both Phase 5 and Phase 7; StoryBrand makes you understood, Made to Stick makes you remembered. | \n
Exit checklist:
\ndocs/IMPROVE-WEBSITE-PLAN.md is done or skipped: reason.## Experiment Cards with a pre-committed metric.Close the loop by re-invoking cro-methodology to design the bold tests for the high-ICE backlog: size\nthe sample up front, run one full business cycle, require 95% confidence, never peek early — then promote\nthem from ## Experiment Backlog to ## Experiment Cards, and close the tracker with Next Actions carried into the artifacts.
Forward routing: when the site converts and needs more qualified traffic, continue with the grow-website skill.\nWhen the friction lives in the product, not the marketing site, continue with the improve-app skill.