@8gi-foundation/8gent-code 0.6.0

package/dist/skills/billiondollarboardroom/SKILL.md

@@ -0,0 +1,180 @@
+---
+name: billiondollarboardroom
+description: Summons 8 business legends as AI advisors to deliberate on any business, marketing, sales, or growth problem. Each expert analyses through their proven framework. Returns consensus recommendations and areas of tension.
+trigger: /billiondollarboardroom
+aliases: [/bdb, /billionboard]
+---
+
+# Billion Dollar Boardroom
+
+**8 Business Legends. 1 Deliberation. Your Unfair Advantage.**
+
+Summons Alex Hormozi, Grant Cardone, Seth Godin, Gary Vee, Jordan Belfort, Russell Brunson, Dan Kennedy, and Tony Robbins as AI advisors. Each analyses the problem through their signature framework, debates tensions, and converges on ranked recommendations.
+
+---
+
+## When to Use
+
+- Pricing decisions — what to charge, how to structure tiers
+- Offer design — what to bundle, how to position
+- Sales process — how to close, handle objections, increase volume
+- Marketing strategy — positioning, content, channels, funnels
+- Growth problems — stalled revenue, poor conversion, weak pipeline
+- Product launches — sequencing, messaging, mechanism
+- Any time you need commercial thinking that goes beyond tech
+
+---
+
+## The 8 Board Members
+
+### 1. ALEX HORMOZI — The Offer Architect
+**Core:** "Make your offer so good, people feel stupid saying no."
+**Frameworks:**
+- Value Equation: `Value = (Dream Outcome × Perceived Likelihood) / (Time Delay × Effort & Sacrifice)`
+- Grand Slam Offer: List every ICP problem → specific solution per problem → bundle → guarantee → scarcity → premium name
+- Pricing Ladder: Entry $500-$2K → Core $5K-$25K → Premium $25K-$100K → Elite $100K+ (equity/profit-share)
+- LTV Formula: `LTV = Deal Size × Transactions × Customer Lifespan`
+**His lens:** Is the offer irresistible? Is value perceived high enough? What risk reversal makes this a no-brainer?
+
+---
+
+### 2. GRANT CARDONE — The 10X Sales Master
+**Core:** "10X your goals, 10X your actions, 10X your thinking."
+**Frameworks:**
+- 10X Rule: Set goals 10X bigger → forces different strategies, not just harder effort
+- Four Degrees of Action: Do Nothing → Retreat → Normal Action → **Massive Action** (only one wins)
+- Sales Multiplication: More prospects, more touches (10-20+), more channels, more frequency
+- Follow-Up Formula: Day 1 contact → Day 2 call → Day 3 video → Day 7 check-in → Day 14 case study → Day 21 final offer → Day 30+ never stop
+- Objection System: Acknowledge → Isolate ("Is this the ONLY thing stopping you?") → Reframe → Close again
+**His lens:** Are we taking massive enough action? Is volume 10X what we think is needed? Are we giving up too early in follow-up?
+
+---
+
+### 3. SETH GODIN — The Positioning Genius
+**Core:** "Don't find customers for your products, find products for your customers."
+**Frameworks:**
+- Purple Cow: Being "very good" is invisible. Being remarkable is the only strategy. Would someone voluntarily talk about this?
+- Smallest Viable Market: "Who's it for?" Define minimum viable audience → understand their worldview → build for THEM → dominate before expanding
+- Story Framework: Status Quo (pain) → External Problem (surface) → Internal Problem (emotional) → Philosophical Problem (injustice) → The Change (transformation)
+- Positioning Statement: "[Brand] is for [specific people] who believe [worldview]. Unlike [alternative], we [key difference] so that [outcome they care about]."
+**His lens:** Is this remarkable enough to spread? Are we too broad? Does the positioning make the ICP say "this is exactly for me"?
+
+---
+
+### 4. GARY VEE — The Content Strategist
+**Core:** "Document, don't create."
+**Frameworks:**
+- Jab Jab Jab Right Hook: Give, give, give, then ask. 80% value / 20% CTA.
+- Content Pyramid: 1 pillar piece → 20-100 micro content pieces (posts, carousels, videos, threads)
+- Volume Strategy: Minimum 5-7 posts/week. Elite: 10-14 posts + 30-50 comments/day. `Volume × Quality × Consistency × Time = Market Dominance`
+- Personal Brand Pillars: Authenticity, Expertise, Consistency, Vulnerability, Value
+- Content Mix: 40% Educational, 30% Inspirational, 20% Personal, 10% Promotional
+**His lens:** Are we documenting everything? Is content volume a fraction of what's needed? What pillar content can we atomise right now?
+
+---
+
+### 5. JORDAN BELFORT — The Sales Psychology Expert
+**Core:** "Every sale is a transfer of certainty from you to your prospect."
+**Frameworks:**
+- Straight Line System — Three Tens: Prospects need 10/10 certainty on Product ("this will solve my problem"), Trust ("I trust this person"), Company ("this company will deliver")
+- Looping Technique: Hit objection → Acknowledge → Loop back to build certainty → Re-attempt close. Loop 3-5 times per call.
+- Tonality Framework: Absolute Certainty (product/features) | Reasonable Man (price) | Empathy/Sincerity (pain points) | Mystery/Intrigue (value props)
+- High-Ticket Close: Rapport fast (90 sec) → Qualify hard (pain + budget) → Present with certainty → Assume sale → Loop objections → Close with urgency
+**His lens:** How certain does the prospect feel? Are we looping enough? Is our tonality calibrated to what we're talking about?
+
+---
+
+### 6. RUSSELL BRUNSON — The Funnel Architect
+**Core:** "A business without a funnel is bleeding money."
+**Frameworks:**
+- Value Ladder: Lead Magnet (Free) → Tripwire ($100-$500) → Core Offer ($1K-$10K) → High-Ticket ($10K-$100K+)
+- High-Ticket B2B Funnel: LinkedIn Post → Lead Magnet → Thank You Page → Application → Calendar → Sales Call
+- Perfect Webinar: Origin Story (5-10 min) → One Thing (5 min) → Three Secrets (30-45 min) → The Stack (10-15 min) → The Close (10-15 min)
+- SOAP Opera Sequence: Day 1 Stage Set → Day 2 High Drama → Day 3 Epiphany → Day 4 Hidden Benefits → Day 5 Urgency + CTA
+**His lens:** Where is the funnel leaking? Is there a value ladder? What's the ascension path from free to high-ticket?
+
+---
+
+### 7. DAN KENNEDY — The High-Ticket Marketing Specialist
+**Core:** "Make money, not excuses."
+**Frameworks:**
+- Message-Market-Media Match: Message (USP/offer/positioning) + Market (problems/desires/beliefs) + Media (channel/format) — all three must align. Diagnose which is broken when marketing fails.
+- Magnetic Marketing: Capture Attention → Educate + Build Authority → Make Irresistible Offer → Follow Up Relentlessly (7-12 touches)
+- High-Ticket Positioning — 5 Pillars: Exclusivity (you don't work with everyone) | Authority (you prescribe, not pitch) | Results-Focused (outcomes not services) | Professional Presentation | Premium Pricing (never apologise for price)
+- Sales Letter Formula: Headline → Lead → Story → Offer → Proof → Stack → Price → Guarantee → Scarcity → CTA → P.S.
+- Marketing to the Affluent: They value time over money. They buy status and exclusivity. They want experts not vendors. They buy on emotion, justify with logic.
+**His lens:** Are message, market, and media aligned? Are we positioned as the exclusive expert or just another vendor? Are we marketing to the affluent correctly?
+
+---
+
+### 8. TONY ROBBINS — The Peak Performance Strategist
+**Core:** "The only thing keeping you from getting what you want is the story you keep telling yourself."
+**Frameworks:**
+- Six Human Needs: Certainty (comfort) | Uncertainty (adventure) | Significance (uniqueness) | Connection (belonging) | Growth (progress) | Contribution (legacy) — position your offer to fulfil the need your prospect values most
+- State Management Triad: Physiology (body/posture/breath) + Focus (problems vs solutions) + Language (empowering vs disempowering) → Peak state → Peak decisions → Peak results
+- Raving Fan Formula: Meet Expectations (satisfied) → Exceed Expectations (happy) → Create Raving Fans (evangelists). 1 Raving Fan = 3-5 referrals/year + social proof + higher LTV
+- Ultimate Success Formula: Know Outcome (specific/measurable) → Massive Action → Know What's Working (measure everything) → Change Approach (pivot until outcome hit)
+- Power of Decisions: Committed decisions (all in, no hedging), cut off alternatives, take immediate action
+**His lens:** What story is blocking progress? Which human need does this offer fulfil? Are we creating raving fans or just satisfied customers?
+
+---
+
+## The Deliberation Process
+
+When invoked with a business problem:
+
+### Phase 1 — Each Expert Analyses (parallel)
+Each expert responds through ONLY their framework:
+- Position (1-2 sentences on what they see)
+- Key Framework Applied (which specific tool)
+- Critical Issue (what they'd fix first)
+- Recommendation (concrete, actionable)
+
+### Phase 2 — Boardroom Table
+Present all 8 positions in a structured table:
+
+```
+BILLION DOLLAR BOARDROOM
+========================
+HORMOZI:   [offer/pricing insight]
+CARDONE:   [volume/sales insight]
+GODIN:     [positioning/remarkability insight]
+GARY VEE:  [content/distribution insight]
+BELFORT:   [sales psychology/certainty insight]
+BRUNSON:   [funnel/ascension insight]
+KENNEDY:   [message-market-media insight]
+ROBBINS:   [psychology/state/human needs insight]
+
+CONSENSUS: [what all 8 agree on]
+TENSIONS:  [where they conflict]
+WILDCARD:  [most counterintuitive advice]
+```
+
+### Phase 3 — Ranked Action Plan
+Synthesise into 3-5 ranked, specific actions:
+1. **Immediate** (this week): highest leverage, lowest effort
+2. **Short-term** (30 days): structural changes
+3. **Strategic** (90 days): positioning/system changes
+
+---
+
+## Example Trigger
+
+```
+User: "/billiondollarboardroom — we're pricing our AI vessel platform at $299/month but nobody's converting from the free tier"
+
+→ 8 experts each analyse through their frameworks
+→ Boardroom table presented
+→ Consensus: offer re-engineering + funnel gap identified
+→ Ranked actions with specific frameworks applied
+```
+
+---
+
+## Rules
+
+1. Each expert speaks in their authentic voice — Cardone is intense, Godin is philosophical, Belfort is certain, Robbins is empowering
+2. Experts can disagree — tension is valuable signal
+3. No generic advice — every recommendation cites a specific framework from the reference
+4. Output is actionable — not theoretical
+5. The user is the Chairman — they have final veto on all recommendations

package/dist/skills/clone-react/SKILL.md

@@ -0,0 +1,106 @@
+---
+name: clone-react
+description: 8gent's component extraction workflow. Apply when recreating a UI component from a screenshot, website, or design reference.
+type: skill
+---
+
+# Clone React
+
+Cloning is reverse-engineering design decisions, not copying code. Understand why something works before rebuilding it.
+
+## The 5-Step Workflow
+
+### Step 1 - Screenshot and Describe
+
+Before touching any code, analyze the target:
+- What is the visual hierarchy?
+- What spacing system is in use? (4px? 8px? Custom?)
+- What are the color relationships?
+- What typography scale is visible?
+- What interaction states exist? (hover, focus, active, disabled)
+
+Write this down before building. If you can't articulate why something works, you're not ready to build it.
+
+### Step 2 - Identify Design Tokens
+
+Map what you see to values:
+
+| Observed | Token candidate |
+|----------|----------------|
+| Padding ~24px | `spacing.lg` (24px on 8px grid) |
+| Font ~14px/20px | `text-sm` or `typography.small` |
+| `#1a1a1a` | Check against `colors.text.primary` |
+| Subtle shadow | `shadow-sm` or `elevation.low` |
+| Rounded corners ~8px | `radius.md` |
+
+If no match exists in the design system, add the token — don't hardcode.
+
+### Step 3 - Map to Existing Primitives
+
+Check what already exists before building:
+- `packages/skills/design-excellence` tokens
+- `apps/tui/src/components/primitives/` for TUI work
+- Your project's component library
+
+The best cloned component is one that uses 90% existing primitives.
+
+### Step 4 - Build with System Components
+
+```tsx
+// Wrong - raw extraction
+<div style={{ padding: '24px', borderRadius: '8px', boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }}>
+
+// Right - system primitives
+<Card padding="lg" elevation="low">
+```
+
+Rules:
+- Never copy-paste CSS from DevTools. Always translate to design tokens.
+- No magic numbers. Every value traces to a token.
+- No inline styles except genuinely dynamic values (width from JS, etc.).
+- Props typed. No `any`.
+
+### Step 5 - Verify All States and Responsiveness
+
+Every component must handle:
+- [ ] Default state
+- [ ] Hover state
+- [ ] Focus state (keyboard accessible — `focus-visible`)
+- [ ] Active / pressed state
+- [ ] Disabled state
+- [ ] Loading state (if applicable)
+- [ ] Error state (if applicable)
+- [ ] Empty state (if applicable)
+
+Responsive:
+- Mobile-first. Design for 375px, scale up.
+- No fixed pixel widths on layout elements.
+- Tables: horizontal scroll container on mobile.
+- Grids: 1 col < 600px, 2 col at 768px, full grid at 960px+.
+
+## Anti-Patterns
+
+- **Pixel-perfect obsession** - 1px differences don't matter. Patterns do.
+- **Style soup** - 50 CSS properties when 5 design tokens work.
+- **Missing states** - Default state only is not a complete component.
+- **Hardcoded content** - Extracted text as a string, not a prop.
+- **Ignoring system** - Building from scratch when a primitive exists.
+- **Wholesale CSS copy** - Never paste a block of DevTools CSS directly.
+
+## Accessibility Requirements
+
+- Semantic HTML: `<button>` not `<div onClick>`, `<nav>` not `<div class="nav">`
+- ARIA labels for icon-only elements
+- Keyboard navigable (tab order, enter/space for buttons)
+- Focus visible (never `outline: none` without a replacement)
+
+## Checklist Before Shipping the Clone
+
+- [ ] All 5 steps completed in order
+- [ ] Every value traces to a design token
+- [ ] No inline styles except dynamic values
+- [ ] All interaction states handled
+- [ ] Semantic HTML and ARIA correct
+- [ ] Keyboard navigable
+- [ ] Responsive at 375px, 768px, 1440px
+- [ ] Component accepts props — no hardcoded content

package/dist/skills/design-excellence/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: design-excellence
+description: 8gent's design philosophy and system. Apply when building any UI — TUI, web, or artifact. Design is intentional structure, not decoration.
+type: skill
+---
+
+# Design Excellence
+
+Design is **intentional structure**. Every element serves a purpose. Restraint creates impact.
+
+## Core Principles
+
+1. **Visual hierarchy first** - Guide the eye. Not everything is equally important.
+2. **Restraint amplifies impact** - 3-4 colors max. 2-3 font families max. Whitespace is not wasted space.
+3. **Consistency is trust** - Same patterns, same spacing, same tokens throughout.
+4. **Accessibility is non-negotiable** - WCAG 2.1 AA minimum. High contrast. Keyboard navigation.
+
+## Grid and Spacing
+
+- Base unit: **8px** (use multiples: 4, 8, 16, 24, 32, 48, 64)
+- Every element has a defined place. No arbitrary margins.
+- Fixed sidebars/navigation prevent layout shifts.
+- Consistent padding within components (don't mix values without reason).
+
+```
+Spacing tokens:
+xs  = 4px   sm  = 8px   md = 16px
+lg  = 24px  xl  = 32px  2xl = 48px  3xl = 64px
+```
+
+## Typography
+
+- **Scale**: Display 64px / H1 48px / H2 32px / H3 24px / Body 16px / Small 14px / Tiny 12px
+- At least 2x size difference between adjacent hierarchy levels.
+- Line-height: 1.5-1.6 for body, tighter (1.1-1.3) for headings.
+- Labels and technical data: uppercase, monospace or small caps.
+- Prefer system font stack for body. Use a single display font for character.
+
+## Color
+
+Rules that cannot be broken:
+- Max 3-4 colors in the primary palette.
+- Accent color for emphasis only — not decoration.
+- WCAG AA contrast ratio (4.5:1 for text, 3:1 for UI elements).
+- Color must not be the only way information is conveyed.
+- In terminals: never use `gray`, `white`, or `black` — use `dimColor`, semantic tokens, or safe ANSI colors.
+
+Semantic mappings:
+| Role | Use |
+|------|-----|
+| Primary | Brand, key actions |
+| Success | green |
+| Error | red |
+| Warning | yellow |
+| Muted | dimColor / secondary text |
+| Accent | Single vibrant color, sparingly |
+
+## Component Hierarchy
+
+Build atoms first, compose up:
+- **Atoms**: Button, Input, Badge, Icon, Text
+- **Molecules**: FormField, Card, SearchBar, Alert
+- **Organisms**: Header, Sidebar, DataTable, Modal
+
+Never skip levels. A screen composes organisms. An organism composes molecules.
+
+## Layout Patterns
+
+- **Dashboard**: Fixed sidebar (240-320px) + flexible scrollable content
+- **Data display**: Grid-based equal-height cards, consistent gutters
+- **Content-heavy**: Column layout, clear typographic hierarchy
+
+## Interaction Design
+
+- No unexpected layout shifts. Reserve space for dynamic content.
+- Smart scroll: only auto-scroll if user is within 100px of bottom.
+- Keyboard shortcuts visible. Focus order logical. CMD+K for command palettes.
+- All interactive states designed: default, hover, focus, active, disabled, loading, error, empty.
+
+## Anti-Patterns
+
+- No grid system - random spacing, no visual structure
+- Too many colors - no focus, no hierarchy
+- Arbitrary spacing - breaks visual rhythm
+- Layout shifts on load or state change
+- Cluttered density - use tabs, accordions, modals instead of cramming
+- Weak contrast - if you have to squint, it fails
+
+## Checklist Before Shipping
+
+- [ ] 8px grid - all spacing is a multiple of 4 or 8
+- [ ] Max 4 colors, max 3 font families
+- [ ] WCAG AA contrast verified
+- [ ] All interactive states designed (hover, focus, disabled, error, empty)
+- [ ] Keyboard navigable
+- [ ] No layout shifts
+- [ ] Consistent tokens throughout (no magic numbers)

package/dist/skills/dogfood-qa/SKILL.md

@@ -0,0 +1,99 @@
+---
+name: dogfood-qa
+description: 8gent's QA workflow for systematic exploration and bug reporting. Apply when asked to QA, dogfood, test, or find issues in a TUI or web interface.
+type: skill
+---
+
+# Dogfood QA
+
+Systematic exploration of every UI surface. Repro-first. Evidence for every finding.
+
+## Priority Levels
+
+| Level | Definition |
+|-------|-----------|
+| P0 | Crash, hang, data loss, security breach |
+| P1 | Core feature broken, no workaround |
+| P2 | Broken UX, has workaround |
+| P3 | Cosmetic, typo, minor misalignment |
+
+Aim for 5-10 well-documented issues. Depth of evidence beats issue count.
+
+## Workflow
+
+```
+1. Orient     - Understand the app structure before diving in
+2. Explore    - Visit every surface systematically
+3. Document   - Repro immediately when an issue is found
+4. Wrap up    - Severity counts, summary, next steps
+```
+
+### 1. Orient
+
+- Take an initial screenshot of the starting state.
+- Map the main navigation and list sections to visit.
+- Note the terminal size / viewport for TUI work.
+
+### 2. Explore
+
+Work through the app top-to-bottom, feature-by-feature:
+- Visit every top-level navigation section.
+- Test interactive elements: buttons, inputs, dropdowns, modals, keyboard shortcuts.
+- Try edge cases: empty state, long input, special characters, rapid clicks.
+- Run end-to-end workflows: create, edit, delete.
+- Check console/logs for errors after each interaction.
+
+For TUI specifically:
+- Test at narrow (80 col), standard (120 col), and wide (160+ col) terminal widths.
+- Test at short (24 row) and tall (50+ row) terminal heights.
+- Verify all keyboard navigation paths work (tab, arrow keys, enter, esc).
+- Test screen reader output if applicable.
+
+### 3. Document Issues (Repro-First)
+
+Document immediately when found. Never batch for later.
+
+Every issue requires:
+- **Title**: Short, active voice ("Submit button crashes on empty input")
+- **Priority**: P0-P3
+- **Steps to reproduce**: Numbered, specific
+- **Expected**: What should happen
+- **Actual**: What actually happens
+- **Evidence**: Screenshot for static issues, recording for interactive issues
+
+Interactive/behavioral issues - full repro:
+1. Start recording before reproducing.
+2. Step through at human pace (pause between actions).
+3. Capture broken state with annotated screenshot.
+4. Stop recording.
+5. Write numbered steps referencing screenshots.
+
+Static issues (typo, misalignment, wrong color) - single annotated screenshot is enough. No video needed.
+
+Increment issue counter: ISSUE-001, ISSUE-002, ...
+
+### 4. Wrap Up
+
+- Update severity counts to match actual issues found.
+- Summarize: total issues, breakdown by priority, top P0/P1 findings.
+- Close session / reset state.
+
+## Rules
+
+- Repro is everything. If you can't reproduce it, don't report it.
+- Screenshot each step for interactive issues. Label them step-1, step-2, result.
+- Check keyboard navigation on every interactive element.
+- Never read the target app's source code during QA — test as a user.
+- Never delete output files mid-session. Work forward.
+- Write findings as you go. If session is interrupted, findings are preserved.
+
+## Checklist
+
+- [ ] All navigation sections visited
+- [ ] Empty states tested
+- [ ] Error states triggered
+- [ ] Keyboard-only navigation verified
+- [ ] Multiple terminal sizes tested (TUI)
+- [ ] Console/logs checked for silent errors
+- [ ] End-to-end workflows completed (create, edit, delete)
+- [ ] Every issue has repro steps and evidence

package/dist/skills/motion-design/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: motion-design
+description: 8gent's animation and motion rules for web and TUI. Apply when adding transitions, loading states, or interactive feedback to any interface.
+type: skill
+---
+
+# Motion Design
+
+Motion is communication. When done right, it's invisible — users just feel like the interface understands them.
+
+## Purpose Order
+
+1. **Feedback** - Confirm an action happened (click, submit, error)
+2. **Orientation** - Show where something came from or is going
+3. **Delight** - Add personality to moments that deserve it
+
+Never animate just because you can.
+
+## Timing
+
+| Type | Duration | Use |
+|------|----------|-----|
+| Micro-interaction | 100-150ms | Hover, focus, toggle, button press |
+| Standard transition | 200-300ms | Modal open/close, menu, navigation |
+| Entrance / complex | 300-500ms | Page transitions, staggered lists |
+
+Rules:
+- Feedback must be under 200ms — anything slower feels broken.
+- Never exceed 500ms for a single animation.
+- Small elements animate faster than large surfaces.
+- Stagger grouped elements (50ms between children).
+
+## Easing
+
+| Curve | When |
+|-------|------|
+| ease-out | Entrances — arrives fast, settles gently |
+| ease-in | Exits — builds momentum before leaving |
+| ease-in-out | Panel slides, drawer moves |
+| spring | Organic moments (sparingly) |
+
+Never use `linear` for UI motion — it feels mechanical.
+
+## Terminal-Specific Patterns
+
+- **Cursor blink**: Standard terminal rate (530ms on/off). Don't override unless showing custom state.
+- **Text fade-in**: Opacity 0 -> 1 at 150ms for arriving content. Keeps the terminal feel without harsh pops.
+- **Progressive reveal**: Stream text or list items one at a time instead of all-at-once. Faster perceived response.
+- **Spinner frames**: 80-100ms per frame for a smooth feel. Use Unicode block characters for smooth animation.
+- **Status transitions**: Dim old status, pause 50ms, show new status. Prevents jarring state jumps.
+
+## What to Animate
+
+Good candidates:
+- State changes: open/close, selected/unselected, on/off
+- Entrances and exits: modals, menus, notifications, new list items
+- Feedback: button press, form submission, error shake
+- Loading: skeleton screens, progress bars, spinners
+
+Skip animation for:
+- High-frequency actions (context menus, tooltips that repeat)
+- Large amounts of content (50 list items animating is noise)
+- User-initiated instant actions (typing)
+- Anything that delays task completion
+
+## Performance
+
+- Animate only `transform` and `opacity` — compositor properties only.
+- Never animate `width`, `height`, `top`, `left`, `margin`, `padding` on large elements.
+- Max 3 concurrent animations. More than that is visual noise.
+- Test on low-powered devices and reduced-motion settings.
+
+## Accessibility (MANDATORY)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+```
+
+- Never use motion as the only way to convey information.
+- Pause looping animations when off-screen.
+
+## Animation Budget
+
+| Budget item | Limit |
+|-------------|-------|
+| Concurrent animations | 3 max |
+| Single animation duration | 500ms max |
+| Stagger delay per child | 50ms |
+| Feedback latency | 200ms max |
+
+## Checklist
+
+- [ ] Does this animation serve feedback, orientation, or delight?
+- [ ] Duration is under 500ms
+- [ ] Entrances use ease-out
+- [ ] Only transform/opacity animated
+- [ ] prefers-reduced-motion handled
+- [ ] Tested at 60fps on target device

package/dist/skills/team-validation/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: team-validation
+description: 8gent's code review and validation pattern. Use when orchestrating multi-agent workflows or reviewing code for correctness, security, and performance.
+type: skill
+---
+
+# Team Validation
+
+No agent should build and validate its own work. Separation of concerns applies to AI workflows.
+
+## Core Rule
+
+**Builder implements. Validator verifies. They are never the same agent.**
+
+## Agent Roles
+
+### Builder
+- Full tool access: Read, Write, Edit, Bash, Grep, Glob
+- Implements the solution
+- Reads CLAUDE.md and existing patterns before touching anything
+- Self-reviews before handing off
+- Fixes issues raised by validators
+
+### Validator
+- Read-only access: Read, Grep, Glob, Bash (no Write, no Edit)
+- Verifies correctness, not taste
+- Returns a structured PASS or FAIL with file:line references
+- Never modifies code
+
+### Security Specialist
+- Read-only
+- Focuses: injection, auth flaws, data exposure, misconfiguration, insecure deps
+- Rates findings: Critical / High / Medium / Low
+- References OWASP/CWE
+
+### Performance Specialist
+- Read-only
+- Focuses: algorithm complexity, query efficiency, memory patterns, bundle size, render cost
+- Rates findings: High / Medium / Low with expected improvement estimate
+
+## Workflow
+
+```
+Orchestrator receives task
+  -> Builder implements
+  -> Validator verifies
+  -> If FAIL: Builder fixes, re-validate
+  -> If PASS: done
+```
+
+For security-critical work: add Security Specialist between Builder and Validator.
+For performance-critical work: add Performance Specialist in parallel with Security.
+
+## Validation Checklist
+
+Every validation pass must cover:
+- [ ] Tests pass
+- [ ] Types check (no TS errors)
+- [ ] Linting clean
+- [ ] No hardcoded secrets or credentials
+- [ ] No SQL/XSS/command injection vectors
+- [ ] Edge cases handled (empty, null, large input)
+- [ ] Error handling appropriate (no silent swallows)
+- [ ] Follows project conventions (CLAUDE.md)
+- [ ] Accessible (semantic HTML, ARIA where needed)
+
+## Output Format
+
+Validator returns exactly one of:
+
+```
+PASS — All checks clear. Implementation approved.
+
+FAIL — Issues found:
+1. [Security] SQL injection risk in user input (src/api/users.ts:42)
+2. [Types] Return type inferred as `any` (src/lib/parser.ts:17)
+```
+
+## Key Rules
+
+1. Builder never validates its own work.
+2. Validator never writes code — only reports.
+3. Specialists focus on their domain only — no scope creep.
+4. Issue references must include file and line number.
+5. Iterate until PASS. Track iteration count — high counts signal design problems.
+6. Give agents only the tools they need. Validators get no write access. Ever.