sinapse-ai 9.4.0 → 9.5.0

package/squads/squad-artdir/tasks/create-wireflow.md

@@ -0,0 +1,84 @@
+# Task: Create Wireflow
+
+## Metadata
+- **ID:** create-wireflow
+- **Version:** 1.0.0
+- **Agent:** ia-architect (Flow), layout-engineer (Grid) contributes
+- **Squad:** squad-artdir
+
+## Description
+
+Create an annotated wireflow with the cognitive role of each section, psychological justification for the sequence, and layout specifications. This is a strategic document — not a visual wireframe.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| art_direction_brief | object | required | Visual language and IA decisions |
+| content_inventory | array | optional | Available content blocks and copy |
+| project_type | string | required | landing_page, website, campaign, product_page |
+| objective | string | required | Primary conversion objective |
+
+## Steps
+
+1. **define-cognitive-journey**
+   - Map the ideal cognitive sequence for the objective
+   - Select cognitive roles per section (HOOK, PROMISE, PROOF, etc.)
+   - Justify sequence with retention principles
+
+2. **plan-progressive-disclosure**
+   - Define what shows at L1 (scan), L2 (skim), L3 (read), L4 (deep dive)
+   - Identify expandable content areas
+   - Plan reveal triggers (scroll, click, hover)
+
+3. **insert-retention-devices**
+   - Place Zeigarnik loops (incomplete patterns that drive scroll)
+   - Create curiosity gaps between sections
+   - Identify peak moment position
+   - Design end moment (footer) with value
+
+4. **plan-self-qualification**
+   - Identify where audience self-selects
+   - Design persona match or use case tabs
+   - Position qualification before hard sell
+
+5. **define-section-layout** (Grid)
+   - Full-bleed vs contained per section
+   - Column distribution per section
+   - Spacing between sections (pacing)
+   - Responsive behavior per section
+
+6. **position-cta-flow**
+   - Primary CTA position (above fold)
+   - Secondary CTA positions (mid-page, contextual)
+   - Sticky CTA trigger point
+   - Final CTA section design
+
+7. **annotate-wireflow**
+   - For each section: cognitive role + principle + content + layout + motion + CTA
+   - Add transition rationale between sections
+   - Mark scroll depth expectations
+
+8. **validate-flow**
+   - Read wireflow as narrative — does it build to conversion?
+   - Check: can user convert at any point?
+   - Check: are objections resolved before final CTA?
+   - Estimate scroll depth at each CTA
+
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| wireflow | document | Annotated Wireflow (Deliverable 4) with all sections |
+| section_roles | array | Mapping of sections to cognitive roles |
+| retention_map | document | All retention devices with positions |
+| cta_flow | document | CTA positions with intent levels |
+
+## Quality Criteria
+
+- Every section MUST have a documented cognitive role
+- Section sequence MUST be justified by psychological principle
+- Progressive disclosure MUST be explicit (what shows at each level)
+- At least 2 Zeigarnik loops identified
+- Peak moment MUST be mid-page, not first or last
+- All CTAs MUST be positioned with conversion rationale

package/squads/squad-artdir/tasks/design-color-system.md

@@ -0,0 +1,81 @@
+# Task: Design Color System
+
+## Metadata
+- **ID:** design-color-system
+- **Version:** 1.0.0
+- **Agent:** color-psychologist (Spectrum)
+- **Squad:** squad-artdir
+
+## Description
+
+Create a complete color system with tokens, semantics, and neuropsychological justification. Includes WCAG verification, dark/light mode support, and Von Restorff application strategy.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| visual_language | object | required | Visual language decisions from Prism (mood, mode, temperature) |
+| audience | string | required | Target audience description |
+| emotion_target | string | required | Primary emotion to evoke (urgency, trust, innovation, etc.) |
+| brand_colors | array | optional | Existing brand colors to incorporate |
+| mode | string | required | dark, light, or adaptive |
+
+## Steps
+
+1. **map-emotion-to-color**
+   - Use emotion-to-color mapping from knowledge base
+   - Cross-reference with audience expectations
+   - Consider category conventions
+
+2. **select-accent**
+   - Choose accent hue with neuropsychological rationale
+   - Generate full scale (50-900)
+   - Verify contrast on target backgrounds
+
+3. **select-neutral**
+   - Choose neutral base (true neutral, warm, cool)
+   - Generate full scale (0-950)
+   - Design surface hierarchy (primary, secondary, tertiary)
+
+4. **define-semantics**
+   - Select success, warning, error, info colors
+   - Ensure functional differentiation from accent
+   - Verify WCAG compliance for each
+
+5. **verify-wcag**
+   - Check AAA (7:1) for accent on surfaces (CTAs)
+   - Check AA (4.5:1) for body text
+   - Check AA (3:1) for large text and UI components
+   - Document all contrast ratios
+
+6. **plan-von-restorff**
+   - Map exactly where accent appears (CTAs, badges, highlights)
+   - Ensure everything else is neutral
+   - Verify isolation effect is achieved
+
+7. **design-mode-variants**
+   - If dark mode: design luminance-based surface hierarchy
+   - If light mode: design shadow-based elevation
+   - If adaptive: design both systems with shared accent
+
+8. **generate-tokens**
+   - Produce CSS custom properties
+   - Produce design token YAML
+   - Include usage guidelines per token
+
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| color_system | document | Complete color system specification |
+| color_tokens | code | CSS custom properties and YAML tokens |
+| contrast_report | document | WCAG verification for all critical pairs |
+| von_restorff_map | document | Where accent appears and why |
+
+## Quality Criteria
+
+- Max 1 accent + 1 neutral (hard rule)
+- WCAG AAA (7:1) for all CTAs — no exceptions
+- Every color choice MUST cite neuropsychological rationale
+- Dark mode MUST be redesigned (not inverted)
+- Color-blindness safety MUST be verified

package/squads/squad-artdir/tasks/design-product-surface.md

@@ -0,0 +1,60 @@
+# Task: Design Product Surface
+
+## Metadata
+- **ID:** design-product-surface
+- **Version:** 1.0.0
+- **Agent:** product-surface-director (Axiom) — primary
+- **Supporting agents:** ia-architect (Flow), layout-engineer (Grid), interaction-designer (Pulse), design-system-architect (Atlas)
+- **Squad:** squad-artdir
+- **Pilar:** 8 (Product Surface Ergonomics)
+
+## Description
+
+Produce a complete art direction brief for a single product surface (dashboard, settings, empty state, data table, modal, inspector, etc). Unlike `create-art-direction-brief` (which is LP-focused), this task optimizes for daily-use cognitive ergonomics, not first-visit conversion.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| surface | string | required | Surface name (dashboard / settings / empty-state / data-table / modal / ...) |
+| product_context | string | required | What the product does, core user workflow |
+| personas | array | required | Daily-use personas and their frequency/duration |
+| existing_tokens | object | optional | Design tokens from Atlas if already defined |
+| density_target | enum | optional | low / medium / high (defaults based on surface type) |
+| dark_mode_priority | enum | required | dark-first / light-first / parity-required |
+
+## Steps
+
+1. **inhabit-the-surface** — Axiom mentally simulates 100 uses of this surface per month. Lists every decoration that would become noise.
+2. **define-cognitive-zones** — map the surface into zones (orientation / focus / context / interruption / decision / onboarding) with density and motion budgets per zone.
+3. **design-kpi-hero** — if dashboard, identify the single KPI hero zone.
+4. **design-empty-state** — draft the intentional empty state (teach + motivate + preview value).
+5. **specify-keyboard-shortcuts** — list visible shortcuts that teach velocity.
+6. **dark-mode-parity** — design dark and light in parallel, not retrofit.
+7. **notification-rules** — specify Von Restorff motion budget for notifications.
+8. **fitts-audit** — verify primary actions are in consistent positions, sized for repeated use.
+9. **handoff-to-atlas** — flag any new tokens that need to be added to the design system.
+10. **validate-against-pillar-8** — checklist: inhabitation, Fitts, empty state, density, dark mode, notifications, shortcuts.
+
+## Outputs
+
+| Output | Format | Description |
+|--------|--------|-------------|
+| product_surface_brief | markdown | Full brief with cognitive zones, density, tokens, interactions |
+| empty_state_spec | markdown | Intentional empty state design |
+| dark_mode_spec | markdown | Dark-light parity matrix |
+| token_requests | yaml | New tokens requested from Atlas |
+| pillar_8_checklist | markdown | Validation checklist result |
+
+## Quality Gates
+
+- Every zone has a documented density rationale
+- Empty state is NOT the framework default
+- Dark mode and light mode are specified with equal detail
+- Primary actions are visible WITHOUT scrolling on reference viewport (1440x900 and 375x812)
+- Keyboard shortcuts are visible in the UI
+- No decorative animations on daily-use zones
+
+---
+
+*squad-artdir v2.0 | Pilar 8 task*

package/squads/squad-artdir/tasks/design-token-system.md

@@ -0,0 +1,58 @@
+# Task: Design Token System
+
+## Metadata
+- **ID:** design-token-system
+- **Version:** 1.0.0
+- **Agent:** design-system-architect (Atlas) — primary
+- **Supporting agents:** color-psychologist (Spectrum), type-systemist (Kern), motion-architect (Tempo), layout-engineer (Grid)
+- **Squad:** squad-artdir
+- **Pilar:** 9 (Multi-Surface Design System Architecture)
+
+## Description
+
+Produce the canonical multi-surface design token system. Define the brand root layer and the dialect translations for every surface the product will touch (marketing, product, email, docs, PDF, mobile). Establish versioning (semver), ownership, and consistency audit cadence.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| brand_tokens | object | required | Brand tokens from squad-brand (colors, type, motion, spacing) |
+| target_surfaces | array | required | Which of the 7 canonical surfaces this product needs |
+| product_context | string | required | Product type (SaaS / dashboard / marketplace / ...) |
+| existing_system | object | optional | Existing token system if migration |
+| breaking_change_acceptable | bool | optional | Whether major version bumps are acceptable |
+
+## Steps
+
+1. **define-canonical-root** — establish the single source of truth. All downstream tokens derive from here.
+2. **identify-target-surfaces** — from the 7 canonical surfaces, which apply (always include billing PDF and transactional email — they are never optional for premium products).
+3. **design-dialect-per-surface** — for each surface, define the dialect layer that translates canonical tokens into surface-supported equivalents.
+4. **assign-ownership** — every token gets an owner + justification + last-reviewed date.
+5. **versioning-strategy** — semver with changelog + migration guide protocol.
+6. **automate-enforcement** — define which surfaces can be enforced via CI and which need manual audit.
+7. **audit-cadence** — schedule quarterly drift audit.
+8. **handoff-ddl** — produce full DDL ready for @data-engineer or squad-design to implement.
+9. **validate-against-pillar-9** — checklist: SSOT, dialects, versioning, ownership, audit cadence.
+
+## Outputs
+
+| Output | Format | Description |
+|--------|--------|-------------|
+| canonical_tokens | yaml | Root token layer (brand dialect) |
+| surface_dialects | yaml | Translation layer per surface |
+| token_registry | yaml | Token + owner + justification + last-reviewed |
+| versioning_protocol | markdown | Semver + changelog + migration process |
+| audit_schedule | markdown | Quarterly audit with scope |
+| pillar_9_checklist | markdown | Validation checklist result |
+
+## Quality Gates
+
+- Billing PDF and transactional email are NOT missing from target_surfaces
+- Every token has an owner
+- Semver versioning is active
+- At least ONE automated enforcement mechanism is defined
+- Quarterly audit is scheduled with a calendar placeholder
+
+---
+
+*squad-artdir v2.0 | Pilar 9 task*

package/squads/squad-artdir/tasks/diagnose-visual-language.md

@@ -0,0 +1,92 @@
+# Task: Diagnose Visual Language
+
+## Metadata
+- **ID:** diagnose-visual-language
+- **Version:** 1.0.0
+- **Agent:** visual-strategist (Prism)
+- **Squad:** squad-artdir
+
+## Description
+
+Analyze a URL or briefing and diagnose the current visual language against the 7 pillars framework. Produces a diagnostic report with scores, gaps, and prioritized recommendations.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| url | string | conditional | URL to analyze (if existing site) |
+| briefing | string | conditional | Written briefing (if new project) |
+| audience | string | required | Target audience description |
+| category | string | required | Market category |
+| objective | string | required | Primary conversion objective |
+
+At least one of `url` or `briefing` must be provided.
+
+## Steps
+
+1. **gather-context**
+   - If URL provided: fetch and analyze current visual language
+   - If briefing: parse requirements and constraints
+   - Identify audience, category, competitors
+
+2. **analyze-pillar-1** (Visual Hierarchy)
+   - Evaluate focal points, reading patterns, Hick's/Fitts's compliance
+   - Score hierarchy clarity (1-10)
+
+3. **analyze-pillar-2** (Color System)
+   - Count accent colors (should be max 1)
+   - Check WCAG contrast ratios on CTAs and text
+   - Evaluate Von Restorff application
+   - Score color intentionality (1-10)
+
+4. **analyze-pillar-3** (Typography)
+   - Evaluate font pairing vs category conventions
+   - Check type scale consistency
+   - Assess tracking and leading
+   - Score typographic identity (1-10)
+
+5. **analyze-pillar-4** (Motion)
+   - Catalog existing animations
+   - Check performance (GPU-only, FPS)
+   - Verify prefers-reduced-motion
+   - Score motion narrative (1-10)
+
+6. **analyze-pillar-5** (Information Architecture)
+   - Map section sequence against cognitive roles
+   - Check progressive disclosure
+   - Evaluate retention devices
+   - Score IA effectiveness (1-10)
+
+7. **analyze-pillar-6** (CRO Patterns)
+   - Catalog existing CRO patterns
+   - Identify missing high-impact patterns
+   - Score conversion readiness (1-10)
+
+8. **analyze-pillar-7** (Layout & Spacing)
+   - Check spacing consistency (4px/8px baseline)
+   - Evaluate full-bleed vs contained decisions
+   - Check responsive behavior
+   - Score layout breathing (1-10)
+
+9. **synthesize-diagnostic**
+   - Aggregate scores across 7 pillars
+   - Identify top 3 gaps (highest impact, lowest score)
+   - Generate prioritized recommendations
+   - Estimate impact of each recommendation
+
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| diagnostic_report | object | Full diagnostic with scores and analysis |
+| pillar_scores | array | Score 1-10 for each pillar |
+| top_gaps | array | Top 3 gaps with impact estimate |
+| recommendations | array | Prioritized list of improvements |
+| overall_score | number | Weighted average of pillar scores |
+
+## Quality Criteria
+
+- Every gap MUST cite the psychological principle it violates
+- Every recommendation MUST include estimated impact (metric + direction)
+- Scores MUST be justified with specific observations
+- Recommendations MUST be prioritized by impact/effort ratio

package/squads/squad-artdir/tasks/first-5-minutes-choreography.md

@@ -0,0 +1,65 @@
+# Task: First 5 Minutes Choreography
+
+## Metadata
+- **ID:** first-5-minutes-choreography
+- **Version:** 1.0.0
+- **Agent:** product-surface-director (Axiom) + premium-packaging-strategist (Aura) — co-primary
+- **Supporting agents:** motion-architect (Tempo), interaction-designer (Pulse), ia-architect (Flow)
+- **Squad:** squad-artdir
+- **Pilars:** 8, 10
+
+## Description
+
+Design the choreography of the first 5 minutes after user signup. This is the premium unboxing equivalent in digital products. Not an onboarding tutorial — a theatrical first-run experience that makes the user feel: "I am entering something serious."
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| product | string | required | Product name + core workflow |
+| user_intent | string | required | What the user came to accomplish |
+| activation_metric | string | required | The "aha moment" to reach |
+| premium_positioning | bool | required | Whether the product claims premium positioning (triggers additional ceremony phase) |
+| existing_onboarding | object | optional | Current onboarding flow if auditing |
+
+## Steps
+
+1. **define-phases** — break the 5 minutes into named phases:
+   - **0-15s: Arrival** — the moment of entry. Must feel designed, not defaulted.
+   - **15s-1min: Ceremony** (premium only) — intentional theater. Could be a personalization question, a moment of branded delight, a signature animation.
+   - **1-2min: Orientation** — the product teaches itself. No modal walls. Inline hints.
+   - **2-4min: First Value** — the user produces/receives something real. Not a demo — an actual artifact.
+   - **4-5min: Activation** — the aha moment. The user now understands why this exists.
+2. **arrival-design** — Axiom designs the arrival screen. No "Welcome to {product}" generic. Must be custom.
+3. **ceremony-design** — Aura designs the ceremony moment (premium only). Consults Tempo (motion) and squad-brand (brand voice) for signature flourishes.
+4. **orientation-strategy** — Flow (ia-architect) designs inline disclosure. No tutorial walls. No "Skip tutorial" button.
+5. **first-value-design** — Axiom + Aura design the first-artifact experience. The user leaves the first 5 minutes with something they made or received.
+6. **activation-choreography** — the aha moment is explicitly choreographed with visual punctuation (not hidden).
+7. **motion-budget** — Tempo sets the motion budget for the 5 minutes. Higher than daily use, but intentional (Disney 12 principles apply).
+8. **anti-pattern-audit** — verify no "Skip" buttons, no modal walls, no framework-default empty states, no Mailchimp-default welcome emails.
+9. **validate-against-principle-4** — Principle 4 (Presentation > intrinsic quality) must be honored.
+
+## Outputs
+
+| Output | Format | Description |
+|--------|--------|-------------|
+| first_5_minutes_spec | markdown | Full phase-by-phase choreography |
+| arrival_screen_design | markdown | The 0-15s arrival |
+| ceremony_spec | markdown | The 15s-1min ceremony (premium) |
+| first_value_experience | markdown | The 2-4min artifact creation |
+| activation_punctuation | markdown | The 4-5min aha choreography |
+| motion_budget | yaml | Motion budget across phases |
+| anti_pattern_audit | markdown | Pass/fail audit |
+
+## Quality Gates
+
+- No "Skip tutorial" button in the first 5 minutes
+- The arrival is custom-designed, not framework default
+- For premium products, the ceremony phase exists and is > 15s
+- The user leaves the 5 minutes with something real (not a demo)
+- The activation moment has visual punctuation
+- Welcome emails are NOT Mailchimp default
+
+---
+
+*squad-artdir v2.0 | Pilars 8 + 10 task*

package/squads/squad-artdir/tasks/specify-motion-system.md

@@ -0,0 +1,84 @@
+# Task: Specify Motion System
+
+## Metadata
+- **ID:** specify-motion-system
+- **Version:** 1.0.0
+- **Agent:** motion-architect (Tempo), interaction-designer (Pulse) contributes
+- **Squad:** squad-artdir
+
+## Description
+
+Create a complete motion specification with timing, easing, library selection, and kinesthetic justification for every animation. Includes performance budget, prefers-reduced-motion fallbacks, and implementation-ready specs.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| art_direction_brief | object | required | The Art Direction Brief with visual language decisions |
+| section_map | array | required | List of sections with cognitive roles |
+| project_type | string | required | landing_page, website, campaign, product_page |
+| hero_preference | string | optional | Preferred hero technique (frame_sequence, text_reveal, parallax, static) |
+
+## Steps
+
+1. **define-philosophy**
+   - Translate visual language mood into motion personality
+   - Map motion intensity to project type and audience
+
+2. **select-libraries**
+   - Choose primary animation library (GSAP, Framer Motion, CSS)
+   - Choose scroll library (Lenis, native)
+   - Justify each selection with technical and aesthetic rationale
+
+3. **specify-hero**
+   - Define hero animation technique
+   - Specify implementation details (frames, timing, trigger)
+   - Create reduced-motion fallback
+
+4. **specify-sections**
+   - For each section: define entrance animation, scroll behavior, interactions
+   - Set stagger patterns for groups
+   - Define scrub vs triggered behavior
+
+5. **specify-interactions** (Pulse)
+   - Define hover states for all interactive elements
+   - Define click/tap feedback
+   - Define focus states
+   - Plan custom cursor (if applicable)
+
+6. **define-transitions**
+   - Specify page transition technique (if multi-page)
+   - Define modal/overlay transitions
+   - Define accordion/expand transitions
+
+7. **set-performance-budget**
+   - Define FPS targets
+   - Set max simultaneous animations
+   - Define will-change strategy
+   - Set JS bundle budget for animation
+
+8. **create-reduced-motion-plan**
+   - Map every animation to its reduced-motion fallback
+   - Ensure content remains accessible without motion
+   - Test conceptual flow without any animation
+
+9. **compile-spec**
+   - Produce Motion Spec document (Deliverable 3)
+   - Include CSS custom properties for timing/easing
+   - Include JS configuration snippets
+
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| motion_spec | document | Complete Motion Spec (Deliverable 3) |
+| css_tokens | code | CSS custom properties for motion tokens |
+| reduced_motion_map | document | Every animation + its fallback |
+
+## Quality Criteria
+
+- Every animation MUST cite Disney principle or psychological justification
+- Performance budget MUST be explicit (FPS, bundle size, max elements)
+- prefers-reduced-motion MUST cover 100% of animations
+- Easing MUST never be linear for UI motion
+- Duration ranges MUST be specified, not exact (allows dev flexibility)

package/squads/squad-artdir/tasks/validate-against-pillars.md

@@ -0,0 +1,143 @@
+# Task: Validate Against Pillars
+
+## Metadata
+- **ID:** validate-against-pillars
+- **Version:** 1.0.0
+- **Agent:** artdir-orqx (Canvas) orchestrates; accessibility-guardian (Shield) validates accessibility
+- **Squad:** squad-artdir
+
+## Description
+
+Final validation checklist against all 7 pillars, WCAG compliance, and performance targets. This is the quality gate that determines if the art direction is ready for implementation handoff.
+
+## Inputs
+
+| Input | Type | Required | Description |
+|-------|------|----------|-------------|
+| art_direction_brief | document | required | The complete Art Direction Brief |
+| design_tokens | document | required | Design Token System |
+| motion_spec | document | required | Motion Specification |
+| wireflow | document | required | Annotated Wireflow |
+| cro_map | document | required | CRO Patterns Map |
+
+## Steps
+
+1. **validate-pillar-1** (Visual Hierarchy)
+   - [ ] Clear focal point per viewport
+   - [ ] Consistent heading hierarchy (h1 → h6 in order)
+   - [ ] Von Restorff applied to CTAs (single accent color)
+   - [ ] Reading pattern matches content type (F, Z, or layer cake)
+   - [ ] Hick's Law respected (max 3 options per viewport)
+   - [ ] Fitts's Law respected (CTAs large, well-positioned)
+   - Score: _/10
+
+2. **validate-pillar-2** (Color System)
+   - [ ] Max 1 accent + 1 neutral enforced
+   - [ ] WCAG AAA (7:1) on all CTAs
+   - [ ] WCAG AA (4.5:1) on all body text
+   - [ ] WCAG AA (3:1) on large text and UI components
+   - [ ] Semantic colors functional and distinct from accent
+   - [ ] Color-blindness safe (no color-only indicators)
+   - [ ] Dark/light mode properly designed (not inverted)
+   - Score: _/10
+
+3. **validate-pillar-3** (Typography)
+   - [ ] Font pairing justified by positioning
+   - [ ] Type scale consistent and modular
+   - [ ] Fluid typography with clamp() implemented
+   - [ ] Tracking appropriate per level (tight headings, normal body, wide labels)
+   - [ ] Line-height appropriate per context
+   - [ ] Font loading optimized (swap, preload, subset)
+   - Score: _/10
+
+4. **validate-pillar-4** (Motion)
+   - [ ] Every animation cites psychological/Disney principle
+   - [ ] Only GPU properties animated (transform, opacity)
+   - [ ] 60fps target for desktop
+   - [ ] 30fps minimum for mobile
+   - [ ] prefers-reduced-motion covers 100% of animations
+   - [ ] No animation > 5 seconds without pause control
+   - [ ] Easing is never linear for UI motion
+   - [ ] Duration ranges specified per category
+   - Score: _/10
+
+5. **validate-pillar-5** (Information Architecture)
+   - [ ] Every section has documented cognitive role
+   - [ ] Section sequence justified by psychological principle
+   - [ ] Progressive disclosure implemented (L1-L4)
+   - [ ] At least 2 Zeigarnik loops identified
+   - [ ] Peak moment is mid-page (not first or last)
+   - [ ] End moment (footer) is meaningful
+   - [ ] Self-qualification point exists
+   - Score: _/10
+
+6. **validate-pillar-6** (CRO Patterns)
+   - [ ] Social proof present and verifiable
+   - [ ] Multiple CTAs at different intent levels
+   - [ ] Risk reversal addresses top 3 objections
+   - [ ] Comparison framed favorably (if applicable)
+   - [ ] All impact hypotheses documented (metric + direction + %)
+   - [ ] Sticky CTA present after hero
+   - Score: _/10
+
+7. **validate-pillar-7** (Layout & Spacing)
+   - [ ] 4px/8px baseline grid enforced
+   - [ ] Section spacing creates cognitive breathing (96-192px between sections)
+   - [ ] Full-bleed vs contained justified per section
+   - [ ] Responsive breakpoints tested (320px, 640px, 1024px, 1440px)
+   - [ ] Max content width enforced (65ch for body text)
+   - [ ] Mobile-first layout explicit
+   - Score: _/10
+
+8. **validate-wcag** (Shield)
+   - [ ] All contrast ratios verified (tools used)
+   - [ ] Keyboard navigation complete (Tab, Enter, Escape)
+   - [ ] Focus states visible on all interactive elements
+   - [ ] Skip link present and functional
+   - [ ] Alt text on all meaningful images
+   - [ ] Form labels present and associated
+   - [ ] aria-live for dynamic content
+   - [ ] Language attribute on html element
+   - [ ] No keyboard traps (except modal focus trap)
+   - [ ] Touch targets min 44x44px
+   - Score: _/10
+
+9. **validate-performance**
+   - [ ] Lighthouse target > 90
+   - [ ] FCP target < 1.5s
+   - [ ] LCP target < 2.5s
+   - [ ] CLS target < 0.1
+   - [ ] Total animation JS < 100KB gzipped
+   - [ ] Font files optimized (subset, woff2)
+   - Score: _/10
+
+10. **calculate-verdict**
+    - Average all pillar scores
+    - Identify any pillar below 6/10 (BLOCKER)
+    - Generate verdict: PASS / CONCERNS / FAIL
+
+## Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| validation_report | document | Complete validation with all checks |
+| pillar_scores | array | Score for each pillar + WCAG + performance |
+| blockers | array | Any pillar below 6/10 |
+| verdict | string | PASS, CONCERNS, or FAIL |
+| remediation | array | Required fixes for CONCERNS/FAIL verdict |
+
+## Verdict Criteria
+
+| Verdict | Criteria | Action |
+|---------|----------|--------|
+| PASS | All pillars >= 7/10, no WCAG violations | Ready for implementation handoff |
+| CONCERNS | All pillars >= 6/10, minor WCAG issues | Ready with documented concerns |
+| FAIL | Any pillar < 6/10 OR critical WCAG violation | Must fix before handoff |
+
+## Quality Criteria
+
+- Every check MUST be binary (pass/fail) with specific observation
+- Scores MUST be justified (not subjective)
+- WCAG checks MUST use tools (not visual inspection alone)
+- Performance targets MUST be based on project type and audience
+- Verdict MUST be actionable — if FAIL, specify exactly what to fix