opencastle 0.32.5 → 0.32.6

package/src/orchestrator/skills/fast-review/SKILL.md

@@ -1,5 +1,3 @@
-<!-- ⚠️ This file is managed by OpenCastle. Edits will be overwritten on update. Customize in the .opencastle/ directory instead. -->
-
 ````skill
 ---
 name: fast-review
@@ -8,319 +6,96 @@ description: "Mandatory single-reviewer gate that runs after every agent delegat
 
 # Skill: Fast Review
 
-Mandatory lightweight review that runs after **every** agent delegation. Inspired by the [Steroids CLI](https://github.com/UnlikeOtherAI/steroids-cli) coder/reviewer separation pattern.
-
-## Why Fast Review Exists
-
-Panel reviews (3 reviewers, majority vote) are thorough but expensive and slow. Running them after every step is impractical. Without any review, agent output ships unchecked — risky for overnight runs where no human is watching.
-
-Fast review fills the gap: **a single reviewer sub-agent that validates every delegation output before acceptance**, with automatic retry and escalation.
-
-```
-                    ┌─────────────────────────────────┐
-                    │         Agent completes          │
-                    └────────────┬────────────────────┘
-                                 │
-                    ┌────────────▼────────────────────┐
-                    │     Fast Review (mandatory)      │
-                    │     Single reviewer sub-agent    │
-                    └────────────┬────────────────────┘
-                                 │
-                    ┌────────────▼────────────────────┐
-                    │          PASS?                   │
-                    ├── YES ──▶ Accept & continue      │
-                    ├── FAIL ──▶ Retry (up to 2x)     │
-                    └── 3x FAIL ──▶ Escalate to panel │
-                                                      │
-                    ┌─────────────────────────────────┐
-                    │   Panel Review (escalation)      │
-                    │   3 reviewers, majority vote     │
-                    ├── PASS ──▶ Accept                │
-                    ├── BLOCK ──▶ Re-delegate + retry  │
-                    └── 3x BLOCK ──▶ Dispute record   │
-                                       │
-                    ┌──────────────────▼──────────────┐
-                    │   Dispute (human decision)       │
-                    │   Both perspectives + options    │
-                    │   → Human picks resolution       │
-                    └─────────────────────────────────┘
-```
-
-## When to Use
-
-| Scenario | Use Fast Review | Use Panel Review |
-|----------|----------------|-----------------|
-| Any agent delegation output | **Always** (mandatory) | — |
-| Security changes (auth, RLS, headers) | ✅ then also → | **Always** |
-| DB migrations | ✅ then also → | **Always** |
-| Architecture decisions | ✅ then also → | **Always** |
-| Complex business logic without tests | ✅ then also → | **Recommended** |
-| Feature implementation with tests | ✅ | Only if fast review flags concerns |
-| Config changes, docs, simple fixes | ✅ | No |
-
-Fast review is **never skipped**. Panel review remains opt-in for high-stakes work, or triggers as escalation when fast review fails repeatedly.
-
 ## Contract
 
-- Runs **after every delegation** — no exceptions.
-- Single reviewer sub-agent (not 3).
-- Uses Economy/Standard tier models (cost-efficient).
-- Produces PASS or FAIL with structured feedback.
-- On FAIL: automatic retry with reviewer feedback (up to 2 retries).
-- On 3rd FAIL: auto-escalates to panel review.
-- Total review time budget: ~2-5 minutes per review.
-
-## Reviewer Model Selection
-
-| Implementation Agent Tier | Reviewer Model | Rationale |
-|--------------------------|---------------|-----------|
-| Economy (GPT-5 mini) | GPT-5 mini | Peer-level review is sufficient |
-| Fast (GPT-5.3-Codex) | GPT-5 mini | Economy is enough for structured checks |
-| Standard (Gemini 3.1 Pro) | GPT-5 mini | Economy is enough for structured checks |
-| Quality (Claude Sonnet 4.6) | GPT-5 mini | Economy is enough for structured checks |
-| Premium (Claude Opus 4.6) | Gemini 3.1 Pro | Premium work deserves Standard review |
-
-**Override:** If the task touches security, auth, or data integrity, upgrade the reviewer to Standard regardless of the implementation tier.
+| Rule | Detail |
+|------|--------|
+| Trigger | After **every** delegation — no exceptions |
+| Reviewer | Single sub-agent; Economy tier (Standard for premium/security work) |
+| Verdict | PASS or FAIL with structured feedback |
+| Retry | ≤2 retries on FAIL; 3rd FAIL → panel review |
+| Budget | ~2–5 min |
 
 ## Procedure
 
-### Step 1: Collect Review Context
-
-Before spawning the reviewer, gather:
-
-1. **Issue** — acceptance criteria from the tracked issue
-2. **File diff** — list of changed files and their contents (or key sections)
-3. **File partition** — the agent's assigned files (to check for boundary violations)
-4. **Deterministic results** — lint, test, build output (already run as part of validation gates)
-5. **Agent's self-report** — what the agent claims to have done
+### 1 — Collect Context
 
-### Step 2: Spawn Reviewer Sub-Agent
+Issue + acceptance criteria, file diff, file partition, deterministic results (lint/test/build), agent self-report.
 
-Launch a single `runSubagent` with the review prompt (see § Reviewer Prompt Template below).
+### 2 — Spawn Reviewer
 
-**Critical:** The reviewer runs in an isolated sub-agent context. It must NOT have access to the original delegation prompt — it reviews the *output*, not the *intent*. The acceptance criteria from the issue serve as the objective reference.
+Single `runSubagent`. Context = acceptance criteria, diff, partition, deterministic results **only** — no session history, no delegation prompt.
 
-### Step 3: Parse Verdict
-
-The reviewer must output this exact structure:
+### 3 — Parse Verdict
 
 ```
 VERDICT: PASS | FAIL
-
 ISSUES:
-- [severity:critical|major|minor] Description of issue
-- [severity:critical|major|minor] Description of issue
-
-FEEDBACK:
-Specific, actionable feedback for the implementer if FAIL.
-
+- [severity:critical|major|minor] Description
+FEEDBACK: Actionable feedback.
 CONFIDENCE: low | medium | high
 ```
 
-**Verdict rules:**
-- **PASS** — No critical or major issues. Minor issues are noted but don't block.
-- **FAIL** — At least one critical or major issue found.
-
-**Auto-PASS conditions (skip reviewer):**
-- The delegation was pure research/exploration with no code changes
-- The delegation only modified documentation files (`.md`)
-- All deterministic gates already passed AND the change is ≤10 lines across ≤2 files AND **no sensitive files were touched** (see validation-gates Gate 3 sensitive file list)
-
-> **Sensitive file override:** Changes to auth/middleware files, database migrations, RLS policies, security headers, CSP configuration, environment variable schemas, or CI/CD configuration **always** require a reviewer — even for 1-line changes. Auto-PASS never applies to these files.
-
-### Step 4: Handle Verdict
+- **PASS** — no critical/major issues (minor noted, non-blocking).
+- **FAIL** — any critical/major issue, or output format mismatch.
 
-#### On PASS
+**Auto-PASS** (skip reviewer): pure research/no code changes; docs-only `.md` changes; ≤10 lines across ≤2 non-sensitive files with all deterministic gates passing.
 
-1. Accept the agent's output
-2. Log the review result (see § Logging)
-3. Continue orchestration
+> **Sensitive override:** Auth/middleware, DB migrations, RLS policies, security headers, CSP, env var schemas, CI/CD config always require review — even 1-line changes.
 
-#### On FAIL (attempt 1 or 2)
+### 4 — Handle Verdict
 
-1. Log the review result
-2. Extract the reviewer's ISSUES and FEEDBACK
-3. Re-delegate to the **same agent** with:
-   - Original task context
-   - Reviewer's feedback appended
-   - Instruction: "Address the following review feedback before resubmitting"
-   - Note: "This is retry attempt N/2 after fast review"
-4. After the agent re-submits, run fast review again (go back to Step 1)
-
-#### On FAIL (attempt 3 — escalation)
-
-1. Log the review result with `escalated: true`
-2. **Auto-escalate to panel review** — load the `panel-majority-vote` skill
-3. Include all 3 fast review reports as context for the panel
-4. The panel decides PASS/BLOCK with the standard majority vote protocol
-5. If panel PASS → accept with a note that it required escalation
-6. If panel BLOCK → follow the standard panel retry flow (max 3 panel attempts)
-7. If panel BLOCKs 3 times → create a **dispute record** in `.opencastle/DISPUTES.md` (see **team-lead-reference** skill § Dispute Protocol)
-
-```
-Fast Review Attempt 1: FAIL → retry
-Fast Review Attempt 2: FAIL → retry
-Fast Review Attempt 3: FAIL → escalate to panel
-Panel Attempt 1: BLOCK → re-delegate with MUST-FIX
-Panel Attempt 2: BLOCK → re-delegate with MUST-FIX
-Panel Attempt 3: BLOCK → create dispute record for human resolution
-```
+| Outcome | Action |
+|---------|--------|
+| PASS | Log review; continue |
+| FAIL 1–2 | Log; re-delegate same agent: "Retry N/2 — address listed issues" |
+| FAIL 3 | Log `escalated: true`; load **panel-majority-vote** skill |
+| Panel BLOCK ×3 | Dispute in `.opencastle/DISPUTES.md` (see **team-lead-reference** § Dispute Protocol) |
 
 ## Reviewer Prompt Template
 
 ```markdown
-You are a code reviewer. Your job is to verify that a delegated task was
-completed correctly. Be concise and specific. Focus on correctness, not style.
-
-## Task Under Review
-
-**Issue:** [ID] — [Title]
-**Acceptance Criteria:**
-- [ ] [Criterion 1]
-- [ ] [Criterion 2]
-- [ ] [Criterion 3]
-
-## Agent's File Partition (allowed files)
-[List of directories/files the agent was allowed to modify]
+You are a code reviewer. Be concise and specific.
 
-## Changed Files
-[For each file: path, key sections of the diff or full new content]
+## Task: [ID] — [Title]
+Acceptance Criteria: [list]
 
-## Deterministic Check Results
-- Lint: [PASS/FAIL + details]
-- Tests: [PASS/FAIL + details]
-- Build: [PASS/FAIL + details]
+## File Partition: [allowed dirs/files]
+## Changed Files: [path + key diff]
+## Deterministic: Lint: [P/F] | Tests: [P/F] | Build: [P/F]
 
-## Review Checklist
+## Checklist
+1. Acceptance criteria met?
+2. Partition respected?
+3. No regressions?
+4. Errors surfaced (no swallowed exceptions)?
+5. Type safety (no `as any`)?
+6. No secrets/injection vectors?
+7. Edge cases handled?
 
-Evaluate EACH item. Only flag issues you are confident about.
-
-1. **Acceptance criteria met** — Does the implementation satisfy every criterion?
-2. **File partition respected** — Were only allowed files modified?
-3. **No regressions** — Could any change break existing functionality?
-4. **Error handling** — Are errors surfaced clearly? No swallowed exceptions?
-5. **Type safety** — Proper TypeScript types? No `as any` or unsafe casts?
-6. **Security basics** — No exposed secrets, no injection vectors, no unsafe user input handling?
-7. **Edge cases** — Are obvious edge cases handled (null, empty, overflow)?
-
-## Previous Review Feedback (if retry)
-[Include prior FAIL feedback so the reviewer can verify fixes]
-
-## Output Format (MANDATORY — follow exactly)
+## Prior Feedback (retry only): [previous FAIL]
 
 VERDICT: PASS | FAIL
-
-ISSUES:
-- [severity:critical|major|minor] Description
-
-FEEDBACK:
-Actionable feedback for the implementer.
-
+ISSUES: - [severity:critical|major|minor] Description
+FEEDBACK: [Actionable feedback.]
 CONFIDENCE: low | medium | high
 ```
 
 ## Logging
 
-> **⛔ HARD GATE — Do NOT proceed to the next task or accept the review result until the review is logged.**
-
-After each fast review, log the result using the **observability-logging** skill's review record command. See the skill for the exact CLI syntax, required fields, and verify step. An unlogged review is a failed review.
-
-## Integration with Existing Workflow
-
-### Position in the Verification Loop
-
-Fast review sits between the agent's output and the Team Lead's acceptance:
-
-```
-Agent completes work
-       │
-       ▼
-Secret Scanning                           ← validation-gates Gate 1
-       │
-       ▼
-Deterministic checks (lint, test, build)  ← validation-gates Gate 2
-       │
-       ▼
-Blast Radius Check                        ← validation-gates Gate 3
-       │
-       ▼
-Dependency Audit (if packages changed)    ← validation-gates Gate 4
-       │
-       ▼
-Fast Review (this skill)                  ← validation-gates Gate 5
-       │
-       ├── PASS → Accept, move to next task
-       ├── FAIL → Retry loop (up to 2x)
-       └── 3x FAIL → Escalate to Panel (Gate 9)
-```
-
-### Relationship to on-post-delegate Hook
+> **⛔ HARD GATE — Log the review before proceeding.** Use **observability-logging** skill's review record command.
 
-Fast review is executed as part of the `on-post-delegate` hook in the agent-hooks skill. The hook sequence is:
+## Integration & Overnight Mode
 
-1. Verify output (file changes within partition)
-2. Run deterministic checks (lint, test, build)
-3. **Run fast review** ← inserted here
-4. Check acceptance criteria (reviewer does this too, as cross-check)
-5. Update issue
-
-### Skipping Panel Review
-
-When fast review passes, you can safely skip panel review for **non-high-stakes** tasks. The thresholds for mandatory panel review remain:
-
-- Security-sensitive changes
-- Database migrations
-- Architecture decisions
-- Complex business logic without test coverage
-
-These tasks get **both** fast review AND panel review.
-
-## Cost Impact
-
-Estimated cost per fast review:
-
-| Review Tier | Est. Tokens | Est. Duration |
-|-------------|-------------|---------------|
-| Economy reviewer | ~3K-8K tokens | 30-90 sec |
-| Standard reviewer | ~5K-12K tokens | 60-180 sec |
-
-For a typical 7-delegation session:
-- **Without fast review:** 0 review tokens
-- **With fast review:** ~20K-60K additional tokens (~5-15% overhead)
-- **With panel on every step:** ~150K-450K additional tokens (prohibitive)
-
-Fast review provides ~85% of the safety benefit of full panel review at ~15% of the cost.
-
-## Overnight/Long-Run Mode
-
-For autonomous overnight sessions, fast review is the primary quality gate. Additional considerations:
-
-1. **Lower PASS threshold** — In overnight mode, consider upgrading the reviewer model one tier for extra safety (no human in the loop to catch issues).
-2. **Stricter escalation** — Escalate to panel after 2 FAILs instead of 3 when running unattended.
-3. **Checkpoint on escalation** — If fast review escalates to panel during an overnight run, save a session checkpoint before proceeding. This allows human review of the escalation decision.
-4. **Aggregated review log** — At the end of an overnight session, generate a summary of all fast reviews (pass rate, common issues, escalations) as part of the session-end hook.
+`on-post-delegate` Gate 5 (after deterministic Gates 1–4), ~5–15% token overhead. Overnight: upgrade one tier, escalate after 2 FAILs, checkpoint before panel.
 
 ## Anti-Patterns
 
-- **Skipping fast review** — Never. Not even for "trivial" changes. The cost is minimal, the risk of uncaught issues in overnight runs is high.
-- **Using Panel as fast review** — Panel is 3 reviewers with majority vote. Using it for every step wastes ~3x the tokens and time.
-- **Reviewer sees the delegation prompt** — The reviewer should evaluate output against acceptance criteria, not the prompt. This prevents rubber-stamping intent as completion.
-- **Ignoring minor issues** — Minor issues get a PASS verdict but should be tracked. If the same minor issue appears 3+ times across reviews, create a ticket.
-- **Manual override of FAIL** — The Team Lead should never force-accept a FAIL verdict. Either fix the issues through retry or escalate.
-- **Skipping deterministic checks** — Fast review does NOT replace lint/test/build. Those run first. The reviewer focuses on semantic correctness beyond what tools can check.
-
-## Metrics & Continuous Improvement
-
-Track these metrics from `events.ndjson` (filter by `"type":"review"`) to optimize the review process:
-
-| Metric | Target | Action if Off-Target |
-|--------|--------|---------------------|
-| First-pass rate | > 80% | Improve delegation prompts with more specific acceptance criteria |
-| Escalation rate | < 5% | Review why agents fail 3x — prompts may be ambiguous |
-| False positive rate | < 10% | If reviewer FAILs work that's actually correct, adjust reviewer prompt |
-| Avg review duration | < 120 sec | If too slow, reduce review context or use a faster model |
-| Retry success rate | > 90% | If retries don't fix issues, the feedback isn't specific enough |
-
-Review these metrics monthly (or after every 50 reviews) and adjust the reviewer prompt template accordingly.
+- **Skipping fast review** — never, including "trivial" changes.
+- **Panel as fast review** — wastes ~3× tokens.
+- **Reviewer sees delegation prompt** — evaluate against acceptance criteria only.
+- **Ignoring minor issues** — track; 3+ recurrences → ticket.
+- **Force-accepting FAIL** — retry or escalate.
+- **Skipping deterministic checks** — does NOT replace lint/test/build.
 
 ````

package/src/orchestrator/skills/frontend-design/SKILL.md

@@ -6,90 +6,48 @@ license: Complete terms in LICENSE.txt
 
 <!-- ⚠️ This file is managed by OpenCastle. Edits will be overwritten on update. Customize in the .opencastle/ directory instead. -->
 
-This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+## Design Principles
 
-The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+| Dimension | Rule |
+|-----------|------|
+| Direction | Pick an extreme aesthetic (brutally minimal, maximalist, retro-futuristic, luxury, brutalist, art deco, editorial…) and commit fully. Name it in 2–3 words. |
+| Typography | Characterful display+body pair. No Inter/Roboto/Arial. `clamp()` fluid scale; heading lh ~1.1–1.2, body lh ~1.5–1.7; letter-spacing on uppercase/small. |
+| Color | CSS vars only; dominant + sharp accent hierarchy; WCAG AA (4.5:1 body, 3:1 large); dark/light both intentional. |
+| Motion | CSS-only for HTML; Motion library for React; staggered page entrance; custom easing; `prefers-reduced-motion` fallback. |
+| Layout | Asymmetry, overlap, diagonal flow, grid-breaking. Consistent spacing tokens — no ad-hoc values. Holds at mobile/tablet/desktop. |
+| Atmosphere | Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows. No purple-on-white defaults. |
 
-## Design Thinking
-
-Before coding, understand the context and commit to a BOLD aesthetic direction:
-- **Purpose**: What problem does this interface solve? Who uses it?
-- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
-- **Constraints**: Technical requirements (framework, performance, accessibility).
-- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
-
-**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
-
-Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
-- Production-grade and functional
-- Visually striking and memorable
-- Cohesive with a clear aesthetic point-of-view
-- Meticulously refined in every detail
-
-## Frontend Aesthetics Guidelines
-
-Focus on:
-- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
-- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
-- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
-- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
-
-NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
-
-Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
-
-**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
-
-Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.
+**Every design must have one unforgettable detail.** No two designs should look alike.
 
 ## Design System Foundations
 
-Every design starts with a token layer. Define CSS custom properties that encode the aesthetic direction — never scatter raw values through stylesheets. A well-structured variable system makes the entire interface feel cohesive even as complexity grows.
-
 ```css
-/* --- Palette: warm editorial with a punch of citron --- */
 :root {
-  --color-ink:        #1a1614;
-  --color-paper:      #f5f0e8;
-  --color-accent:     #c8e630;        /* citron — the memorable detail */
-  --color-muted:      #9b9083;
-  --color-surface:    #eae3d8;
-  --color-border:     rgba(26, 22, 20, 0.08);
-
-  /* Typography scale — modular ratio 1.25 (Major Third) */
+  --color-ink:     #1a1614;  --color-paper:   #f5f0e8;
+  --color-accent:  #c8e630;  --color-muted:   #9b9083;
+  --color-surface: #eae3d8;  --color-border:  rgba(26, 22, 20, 0.08);
+
   --text-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
   --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
   --text-xl:   clamp(1.563rem, 1.35rem + 1.06vw, 2rem);
   --text-2xl:  clamp(1.953rem, 1.6rem + 1.77vw, 2.75rem);
   --text-hero: clamp(2.441rem, 1.8rem + 3.2vw, 4.5rem);
 
-  /* Spacing — 4px base, geometric progression */
-  --space-2: 0.5rem;  --space-4: 1rem;
-  --space-6: 1.5rem;  --space-8: 2rem;
-  --space-16: 4rem;   --space-32: 8rem;
+  --space-2: 0.5rem; --space-4: 1rem;  --space-6: 1.5rem;
+  --space-8: 2rem;   --space-16: 4rem; --space-32: 8rem;
 
-  /* Motion — intentional easing curves, not defaults */
-  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
-  --duration-fast: 150ms;
-  --duration-normal: 300ms;
-  --duration-slow: 600ms;
+  --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms;
 
-  /* Elevation */
   --shadow-md: 0 4px 16px rgba(26, 22, 20, 0.08);
   --shadow-lg: 0 12px 48px rgba(26, 22, 20, 0.12);
 }
 ```
 
-**Anti-pattern:** Never scatter raw hex/px values through stylesheets. Every value should trace back to a token. Change the palette once and the entire interface follows.
-
 ## Component Patterns
 
-### Distinctive Card
-
-A card should never look like a Bootstrap default. Give it tension — an unexpected border treatment, an oversized label, or a hover that reveals hidden depth.
-
+**Card:**
 ```css
 .card {
   position: relative;
@@ -100,122 +58,54 @@ A card should never look like a Bootstrap default. Give it tension — an unexpe
   transition: transform var(--duration-normal) var(--ease-out-expo),
               box-shadow var(--duration-normal) var(--ease-out-expo);
 }
-
-.card:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow-lg);
-}
-
+.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
 .card__label {
-  position: absolute;
-  top: calc(-1 * var(--space-3));
-  left: var(--space-4);
-  background: var(--color-accent);
-  color: var(--color-ink);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4);
+  background: var(--color-accent); color: var(--color-ink);
+  font-size: var(--text-xs); font-weight: 700;
+  letter-spacing: 0.08em; text-transform: uppercase;
   padding: var(--space-1) var(--space-3);
 }
 ```
 
-### Hero Section with Staggered Reveal
-
-Orchestrate entrance animations with `animation-delay` for a cinematic first impression. One coordinated sequence beats a dozen scattered `fadeIn`s.
-
+**Hero staggered reveal:**
 ```css
 @keyframes rise {
   from { opacity: 0; transform: translateY(24px); }
   to   { opacity: 1; transform: translateY(0); }
 }
-
-.hero              { overflow: hidden; padding: var(--space-32) var(--space-8); }
-.hero__eyebrow     { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 100ms; }
-.hero__headline    { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 250ms; }
-.hero__body        { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 400ms; }
-.hero__cta         { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 550ms; }
+.hero           { overflow: hidden; padding: var(--space-32) var(--space-8); }
+.hero__eyebrow  { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 100ms; }
+.hero__headline { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 250ms; }
+.hero__body     { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 400ms; }
+.hero__cta      { animation: rise var(--duration-slow) var(--ease-out-expo) both; animation-delay: 550ms; }
 ```
 
-**Anti-pattern:** Don't animate everything. If the nav bounces, the sidebar slides, and the footer pulses — it's visual noise, not design. Motion has a narrative: one orchestrated entrance, then stillness.
-
-## Typography Pairing Examples
-
-Never reach for the same font twice. Each project deserves a pairing chosen for its specific character. These are starting points — not a rotation list.
+## Typography Pairings
 
 | Aesthetic | Display | Body | Mood |
 |-----------|---------|------|------|
-| Editorial luxury | Playfair Display | Source Serif 4 | Authoritative, rich serif contrast |
-| Swiss precision | Darker Grotesque | IBM Plex Sans | Sharp, high-contrast grotesque |
-| Warm humanist | Fraunces | Nunito Sans | Friendly optical sizes, approachable |
-| Brutalist edge | Monument Extended | JetBrains Mono | Wide + monospace = raw technical power |
-| Art nouveau organic | Cormorant Garamond | Lora | Flowing, calligraphic sensibility |
-| Retro-futuristic | Syne | Outfit | Geometric boldness meets clean body |
-
-Always include a fallback chain that preserves metrics: `'Fraunces', 'Georgia', serif` not just `'Fraunces', serif`. And never default to the same "safe" choices (Inter, Roboto, system-ui) — if every project looks the same, the typography isn't doing its job.
-
-## Design Quality Checklist
-
-Run this checklist before delivering any frontend work. Every item is a gate — if something fails, the design isn't finished.
-
-### Identity & Cohesion
-- [ ] Can you name the aesthetic direction in 2-3 words? (e.g., "warm editorial," "cold brutalist")
-- [ ] Are color, typography, spacing, and motion all telling the same visual story?
-- [ ] Is there at least one memorable detail — something unexpected that delights?
-
-### Typography
-- [ ] Display and body fonts are distinct and intentionally paired
-- [ ] Type scale uses `clamp()` for fluid responsive sizing — no fixed `px` breakpoints
-- [ ] Line heights are tuned: ~1.1–1.2 for headings, ~1.5–1.7 for body
-- [ ] Letter-spacing is adjusted for uppercase text and small sizes
-
-### Color & Contrast
-- [ ] Palette is defined as CSS custom properties — no raw hex in component styles
-- [ ] There is a clear dominant/accent hierarchy — not five competing colors
-- [ ] Text passes WCAG AA contrast minimums (4.5:1 body, 3:1 large text)
-- [ ] Dark/light theme (if applicable) is not just color inversion — both feel intentional
-
-### Layout & Spacing
-- [ ] Spacing flows from a consistent scale — no random `margin: 37px`
-- [ ] At least one layout choice breaks the expected grid — overlap, bleed, asymmetry
-- [ ] Component padding and gaps use spacing tokens, not ad-hoc values
-- [ ] The design holds at mobile, tablet, and desktop without layout collapse
-
-### Motion & Interaction
-- [ ] Page entrance has a coordinated animation sequence (staggered reveals)
-- [ ] Hover/focus states exist for all interactive elements
-- [ ] Animations use custom easing curves — never `linear` or bare `ease`
-- [ ] Motion serves narrative purpose — no decoration-only animation
-- [ ] `prefers-reduced-motion` is respected with a `@media` query fallback
-
-### Production Readiness
-- [ ] No hardcoded widths that break at unexpected viewports
-- [ ] Images and decorative elements have proper `alt` text or `aria-hidden`
-- [ ] Focus indicators are visible and styled to match the aesthetic
-- [ ] Performance: no layout thrashing from scroll-triggered animations without `will-change`
-## Convoy-Aware Design
-
-When building as part of a multi-agent convoy (multiple pages or sections built in parallel), additional rules apply:
-
-### If you ARE the foundation task agent
-
-You are establishing the design system for the entire project. Your output is the source of truth that all other agents will consume. Focus on:
-
-1. **Design tokens file** — comprehensive CSS custom properties covering all visual dimensions
-2. **Layout component** — shared page container used by every page
-3. **UI component library** — shared primitives (Button, Card, Heading, etc.)
-4. **Style guide brief** — aesthetic direction, content tone, terminology, nav labels
-
-Make explicit, decisive choices. Ambiguity in the foundation cascades into inconsistency across pages.
-
-### If you are a page task agent (consuming the foundation)
-
-You are NOT making design decisions — you are executing within an established system.
-
-- **Import** design tokens. **Do not** create new color values, font sizes, or spacing units.
-- **Import** the Layout component. **Do not** create a page-local layout wrapper.
-- **Import** UI components (Button, Card, etc.). **Do not** recreate them.
-- **Follow** the aesthetic direction and content tone from the foundation.
-- If a token you need doesn't exist, flag it in your output — NEVER add an inline value as a workaround.
+| Editorial luxury | Playfair Display | Source Serif 4 | Authoritative, rich |
+| Swiss precision | Darker Grotesque | IBM Plex Sans | Sharp grotesque |
+| Warm humanist | Fraunces | Nunito Sans | Friendly, approachable |
+| Brutalist edge | Monument Extended | JetBrains Mono | Raw technical power |
+| Art nouveau organic | Cormorant Garamond | Lora | Flowing, calligraphic |
+| Retro-futuristic | Syne | Outfit | Geometric boldness |
+
+Include a metric-preserving fallback chain (e.g., `'Fraunces', 'Georgia', serif`).
+
+## Quality Checklist
+
+**Identity:** aesthetic named in 2–3 words · color/type/space/motion tell one story · one memorable detail
+
+**Typography:** display+body pair distinct · `clamp()` fluid scale · heading lh ~1.1–1.2 / body lh ~1.5–1.7 · letter-spacing on uppercase/small
+
+**Color:** CSS vars only · dominant+accent hierarchy · WCAG AA (4.5:1 body, 3:1 large) · dark/light both intentional
+
+**Layout:** spacing tokens throughout · one grid-breaking element · responsive at mobile/tablet/desktop
+
+**Motion:** coordinated entrance sequence · hover/focus on all interactives · custom easing curves · `prefers-reduced-motion` fallback
+
+**Production:** no hardcoded widths · `alt`/`aria-hidden` on images · visible focus indicators · no scroll-animation layout thrashing
 
 > Load the **project-consistency** skill for the full Foundation Phase pattern and prompt templates.