@event4u/agent-config 14.9.0 → 14.11.0

package/dist/agent-src/skills/brand/SKILL.md

@@ -13,6 +13,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/brand-asset-generation/SKILL.md

@@ -13,6 +13,9 @@ trust:
   level: experimental
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/brand-audit/SKILL.md

@@ -13,6 +13,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/brand-identity/SKILL.md

@@ -13,6 +13,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/brand-strategy/SKILL.md

@@ -13,6 +13,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/brand-to-tokens/SKILL.md

@@ -12,6 +12,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/check-refs/SKILL.md

@@ -3,6 +3,9 @@ model_tier: medium
 name: check-refs
 description: "Use when verifying cross-references between skills, rules, commands, guidelines, and context documents are not broken after edits, renames, or deletions."
 domain: process
+scope:
+  write: []
+  verification_reason: "the declared command is a read-only checker: grep -c 'writeFileSync|mkdirSync|appendFileSync' src/scripts/check_references.ts returns 2 and both sit inside its own --self-test tmpdir. Absence of a write is not something a command can prove, so the derivation is stated instead."
 execution:
   type: assisted
   handler: shell

package/dist/agent-src/skills/code-refactoring/SKILL.md

@@ -1,7 +1,7 @@
 ---
 model_tier: high
 name: code-refactoring
-description: "Use when the user says 'refactor this', 'rename class', or 'move method'. Safely refactors code in any language — finds all callers, updates downstream dependencies, verifies via quality tools."
+description: "When the user says 'refactor this', 'rename class', or 'move method'. Safely refactors code in any language — finds all callers, updates downstream dependencies, verifies via quality tools."
 domain: engineering
 workspaces:
   - engineering

package/dist/agent-src/skills/code-review/SKILL.md

@@ -109,6 +109,17 @@ coverage reads as full coverage.
   shuffled file order (deterministic seed per session, logged for replay) so
   a fixed order does not correlate their blind spots. Single-reviewer → no shuffle.
 
+**MEASURED, and the result is a null — 2026-08-23.** This control is prose and nothing in
+the package implements it. That is now true for a recorded reason rather than by
+omission: the pre-registered question — does rotating reviewer order change the finding set
+on a frozen corpus, by more than 15 % — **cannot be answered from the corpus that exists**.
+`agents/evidence/reviews/` holds 123 findings artefacts, and none of them records the file
+order it was produced under, so the counterfactual is not recoverable; re-running reviewers
+produces fresh judgements in which ordering is confounded with run-to-run variance. Full
+null, with its reopening condition: `agents/evidence/review-rotation-prereg-and-null.md`.
+A reduced-power crossover was considered and refused — it would risk a false closure on a
+control this paragraph still specifies.
+
 ## Before creating a PR
 
 1. When `quality.local_auto_run: true`: run the project's quality pipeline (see the stack carve-out for the exact commands — PHP: `quality-tools`) and tests via the project's runner (`make test`, `npm test`, `pytest`, `go test ./...`, or the project's wrapper script). Under the default (`false` / missing): skip both — remote CI on the PR is the gate.

package/dist/agent-src/skills/command-routing/SKILL.md

@@ -3,6 +3,9 @@ model_tier: inherit
 name: command-routing
 description: "Use when the user invokes a slash command like /create-pr, /commit, /fix-ci, or pastes command file content — routes to the right command with context inference and GitHub API patterns."
 domain: process
+scope:
+  write: []
+  verification_reason: "execution.handler is internal, so this skill spawns no subprocess — writes happen through the agent's declared allowed_tools. No command can prove a scope the skill never executes."
 execution:
   type: assisted
   handler: internal
@@ -23,6 +26,9 @@ Triggered when user invokes a slash command. The `slash-command-routing-policy`
 
 1. **Match command** — Find the command file in `.augment/commands/` or `agents/overrides/commands/`.
 2. **Infer inputs** — Before asking the user, try to infer values (see table below).
+2b. **List a matching playbook in the preamble.** If a playbook's `task` matches the
+   command's name, name it before the steps run — it is this repository's own procedure and
+   outranks a shipped one ([`playbook-precedence`](../../rules/playbook-precedence.md)).
 3. **Execute steps** — Follow the command steps in exact order.
 4. **Verify output** — Confirm expected result was produced (commit, PR, file change, etc.).
 

package/dist/agent-src/skills/condense-memory/SKILL.md

@@ -1,8 +1,11 @@
 ---
 model_tier: inherit
 name: condense-memory
-description: "Use when shrinking always-loaded memory files (AGENTS.md, CLAUDE.md, .cursorrules) exceeding ~150 lines or ~4,000 chars — telegraph grammar, refuses sensitive paths, .original.md round-trip."
+description: "When shrinking always-loaded memory files (AGENTS.md, CLAUDE.md, .cursorrules) exceeding ~150 lines or ~4,000 chars — telegraph grammar, refuses sensitive paths, .original.md round-trip."
 domain: process
+scope:
+  write: []
+  verification_reason: "execution.handler is internal, so this skill spawns no subprocess — writes happen through the agent's declared allowed_tools. No command can prove a scope the skill never executes."
 execution:
   type: assisted
   handler: internal

package/dist/agent-src/skills/context-authoring/SKILL.md

@@ -39,7 +39,7 @@ Do NOT use when:
 |---|---|---|
 | `auth-model.md` | Roles, permission model, impersonation, known exceptions | `authz-review`, `judge-security-auditor`, `threat-modeling` |
 | `tenant-boundaries.md` | Tenancy type, scope propagation, known cross-tenant paths | `multi-tenant-boundary-review`, `blast-radius-analyzer`, `judge-security-auditor` |
-| `data-sensitivity.md` | Field classification, masking rules, log-safe types | `data-exposure-review`, `data-flow-mapper`, logging reviewers |
+| `data-sensitivity.md` | Field classification, masking rules, log-safe types | `data-flow-mapper`, logging reviewers |
 | `deployment-order.md` | Migration strategy, feature flags, rollback plan | `migration-safety`, `judge-bug-hunter`, release reviewers |
 | `observability.md` | Error tracking, log channels, metrics, known alerts | deploy reviewers, `bug-analyzer`, incident mode |
 

package/dist/agent-src/skills/conventional-commits-writing/SKILL.md

@@ -1,8 +1,11 @@
 ---
 model_tier: medium
 name: conventional-commits-writing
-description: "Use when writing commit messages or squash-merge titles — `feat:`, `fix:`, `chore:`, scopes, breaking changes — even when the user just says 'commit this' without naming Conventional Commits."
+description: "When writing commit messages or squash-merge titles — `feat:`, `fix:`, `chore:`, scopes, breaking changes — even when the user just says 'commit this' without naming Conventional Commits."
 domain: process
+scope:
+  write: []
+  verification_reason: "execution.handler is internal, so this skill spawns no subprocess — writes happen through the agent's declared allowed_tools. No command can prove a scope the skill never executes."
 execution:
   type: assisted
   handler: internal

package/dist/agent-src/skills/copilot-agents-optimization/SKILL.md

@@ -3,6 +3,9 @@ model_tier: medium
 name: copilot-agents-optimization
 description: "Use when optimizing AGENTS.md or copilot-instructions.md — deduplicates against .augment/ content, enforces line budgets, and focuses each file on its audience."
 domain: process
+scope:
+  write: []
+  verification_reason: "execution.handler is internal, so this skill spawns no subprocess — writes happen through the agent's declared allowed_tools. No command can prove a scope the skill never executes."
 execution:
   type: assisted
   handler: internal
@@ -37,6 +40,13 @@ Before changing anything, read and understand:
 1. **Read `AGENTS.md`** — current content, line count, what's duplicated vs. unique.
 2. **Read `.github/copilot-instructions.md`** — same analysis.
 3. **Scan `.augment/`** — which skills, rules, and guidelines already cover topics from the files above.
+3b. **Scan the playbooks too, not only `.augment/`.** A `packages/<n>/AGENTS.md` may
+   duplicate a **playbook** rather than a shipped rule, and dedup against `.augment/` alone
+   misses it entirely — the content is not in `.augment/` at all. Run
+   `findRestatedSteps` (`src/scripts/derive_playbooks.ts`) over each workspace file: a line
+   carrying a playbook's `invokes` id outside a link is a restatement to replace with a
+   pointer. The same id **inside** a link label is the shape the contract wants — see
+   [`agents-md-thin-root` § Workspace files](../agents-md-thin-root/SKILL.md).
 4. **Identify duplication** — what content exists in both AGENTS.md and `.augment/`?
 
 Only after this analysis, proceed with optimization.

package/dist/agent-src/skills/corpus-grounding/SKILL.md

@@ -11,6 +11,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/design-intelligence/SKILL.md

@@ -14,6 +14,9 @@ trust:
   level: professional
 install:
   removable: true
+scope:
+  write: []
+  verification_reason: "execution declares no handler, so this skill runs nothing of its own — every write is the calling agent's, under the rules that govern it. No command can prove a scope the skill never executes."
 execution:
   type: manual
 ---

package/dist/agent-src/skills/design-intelligence/data/landing.csv

@@ -1,35 +1,36 @@
-No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
-1,Hero + Features + CTA,"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
-2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
-3,Product Demo + Features,"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
-4,Minimal Single Column,"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
-5,Funnel (3-Step Conversion),"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
-6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
-7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
-8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
-9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
-10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
-11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
-12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
-13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
-14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
-15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
-16,FAQ/Documentation Landing,"faq, documentation, help, support, questions, faq/documentation, knowledge base","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
-17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation, immersive/interactive experience","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
-18,Event/Conference Landing,"event, conference, meetup, registration, schedule, hero-centric design, hero-centric","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
-19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, social-proof-focused, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
-20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
-21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
-22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',"Search: High contrast. Categories: Visual icons. Trust: Blue/Green.","Search autocomplete animation, map hover pins, card carousel","Search bar is the CTA. Reduce friction to search. Popular searches suggestions."
-23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,"Minimalist. Paper-like background. Text focus. Accent color for Subscribe.","Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X, 000 readers'. Read sample link."
-24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,"Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.","Countdown timer, speaker avatar float, urgent ticker","Limited seats logic. 'Live' indicator. Auto-fill timezone."
-25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),"Corporate: Navy/Grey. High integrity. Conservative accents.","Slow video background, logo carousel, tab switching for industries","Path selection (I am a...). Mega menu navigation. Trust signals prominent."
-26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,"Neutral background (let work shine). Text: Black/White. Accent: Minimal.","Image lazy load reveal, hover overlay info, lightbox view","Visuals first. Filter by category. Fast loading essential."
-27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer",Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible."
-28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase, feature-rich showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA",Floating Action Button or Bottom of Grid,"Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack."
-29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product, interactive product demo","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase",Inside Configurator UI + Sticky Bottom Bar,"Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart."
-30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start."
-31,Feature-Rich Showcase,"feature-rich, feature-rich showcase, features, showcase, product showcase","1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. CTA",Hero (sticky) + After features + Bottom,Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.,"Feature card hover lift, scroll reveal, icon micro-interactions","Clear feature hierarchy. One key message per card. Strong CTA repetition."
-32,Hero-Centric Design,"hero-centric, hero-centric design, hero-first, hero above fold","1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA",Hero dominant (center/bottom) + Sticky nav CTA,Hero: High-impact visual. Minimal text. CTA 7:1 contrast.,"Hero parallax or video, CTA pulse on scroll, minimal chrome","One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy."
-33,Trust & Authority + Conversion,"trust & authority, trust, authority, conversion, credibility, enterprise","1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. Clear CTA path",Contact Sales / Get Quote (primary) + Nav,"Navy/Grey corporate. Trust blue. Accent for CTA only.","Logo carousel, stat counters, testimonial strip","Security badges. Case studies. Transparent pricing. Low-friction form."
-34,Real-Time / Operations Landing,"real-time, real-time monitor, operations, dashboard, telemetry, live data","1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact)","Primary CTA in nav + After metrics",Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.,"Live data ticker, status pulse, minimal decoration","For ops/security/iot products. Demo or sandbox link. Trust signals."
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
+1,Hero + Features + CTA,"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
+4,Minimal Single Column,"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
+5,Funnel (3-Step Conversion),"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
+9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
+13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
+15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions, faq/documentation, knowledge base","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation, immersive/interactive experience","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule, hero-centric design, hero-centric","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, social-proof-focused, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
+20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
+21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
+22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',Search: High contrast. Categories: Visual icons. Trust: Blue/Green.,"Search autocomplete animation, map hover pins, card carousel",Search bar is the CTA. Reduce friction to search. Popular searches suggestions.
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,Minimalist. Paper-like background. Text focus. Accent color for Subscribe.,"Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X, 000 readers'. Read sample link."
+24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.,"Countdown timer, speaker avatar float, urgent ticker",Limited seats logic. 'Live' indicator. Auto-fill timezone.
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),Corporate: Navy/Grey. High integrity. Conservative accents.,"Slow video background, logo carousel, tab switching for industries",Path selection (I am a...). Mega menu navigation. Trust signals prominent.
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,Neutral background (let work shine). Text: Black/White. Accent: Minimal.,"Image lazy load reveal, hover overlay info, lightbox view",Visuals first. Filter by category. Fast loading essential.
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer",Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator",Immersive product discovery. High engagement. Keep navigation visible.
+28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase, feature-rich showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA",Floating Action Button or Bottom of Grid,Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.,"Hover card scale (1.02), video inside cards, tilt effect, staggered reveal",Scannable value props. High information density without clutter. Mobile stack.
+29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product, interactive product demo","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase",Inside Configurator UI + Sticky Bottom Bar,Neutral studio background. Product: Realistic materials. UI: Minimal overlay.,"Real-time rendering, material swap animation, camera rotate/zoom, light reflection",Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
+30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop",Input Field (Hero) + 'Try it' Buttons,Adaptive to user input. Dark mode for compute feel. Neon accents.,"Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start."
+31,Feature-Rich Showcase,"feature-rich, feature-rich showcase, features, showcase, product showcase","1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. CTA",Hero (sticky) + After features + Bottom,Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.,"Feature card hover lift, scroll reveal, icon micro-interactions",Clear feature hierarchy. One key message per card. Strong CTA repetition.
+32,Hero-Centric Design,"hero-centric, hero-centric design, hero-first, hero above fold","1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA",Hero dominant (center/bottom) + Sticky nav CTA,Hero: High-impact visual. Minimal text. CTA 7:1 contrast.,"Hero parallax or video, CTA pulse on scroll, minimal chrome",One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy.
+33,Trust & Authority + Conversion,"trust & authority, trust, authority, conversion, credibility, enterprise","1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. Clear CTA path",Contact Sales / Get Quote (primary) + Nav,Navy/Grey corporate. Trust blue. Accent for CTA only.,"Logo carousel, stat counters, testimonial strip",Security badges. Case studies. Transparent pricing. Low-friction form.
+34,Real-Time / Operations Landing,"real-time, real-time monitor, operations, dashboard, telemetry, live data","1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact)",Primary CTA in nav + After metrics,Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.,"Live data ticker, status pulse, minimal decoration",For ops/security/iot products. Demo or sandbox link. Trust signals.
+35,Scroll-Driven Narrative,"scrollytelling, scroll-driven, scroll narrative, story beats, beat ledger, pinned scroll, scrub, narrative landing","1. Hero (static, readable before any scroll), 2. Beat 1 pinned reveal, 3. Beat 2 transform/scrub, 4. Beat 3 payoff, 5. CTA (reachable without scrubbing back)",Hero (static) + Post-payoff,"One palette across all beats — a beat that changes palette reads as a different site. Contrast held at the beat's own background, not the hero's",Pinned section with scrubbed progress; opacity/transform only (never layout-affecting properties); every beat readable at its resting state with motion disabled,"The CTA must be reachable without completing the narrative. Author a story-beat ledger first (wireframe/references/story-beat-ledger.schema.json) — beats are content, so they are decided before layout. prefers-reduced-motion presents each beat at its resting state; it never sets animation: none, which leaves the story untold"

package/dist/agent-src/skills/design-intelligence/data/stacks/threejs.csv

@@ -52,3 +52,4 @@ Accessibility,Canvas aria-label,Add role='img' and a descriptive aria-label to r
 Production,Bundler Stack for Production,For production use Three.js via npm plus Vite. You get full tree-shaking reduced bundle size access to the complete examples/jsm library including OrbitControls GLTFLoader and EffectComposer and TypeScript support.,Use npm install three plus Vite or Webpack for any production client-facing project,Serve raw CDN script tags in a production application that needs tree-shaking or TypeScript,"npm install three gsap // then in your JS: import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';","<!-- In a Vite/React production build: --> <script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script> // no tree-shaking — entire Three.js ships",Medium,https://threejs.org/docs/#manual/en/introduction/Installation
 Production,GLTFLoader with scene traverse,Load 3D models using GLTFLoader and traverse gltf.scene to configure castShadow receiveShadow and material overrides on all child Mesh nodes. Calling scene.add(gltf.scene) alone silently skips all shadow and material configuration.,Use GLTFLoader and traverse the entire gltf.scene graph to set up shadows and materials on every Mesh child,Load a GLTF model and pass gltf.scene directly to scene.add without traversing child meshes,"import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load('model.glb', gltf => { gltf.scene.traverse(child => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(gltf.scene); });","loader.load('model.glb', gltf => { scene.add(gltf.scene); // shadows and material setup silently skipped on all children });",Medium,https://threejs.org/docs/#examples/en/loaders/GLTFLoader
 Production,LOD for Distance-Based Detail,Use THREE.LOD to automatically swap high-detail and low-detail geometry as objects move closer or farther from the camera. This maintains frame rate in scenes with many objects spread across a large depth range.,Use THREE.LOD to reduce triangle count on distant objects automatically,Render the same high-polygon geometry for every object regardless of its distance from the camera,"const lod = new THREE.LOD(); lod.addLevel(highDetailMesh, 0); // used when < 15 units away lod.addLevel(medDetailMesh, 15); // 15–50 units lod.addLevel(lowDetailMesh, 50); // 50+ units scene.add(lod);","scene.add(highDetailMesh); // 64k-triangle mesh rendered at full cost whether 1 unit or 100 units from camera",Medium,https://threejs.org/docs/#api/en/objects/LOD
+Production,Subject Before Technique,"A 3D surface with no decided subject becomes the default one: floating abstract shapes, a gradient mesh, a glowing orb. Decide what the scene is ABOUT before choosing the renderer. The detectable half is the brief's own wording (slop rule CP6, copy engine) - a CSS or WebGL engine cannot see subject matter, because the same transform moves a product and an orb.","Name the subject in the brief and author a story-beat ledger for it before any renderer call; keep the renderer as an axis of the fe-design mode table, not a second owner",Open with a technique ('let's do a Three.js hero') and let the subject default to abstract shapes nobody chose,"// brief: 'the assembled chassis rotates, one component highlighted per beat' -> subject decided, renderer serves it","// brief: 'a Three.js hero with floating abstract shapes and a gradient mesh' -> technique decided, subject defaulted",Important,https://threejs.org/manual/#en/fundamentals

package/dist/agent-src/skills/design-review/SKILL.md

@@ -1,7 +1,7 @@
 ---
 model_tier: high
 name: design-review
-description: "Use when the user says \"review the design\", \"check the UI\", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more."
+description: "When the user says \"review the design\", \"check the UI\", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility and more."
 domain: quality
 workspaces:
   - engineering
@@ -72,20 +72,40 @@ A **live preview URL** is required for testing.
   structural open/close ~200–500 ms) — the timing source of truth; do not restate
   a competing band set here. Every animated transition also carries a
   `prefers-reduced-motion` alternative (M5 / Q4).
+- **Reduced motion is a presentation, not a suppression.** Check what the
+  surface shows *instead of* the motion, not that a
+  `prefers-reduced-motion` block exists — the block is greppable and says
+  nothing. A reveal presents its content at the final state; a scrubbed
+  sequence presents each beat at its resting state; only decoration is
+  correctly removed. `animation: none` over a reveal leaves the content
+  invisible. Verdict table:
+  [`accessibility-auditor`](../accessibility-auditor/SKILL.md) § 2.
 - Test keyboard navigation (Tab, Enter, Escape, Arrow keys).
 - Verify form submission and error recovery.
 
 ### Phase 2: Responsiveness
 
-Test at three viewports:
+Test at four viewports:
 
 | Viewport | Width | Device |
 |---|---|---|
 | Desktop | 1440px | Standard monitor |
 | Tablet | 768px | iPad |
 | Mobile | 375px | iPhone SE |
+| Floor | 320px | Narrowest supported — the asserted floor |
+
+The 320px row is the floor [`fe-design`](../fe-design/SKILL.md) already asserts
+("every layout must work on 320px width"). It is in this table because an
+asserted floor outside the measured set is an assertion nobody checks; 375px
+passing says nothing about 320px, which is where a two-column grid or a fixed
+`min-width` actually breaks.
 
 - Take screenshots at each viewport.
+- **Scroll-driven surface** — read the `scroll_evidence` artefact
+  ([`references/verification-automation.md`](references/verification-automation.md)
+  § Scroll evidence) and report every sample whose asserted `state` and
+  `observed` disagree as a finding. An empty `samples` array is a recorded null,
+  not a pass.
 - Check layout shifts, overflow, and content reflow.
 - Verify touch targets are at least 44x44px on mobile.
 
@@ -188,6 +208,64 @@ Load the reference file whose sections the review needs — never all of them by
 - The model tends to suggest accessibility improvements that break the existing design system.
 - "Best practice" is not always the right choice — sometimes "good enough" ships faster.
 
+## Read the authority object — the review is scoped by it
+
+Read the resolved `ui_authority`
+([contract](../../../docs/contracts/ui-authority.md)) before reviewing. Three
+fields change what a finding *means*:
+
+- **`surface_mode`** sets the density, hierarchy and expressiveness a reviewer
+  should expect. A dense `operate` screen is not "cramped" and a generous
+  `persuade` hero is not "wasteful".
+- **`change_intent`** decides whether a visual-world difference is a finding at
+  all. Under `preserve` a palette or type-family delta is a **defect**; under
+  `redesign` it is the point.
+- **`reference_maturity`** decides whether a difference from the reference is a
+  defect. A `wireframe` declares structure, so reproducing its grey boxes is
+  over-fidelity, not fidelity.
+
+```
+QUALITY FLOORS DO NOT VARY BY SURFACE MODE.
+THE Q1-Q6 FLOOR SET IS IDENTICAL IN ALL FOUR MODES.
+```
+
+Do not re-derive any of these fields here. This skill is a declared consumer of
+that object, and the contract's consumer table names it.
+
+## Review independence — two passes, isolated, in this order
+
+```
+PASS A (JUDGEMENT) RUNS BEFORE PASS B (DETECTOR + RENDER), AND IN ISOLATION.
+INLINE EXECUTION IS PERMITTED ONLY WHERE NO SPAWN PRIMITIVE EXISTS, AND THEN
+LINE 1 READS `DEGRADED: single-context (<reason>)`.
+THERE IS NO THIRD STATE.
+```
+
+**Pass A — judgement.** Read the surface and form a verdict without the
+detector output and without the render artefact. Emit an assessment id.
+
+**Pass B — detector plus render.** Run `lint_design_slop` and read the
+`ui:render` manifest. Emit a second assessment id.
+
+**Order is the whole point.** A judgement formed after reading a detector's
+findings is anchored to them: the reviewer confirms the list instead of looking
+at the surface. Running A first is what keeps B's findings additive rather than
+directive — the same reason
+[`evaluator-independence`](../../rules/evaluator-independence.md) forbids
+pre-loading a verdict into a reviewer's prompt.
+
+**When no spawn primitive exists** the two passes share one context, which
+means A cannot be isolated from B. That is a real degradation and it is
+reported, not hidden: line 1 of the output reads
+
+```
+DEGRADED: single-context (<reason>)
+```
+
+Output therefore carries **either** two assessment ids **or** that banner.
+Neither present is not a third state — it is an unreported degradation, and it
+is the failure this section exists to prevent.
+
 ## Anti-slop scan
 
 Hybrid: a deterministic detector does the mechanical pattern-matching (zero

package/dist/agent-src/skills/design-review/references/verification-automation.md

@@ -15,6 +15,47 @@ When Playwright MCP or browser tools are available, use them for automated visua
 3. **Capture after** — screenshot at the same viewports and states.
 4. **Compare** — visually diff the screenshots, flag regressions.
 
+### Scroll evidence — the machine-readable half of the comparison
+
+The step above compares screenshots **by eye**, which is the whole of W2: no
+number leaves the comparison, so nothing downstream can act on it. For a
+scroll-driven surface the missing artefact is small and specific — the scroll
+position, the beat that position belongs to, and the element states asserted
+there. Emit it as `scroll_evidence` on the review envelope; `design-review`
+reads it in Phase 2 alongside the viewport sweep.
+
+```json
+{
+  "schema_version": 1,
+  "ledger_ref": "path to the story-beat ledger these ids come from",
+  "samples": [
+    {
+      "scroll": 0.42,
+      "beat_id": "b2-reveal",
+      "element_states": [
+        { "selector": "#panel", "state": "pinned", "observed": "pinned" },
+        { "selector": "#caption", "state": "visible", "observed": "offscreen" }
+      ]
+    }
+  ]
+}
+```
+
+`beat_id` references the ledger at
+[`wireframe/references/story-beat-ledger.schema.json`](../../wireframe/references/story-beat-ledger.schema.json),
+which is what makes a sample checkable against an intent rather than against a
+remembered screenshot: a row whose `state` and `observed` disagree is a finding,
+and a reviewer can diff two runs of this file.
+
+**Build no verifier beside this.** The artefact is consumed by the review flow
+already described on this page — the async verifier captures it in the same pass
+that captures the screenshots. Sampling positions come from the ledger's
+`enters_at` values, so the sample set is derived from the beats, not from an
+arbitrary scroll grid. Where no capture primitive is available the samples are
+absent and the verdict is static-scoped, per `verdict_scope`
+(`directives/ui/review.ts`) — an empty `samples` array is a recorded null, never
+a pass.
+
 ### State-based verification
 
 Don't just screenshot the default state. Capture: