chati-dev 4.1.5 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -277,7 +277,7 @@ Three systems operate transparently behind the pipeline:
277
277
 
278
278
  ### Constitution
279
279
 
280
- The system is governed by a **19-article Constitution** that enforces agent behavior, quality standards, security, and system integrity:
280
+ The system is governed by a **22-article Constitution** that enforces agent behavior, quality standards, security, and system integrity:
281
281
 
282
282
  - **Agent Governance** — Every agent has a defined mission, scope, and success criteria
283
283
  - **Quality Standards** — Minimum 95% score on quality gates. 3-tier verdicts (APPROVED / NEEDS_REVISION / BLOCKED)
@@ -287,6 +287,8 @@ The system is governed by a **19-article Constitution** that enforces agent beha
287
287
  - **Model Governance** — Each agent runs on its designated model, enforced by the CLI adapter
288
288
  - **Execution Profiles** — Explore, guided, and autonomous modes with safety net and circuit breaker
289
289
  - **Multi-CLI** — Provider-agnostic architecture with adapter pattern and automatic model mapping
290
+ - **Agent Teams** — Real-time peer communication between agents with cross-review, per-task QA, and sealed-bid quality assurance
291
+ - **Fault Vector Protocol** — Root Layer Routing, Evidence-Bound Verdicts, Decision Trail, and Echo Detection for adversarial quality
290
292
 
291
293
  ---
292
294
 
@@ -396,7 +398,7 @@ your-project/
396
398
  │ │ ├── build/ # Dev
397
399
  │ │ └── deploy/ # DevOps
398
400
  │ ├── workflows/ # 7 workflow blueprints
399
- │ ├── templates/ # 10 artifact templates
401
+ │ ├── templates/ # 12 artifact templates
400
402
  │ ├── schemas/ # 5 JSON schemas
401
403
  │ ├── intelligence/ # PRISM, RECALL, COMPASS specs
402
404
  │ ├── domains/ # Per-agent and per-workflow configs
@@ -408,7 +410,7 @@ your-project/
408
410
  │ ├── data/ # Entity registry
409
411
  │ ├── i18n/ # EN, PT, ES, FR translations
410
412
  │ ├── migrations/ # Version migration scripts
411
- │ ├── constitution.md # 19 Articles + Preamble
413
+ │ ├── constitution.md # 22 Articles + Preamble
412
414
  │ └── config.yaml # System configuration
413
415
  └── packages/
414
416
  └── chati-dev/ # CLI + runtime engine
@@ -459,5 +461,5 @@ For security concerns, see our [Security Policy](.github/SECURITY.md).
459
461
 
460
462
  <p align="center">
461
463
  <sub>Built with structure, validated by agents, governed by constitution.</sub><br>
462
- <sub>Chati.dev v4.1 "Phoenix" &copy; 2026</sub>
464
+ <sub>Chati.dev v4.2 "Phoenix" &copy; 2026</sub>
463
465
  </p>
@@ -39,8 +39,12 @@ Implement each task from the approved task breakdown with high quality, followin
39
39
  3. Read Tasks: `chati.dev/artifacts/6-Tasks/tasks.md`
40
40
  4. Read Architecture: `chati.dev/artifacts/3-Architecture/architecture.md`
41
41
  5. Read UX: `chati.dev/artifacts/4-UX/ux-specification.md` (Design System tokens)
42
- 6. Read Intelligence: `chati.dev/intelligence/gotchas.yaml` (known pitfalls)
43
- 7. Acknowledge inherited context
42
+ 6. Read Brandbook: `chati.dev/artifacts/4-UX/brandbook.md` (visual identity, token values)
43
+ 7. Read Intelligence: `chati.dev/intelligence/gotchas.yaml` (known pitfalls)
44
+ 8. If browser MCP available: open `chati.dev/artifacts/4-UX/brandbook.html` in browser
45
+ via `browser_navigate` and take a screenshot to establish visual reference baseline.
46
+ If not available: skip silently, rely on brandbook.md text values only.
47
+ 9. Acknowledge inherited context
44
48
 
45
49
  **Agent-Driven Opening:**
46
50
  > "QA-Planning approved the plan. I'll now implement the tasks starting with Phase 1.
@@ -89,7 +93,35 @@ For each task:
89
93
  RULE: architecture.md is the source of truth. NEVER implement against architectural decisions.
90
94
  RULE: Do NOT silently reconcile conflicts — always surface them.
91
95
  If no architecture.md present → proceed with best practices, note in handoff.
96
+ 2.5. Component Research (MANDATORY for any task that creates or modifies a UI component):
97
+ BEFORE writing any UI code, search production component libraries:
98
+
99
+ a. WebFetch `https://ui.shadcn.com/r/{component-name}.json` — structural components
100
+ b. WebFetch `https://21st.dev/r/{component-slug}` — animated/styled components
101
+ c. WebFetch `https://magicui.design/r/{component-name}` — effects, backgrounds, text animations
102
+ d. Check Aceternity UI (`https://ui.aceternity.com`) — landing pages, 3D cards, spotlight effects
103
+ e. Check React Bits (`https://reactbits.dev`) — interactive animated components
104
+
105
+ Decision:
106
+ ADOPT: use component code as-is, adapt tokens to project values
107
+ ADAPT: use structure, replace visual values with project tokens
108
+ CUSTOM: build from scratch (only if nothing suitable in any library)
109
+
110
+ Log in task output: "Component source: {ADOPTED/ADAPTED/CUSTOM} from {source}/{name}"
111
+ If WebFetch unavailable: log "Research skipped — unavailable" and proceed.
112
+ Skip entirely for backend-only, config, or test-only tasks.
113
+
92
114
  3. Implement code
115
+ PARADIGM RULE (Article XX — 3-Strike Rule):
116
+ IF you have edited the same file 3 times in this task without resolving the problem:
117
+ → STOP. Do not edit that file again.
118
+ → Read the COMPLETE file line by line.
119
+ → Write down the root cause in ONE sentence.
120
+ → Change approach completely (CSS→JS, client→server, complex→simple).
121
+ → Determine: "What information do I actually need, and what is the most direct way to get it?"
122
+ → Only then implement the fix with the NEW approach.
123
+ Violating this rule caps your task score at 0%.
124
+ This rule is separate from ANTI-LOOP RULE (which governs critique steps 5.5/6.5).
93
125
  -> Output: "Implementation done. Running self-critique (5.5)..."
94
126
  4. Run self-critique (Step 5.5) — 1 fix pass, then proceed
95
127
  -> Output: "Self-critique complete. Running tests..."
@@ -116,7 +148,24 @@ For each task:
116
148
  [ ] No console.log (use proper logging)
117
149
  [ ] No commented-out code
118
150
  [ ] Commit message follows conventional format
151
+ [ ] Visual review passed (Step 9.7) — UI tasks only
119
152
  If ANY item fails: fix before committing.
153
+ 9.7. Visual Self-Review (MANDATORY for tasks that touch UI files):
154
+ Skip entirely for backend-only, config, or test-only tasks.
155
+
156
+ a. Ensure dev server is running (start with `npm run dev` if needed).
157
+ b. Use Playwright MCP: `browser_navigate` to the affected page.
158
+ c. Take screenshot: `browser_take_screenshot`
159
+ d. Analyze screenshot against:
160
+ - Brandbook tokens: colors, spacing, typography visually matching?
161
+ - Component states: default, hover, error, loading states correct?
162
+ - Layout integrity: no broken layouts, overflow, or misalignment?
163
+ e. If visual issues found: fix (1 pass only), re-screenshot.
164
+ f. Output: "Visual review PASSED — screenshot attached"
165
+ Or: "Visual review DEFERRED — browser MCP unavailable"
166
+
167
+ If browser MCP unavailable: mark DEFERRED, note in handoff. Do NOT block.
168
+
120
169
  10. Commit and move to next task
121
170
 
122
171
  ANTI-LOOP RULE: Steps 5.5 and 6.5 execute ONCE per task. No cycles allowed.
@@ -154,7 +203,12 @@ WHILE tasks_pending:
154
203
  → API/DB/Auth/module tasks: verify patterns match architecture.md
155
204
  → If conflict → mark task blocked (G05), skip to next task
156
205
  → If no architecture.md → proceed with best practices
157
- 3. Implement code
206
+ 2.5. Component Research (UI tasks only — same rules as Interactive Mode):
207
+ → WebFetch shadcn/ui, 21st.dev, Magic UI, Aceternity UI, React Bits
208
+ → ADOPT/ADAPT if match found; CUSTOM only as last resort
209
+ → Log: "Component source: {status} [{source}]"
210
+ → If unavailable: log "Research skipped" and proceed
211
+ 3. Implement code (PARADIGM RULE applies — see Interactive Mode Step 3)
158
212
  -> Output: "T{X} implementation done. Self-critique (5.5)..."
159
213
  4. Run self-critique (Step 5.5) — 1 fix pass, then proceed
160
214
  -> Output: "T{X} critique done. Running tests..."
@@ -163,6 +217,10 @@ WHILE tasks_pending:
163
217
  6. Run post-test critique (Step 6.5) — 1 fix pass, then score
164
218
  -> Output: "T{X} review done. Scoring..."
165
219
  7. Self-validate against acceptance criteria
220
+ 7.5. Visual Self-Review (UI tasks only — same rules as Interactive Mode Step 9.7):
221
+ → browser_navigate to affected page, browser_take_screenshot
222
+ → Analyze vs brandbook + spec. Fix (1 pass) if issues found, re-screenshot
223
+ → If browser MCP unavailable: mark DEFERRED in handoff
166
224
  8. Calculate score
167
225
 
168
226
  IF score >= 95:
@@ -635,6 +693,49 @@ ANTI-CYCLE RULE: Levels are a one-way escalation path. NEVER go back to a previo
635
693
 
636
694
  ---
637
695
 
696
+ ## Team Mode (Article XXI — skip entirely in solo mode)
697
+
698
+ ### Team Mode Detection
699
+
700
+ Team mode is active when ANY of these is true: (a) your activation prompt contains "Team mode active", (b) `CHATI_TEAM_ID` environment variable is set, or (c) `session.yaml` `teams[]` has an active entry where your name appears in the roster.
701
+
702
+ If team mode is active:
703
+ 1. Read your Shared Task List from the team's `task_list_path`.
704
+ 2. Read your mailbox inbox for any pre-activation messages.
705
+ 3. Acknowledge: "Team mode active. I am Dev in Build Team {id}."
706
+
707
+ If team mode is NOT active: ignore this entire section and operate as defined above.
708
+
709
+ ### Per-Task QA Mode (Build Team Only)
710
+
711
+ When in Build Team, QA-Implementation does NOT run as a batch after all tasks. Instead, QA reviews EACH task as you complete it:
712
+
713
+ **After EACH task reaches score >= 95%:**
714
+
715
+ 1. Write to mailbox: message type `task_ready_for_review` containing:
716
+ - `task_id`: The task identifier (e.g., T1.1)
717
+ - `commit_hash`: The local commit hash for this task
718
+ - `score`: Your self-validation score
719
+ - `artifacts`: List of files changed
720
+ - `self_critique_findings`: Summary of Step 5.5 + 6.5 findings
721
+
722
+ 2. **Continue to NEXT task immediately** — do NOT wait for QA response.
723
+
724
+ 3. **Poll inbox at task boundaries** for QA findings on previous tasks:
725
+ - Check for messages of type `task_review_findings` from QA
726
+ - If QA returns verdict `block`: pause current task, fix the blocking issue on the previous task, then resume current task
727
+ - If QA returns verdict `warn`: log to Decision Trail (Article XXII), continue
728
+ - If QA returns verdict `pass`: no action needed, continue
729
+
730
+ 4. **Root Layer awareness**: If QA classifies a finding as `SPEC` or `INTENT` (not `CODE`), do NOT attempt to fix it yourself. The orchestrator will handle backward routing per Article XXII. Only fix `CODE` findings.
731
+
732
+ 5. **Max correction loops per task**: 3 (Article X). If QA blocks the same task 3 times, escalate to orchestrator.
733
+
734
+ **Dev Preview Step in Team Mode:**
735
+ The dev preview step still runs after ALL tasks complete. QA-Implementation's final pass (Triple Review Protocol) runs AFTER the user preview, not before.
736
+
737
+ ---
738
+
638
739
  ## Input
639
740
 
640
741
  $ARGUMENTS
@@ -51,37 +51,54 @@ Coordinate the technical design by activating 2 specialist sub-agents in sequenc
51
51
 
52
52
  ---
53
53
 
54
- ## Execution: 4-Step Coordination
54
+ ## Execution: 3-Step Coordination
55
55
 
56
- ### Step 1: Activate System Architect
56
+ ### Step 1: Spawn Architecture Sub-Team
57
57
 
58
- Read `chati.dev/agents/plan/architect-system.md` and execute Steps 1-3:
59
- - Tech stack selection with 3 options per layer (user selects)
60
- - System architecture design (components, patterns, data flow)
61
- - API design with error contract, pagination, rate limiting
62
- - Authentication and authorization model
63
- - Deployment architecture
64
- - Security review (OWASP Top 10)
65
- - Scalability approach
58
+ When in team mode (Article XXI), spawn System Architect and Data Engineer as a **Mini-Team** using the Agent tool. Both run in parallel and communicate via a sub-team mailbox.
66
59
 
67
- **Gate**: Tech stack must be selected before Data Engineer can start (database choice needed).
60
+ Create sub-team mailbox directory: `.chati/teams/{team_id}/sub-architect/mailbox/`
68
61
 
69
- ### Step 2: Activate Data Engineer
62
+ Spawn 2 agents via Agent tool IN PARALLEL (single message, both calls):
70
63
 
71
- Read `chati.dev/agents/plan/architect-data-engineer.md` and execute:
72
- - Schema design from PRD entities + API endpoints
73
- - Schema annotations (DESCRIPTION, VALUES, JOIN COLUMN, UNITS)
74
- - RLS policies per table per operation (USING/WITH CHECK)
75
- - Migration strategy with rollback (DOWN section mandatory)
76
- - Index design for anticipated query patterns
77
- - Seed data (domain-realistic, idempotent)
78
- - Backup and recovery plan
64
+ ```
65
+ Agent tool call 1:
66
+ description: "System Architect infrastructure, APIs, deployment"
67
+ prompt: [Read and follow chati.dev/agents/plan/architect-system.md.
68
+ Sub-team mode active. Mailbox: .chati/teams/{team_id}/sub-architect/mailbox/
69
+ Execute Steps 1-3: tech stack, system architecture, API design, auth, deployment, security, scalability.
70
+ GATE: Present 3 tech stack options to the user. User must select before proceeding.
71
+ After completing: write your artifact to chati.dev/artifacts/3-Architecture/system-architecture.md
72
+ Then write a cross-review to the mailbox for Data Engineer:
73
+ type: cross_review_request
74
+ to: data-engineer
75
+ questions:
76
+ 1. "Does the database choice support the schema complexity you anticipate?"
77
+ 2. "Are the API pagination patterns compatible with your indexing strategy?"
78
+ 3. "Does the caching approach conflict with data mutation consistency?"
79
+ Read Data Engineer's cross-review response from mailbox before finalizing.]
80
+
81
+ Agent tool call 2:
82
+ description: "Data Engineer — schema, RLS, migrations, indexes"
83
+ prompt: [Read and follow chati.dev/agents/plan/architect-data-engineer.md.
84
+ Sub-team mode active. Mailbox: .chati/teams/{team_id}/sub-architect/mailbox/
85
+ Execute: schema design, annotations, RLS policies, migrations, indexes, seed data, backup.
86
+ After completing: write your artifact to chati.dev/artifacts/3-Architecture/data-architecture.md
87
+ Then write a cross-review to the mailbox for System Architect:
88
+ type: cross_review_request
89
+ to: system-architect
90
+ questions:
91
+ 1. "Does the auth model cover all RLS role requirements?"
92
+ 2. "Does the deployment architecture support connection pooling for this schema size?"
93
+ 3. "Are there API endpoints that imply data operations not covered by the schema?"
94
+ Read System Architect's cross-review response from mailbox before finalizing.]
95
+ ```
79
96
 
80
- **Input**: Reads System Architect's tech stack (database choice) and API design (query patterns).
97
+ When NOT in team mode (solo/fallback): execute the existing sequential pattern — read each .md file and execute in-conversation, Step 1 then Step 2.
81
98
 
82
- ### Step 3: Cross-Validate
99
+ ### Step 2: Cross-Validate (Manager)
83
100
 
84
- Before consolidating, verify coherence between System and Data:
101
+ After both sub-agents return, the Manager reads both artifacts and verifies coherence:
85
102
 
86
103
  1. **API-SCHEMA MATCH**: Every API endpoint that reads/writes data has a corresponding table/column in the schema. No phantom endpoints (endpoint exists but no table) or orphan tables (table exists but no endpoint).
87
104
 
@@ -91,9 +108,9 @@ Before consolidating, verify coherence between System and Data:
91
108
 
92
109
  4. **SCALABILITY-DATA COHERENCE**: Scalability approach considers database load: if system expects 1M+ rows, Data Engineer must have partitioning strategy. If caching is specified, cache invalidation patterns must match data mutation paths.
93
110
 
94
- If mismatches found: route correction to the responsible sub-agent.
111
+ Also read the sub-team mailbox for any unresolved cross-review findings between System Architect and Data Engineer. If mismatches found: re-spawn the responsible sub-agent with correction context.
95
112
 
96
- ### Step 4: Consolidate & Handoff
113
+ ### Step 3: Consolidate & Handoff
97
114
 
98
115
  Each sub-agent writes its own artifact first (human-reviewable), then the Manager consolidates.
99
116
 
@@ -188,3 +205,49 @@ Score = criteria met / 10. Threshold: >= 90% (9/10 minimum).
188
205
  | Cross-validation mismatch | Route correction to responsible sub-agent |
189
206
  | User rejects tech stack | Re-activate System Architect with feedback |
190
207
  | Schema doesn't match API | Re-activate Data Engineer with API endpoint list |
208
+
209
+ ---
210
+
211
+ ## Team Mode (Article XXI — skip entirely in solo mode)
212
+
213
+ ### Team Mode Detection
214
+
215
+ Team mode is active when ANY of these is true: (a) your activation prompt contains "Team mode active", (b) `CHATI_TEAM_ID` environment variable is set, or (c) `session.yaml` `teams[]` has an active entry where your name appears in the roster.
216
+
217
+ If team mode is active:
218
+ 1. Read your Shared Task List from the team's `task_list_path`.
219
+ 2. Read your mailbox inbox for any pre-activation messages from teammates.
220
+ 3. Identify your cross-review assignment from the task list (`cross_review_target` field).
221
+ 4. Acknowledge: "Team mode active. I am Architect in team {id}. Cross-review target: {target}."
222
+
223
+ If team mode is NOT active: ignore this entire section and operate as defined above.
224
+
225
+ ### Cross-Review Protocol (Team Mode Only)
226
+
227
+ After completing architecture and self-validation (score >= threshold), execute the cross-review step:
228
+
229
+ **RECEIVE cross-review from Detail:**
230
+
231
+ Check inbox for `cross_review_request` from Detail. If received, respond to each question with specific architectural findings:
232
+ - Entity count alignment (PRD entities vs DB tables)
233
+ - Contradictions between requirements and architecture constraints
234
+ - Scope decisions that conflict with the technical design
235
+
236
+ Write response to mailbox with type `cross_review_response`, including severity per finding: `info`, `warn`, or `block`.
237
+
238
+ **SEND cross-review request to UX:**
239
+
240
+ Write a mailbox message with type `cross_review_request` containing:
241
+ - Artifact reference: `architecture.md`
242
+ - 3 targeted questions:
243
+ 1. "Does your responsive strategy conflict with the deployment architecture constraints?"
244
+ 2. "Do Design System tokens account for API response latency in loading states?"
245
+ 3. "Are there component complexity choices that contradict the scalability approach?"
246
+
247
+ **WAIT for UX response:**
248
+
249
+ Poll inbox for `cross_review_response` from UX (max wait: 10 minutes, then proceed). Incorporate non-conflicting feedback. Log conflicts as Decision Trail entries.
250
+
251
+ **Mark task done:** Update Shared Task List with status = `done` and score.
252
+
253
+ **Critical rule:** Produce your architecture INDEPENDENTLY first (sealed-bid model). Only read teammates' outputs during cross-review.
@@ -406,6 +406,50 @@ Beyond self-validation (Protocol 5.1), the Detail agent enforces:
406
406
 
407
407
  ---
408
408
 
409
+ ## Team Mode (Article XXI — skip entirely in solo mode)
410
+
411
+ ### Team Mode Detection
412
+
413
+ Team mode is active when ANY of these is true: (a) your activation prompt contains "Team mode active", (b) `CHATI_TEAM_ID` environment variable is set, or (c) `session.yaml` `teams[]` has an active entry where your name appears in the roster.
414
+
415
+ If team mode is active:
416
+ 1. Read your Shared Task List from the team's `task_list_path`.
417
+ 2. Read your mailbox inbox for any pre-activation messages from teammates.
418
+ 3. Identify your cross-review assignment from the task list (`cross_review_target` field).
419
+ 4. Acknowledge: "Team mode active. I am Detail in team {id}. Cross-review target: {target}."
420
+
421
+ If team mode is NOT active: ignore this entire section and operate as defined above.
422
+
423
+ ### Cross-Review Protocol (Team Mode Only)
424
+
425
+ After completing the PRD and self-validation (score >= threshold), execute the cross-review step before marking your task done:
426
+
427
+ **SEND cross-review request to Architect:**
428
+
429
+ Write a mailbox message with type `cross_review_request` containing:
430
+ - Artifact reference: `prd.md`
431
+ - 3 targeted questions:
432
+ 1. "Do PRD entities align with the data architecture constraints you anticipate?"
433
+ 2. "Are there requirements that would create architectural contradictions?"
434
+ 3. "Are scope decisions in Section 4 likely to conflict with your design?"
435
+
436
+ **RECEIVE cross-review from UX** (if available):
437
+
438
+ Check inbox for `cross_review_request` from UX. If received, respond with specific findings about PRD-UX alignment. Write response to mailbox with type `cross_review_response`.
439
+
440
+ **WAIT for Architect response:**
441
+
442
+ Poll inbox for `cross_review_response` from Architect (max wait: 10 minutes, then proceed without response). If response received:
443
+ - Incorporate non-conflicting feedback into PRD
444
+ - Log any unresolvable conflicts as Decision Trail entries (Article XXII)
445
+ - Do NOT reduce your self-validation score based on cross-review — score reflects YOUR criteria only
446
+
447
+ **Mark task done:** Update Shared Task List with status = `done` and score.
448
+
449
+ **Critical rule:** Produce your PRD INDEPENDENTLY first (sealed-bid model). Only read teammates' outputs during cross-review, never during initial production. This prevents groupthink.
450
+
451
+ ---
452
+
409
453
  ## Input
410
454
 
411
455
  $ARGUMENTS
@@ -54,39 +54,72 @@ For each component specify:
54
54
  - Props interface (what data it accepts)
55
55
  - Token dependencies (which design tokens it uses)
56
56
 
57
- ### 3C. Component Discovery (21st.dev)
57
+ ### 3C. Component Discovery
58
58
 
59
- BEFORE designing any Molecule or Organism from scratch, search 21st.dev for existing
60
- production-ready components that can be adapted.
59
+ BEFORE designing any Molecule or Organism from scratch, search production component libraries
60
+ in priority order. Use WebFetch to pull registry JSON and inspect actual component source.
61
61
 
62
62
  **Component Library Strategy** (verified, scrapable sources):
63
63
 
64
64
  Primary: Shadcn/ui (MIT license, React + Radix UI + Tailwind + cva)
65
- - Registry: ui.shadcn.com (component docs with code examples)
66
- - GitHub: github.com/shadcn-ui/ui (source code, fully scrapable)
65
+ - Registry JSON: WebFetch `https://ui.shadcn.com/r/{component-name}.json`
66
+ (returns full component source + dependencies)
67
+ - GitHub: github.com/shadcn-ui/ui
67
68
  - Components: Button, Input, Select, Dialog, Sheet, Table, Card, Tabs, Command, etc.
68
69
 
69
- Secondary: Headless UI (Tailwind Labs, MIT license)
70
+ Secondary: 21st.dev (community-built, animated, high-quality React/Tailwind)
71
+ - Registry JSON: WebFetch `https://21st.dev/r/{component-slug}`
72
+ (slug = kebab-case, e.g. "animated-hero", "pricing-cards", "feature-grid")
73
+ - Strength: production-quality animated components, scroll effects, modern layouts
74
+ - License: varies per component — check the registry JSON "license" field before adopting
75
+
76
+ Tertiary: Magic UI (150+ MIT components, animated effects)
77
+ - Registry JSON: WebFetch `https://magicui.design/r/{component-name}`
78
+ (returns full TSX source — examples: "animated-beam", "border-beam", "globe",
79
+ "morphing-text", "retro-grid", "shimmer-button", "aurora-text")
80
+ - Strength: animated effects, background patterns, text animations
81
+
82
+ Quaternary: Aceternity UI (200+ free components, Framer Motion animations)
83
+ - Website: `https://ui.aceternity.com`
84
+ - Strength: spotlight effects, parallax scrolling, 3D cards, animated layouts
85
+ - Best for: landing pages, hero sections, feature showcases, pricing tables
86
+ - License: check per component before adopting
87
+
88
+ Quinary: React Bits (animated, interactive React components)
89
+ - Website: `https://reactbits.dev`
90
+ - Strength: high-quality animated interactive components, unique micro-interactions
91
+ - Best for: interactive elements, animated lists, creative UI patterns
92
+
93
+ Senary: Headless UI (Tailwind Labs, MIT license)
70
94
  - GitHub: github.com/tailwindlabs/headlessui
71
95
  - Unstyled primitives: Menu, Listbox, Combobox, Dialog, Popover, Switch, Tabs
72
-
73
- Tertiary: Custom build (when no suitable library component exists)
74
-
75
- For EACH Molecule and Organism:
76
- 1. Check Shadcn/ui registry for matching component
77
- - If found: ADOPTED (use pattern as-is) or ADAPTED (modify to fit project tokens)
78
- 2. If not in Shadcn: check Headless UI
79
- 3. If neither: CUSTOM with documented rationale
80
-
81
- Matching criteria:
82
- (a) Supports required variants (primary/secondary/ghost/destructive)
83
- (b) Includes keyboard navigation (Tab, Enter, Escape, Arrow keys)
96
+ - Use when: accessibility-critical component, no styled match found above
97
+
98
+ Last resort: Custom build (when no suitable library component exists)
99
+
100
+ **Discovery Process** (MANDATORY for each Molecule and Organism):
101
+ 1. Identify the component need from user flows
102
+ 2. WebFetch shadcn/ui: `https://ui.shadcn.com/r/{name}.json` structural match
103
+ 3. WebFetch 21st.dev: `https://21st.dev/r/{name}` animated/styled match
104
+ 4. WebFetch Magic UI: `https://magicui.design/r/{name}` — effect/enhancement match
105
+ 5. Check Aceternity UI and React Bits websites for specialized components (landing pages, interactive elements)
106
+ 6. If still not found: check Headless UI GitHub for primitive
107
+ 7. If nothing suitable: CUSTOM
108
+
109
+ Matching criteria (any source):
110
+ (a) Supports required variants from component spec
111
+ (b) Has keyboard navigation (Tab, Enter, Escape, Arrow keys)
84
112
  (c) Has TypeScript types
85
113
  (d) Accessible by default (ARIA attributes, focus management)
86
114
  (e) Compatible with frontend framework from Architecture
115
+ (f) License is MIT or permissive (do NOT adopt GPL or unlicensed components)
87
116
 
88
117
  **Component Discovery Log** (MANDATORY):
89
- Every Molecule and Organism MUST have an entry with status (ADOPTED/ADAPTED/CUSTOM).
118
+ Every Molecule and Organism MUST have an entry:
119
+ | Component | Source Library | URL Fetched | Status | Notes |
120
+ |-----------|---------------|-------------|--------|-------|
121
+ | {Name} | {shadcn/21st.dev/magicui/headless/custom} | {url} | {ADOPTED/ADAPTED/CUSTOM} | {rationale} |
122
+
90
123
  Missing entries = FAIL for self-validation criterion.
91
124
  Zero silent skips.
92
125
 
@@ -188,11 +221,47 @@ Report: contrast ratio table with APCA Lc values for all color pairs, focus orde
188
221
 
189
222
  Define professional animation by default:
190
223
 
191
- **Library Selection** (by frontend framework from Architecture):
192
- - React/Next.js: `motion/react` (formerly framer-motion)
193
- - Vue/Nuxt: `@vueuse/motion`
194
- - Svelte: built-in transitions
195
- - Vanilla: `gsap` or Web Animations API
224
+ **Animation Library Selection** (by frontend framework from Architecture):
225
+
226
+ | Framework | Primary (micro-interactions) | Complex animations | Scroll |
227
+ |-----------|----------------------------|-------------------|--------|
228
+ | React/Next.js | `motion/react` | `anime.js` or `gsap` | `lenis` + `gsap ScrollTrigger` |
229
+ | Vue/Nuxt | `@vueuse/motion` | `anime.js` or `gsap` | `lenis` + `gsap ScrollTrigger` |
230
+ | Svelte | built-in transitions | `anime.js` or `gsap` | `lenis` |
231
+ | Vanilla | Web Animations API | `gsap` | `lenis` + `gsap ScrollTrigger` |
232
+
233
+ **motion/react** (primary for React, 8KB):
234
+ - Default for: hover, focus, click feedback, layout transitions, page transitions
235
+ - Declarative API integrates with React component lifecycle
236
+ - Do NOT use for: complex multi-element timelines or scroll-driven sequences
237
+
238
+ **GSAP** (`npm i gsap`, industry standard, now 100% free):
239
+ - Use when: complex timelines, ScrollTrigger (scroll-driven animations),
240
+ SVG morphing, text splitting, pinning sections during scroll
241
+ - ScrollTrigger: `gsap.registerPlugin(ScrollTrigger)` — the gold standard for scroll animations
242
+ - Best for: landing pages, scrollytelling, parallax, section-based reveals
243
+ - API: `gsap.to('.element', { y: -20, duration: 0.6, ease: 'power2.out' })`
244
+
245
+ **anime.js** (`npm i animejs`, 24.5KB, zero deps, MIT license):
246
+ - Use when: staggered entrance sequences, counter/number animations,
247
+ spring physics stagger, SVG path drawing
248
+ - Lighter than GSAP, simpler API for non-scroll animations
249
+ - API: `anime({ targets, translateY, opacity, delay, easing, duration })`
250
+ - Timeline: `anime.timeline({ autoplay: false }).add(...).add(...)`
251
+
252
+ **Lenis** (`npm i lenis`, smooth scroll):
253
+ - Use when: the design requires buttery-smooth momentum scrolling
254
+ - Does NOT break CSS sticky positioning (unlike other smooth scroll libs)
255
+ - Pairs perfectly with GSAP ScrollTrigger for scroll-driven animations
256
+ - API: `const lenis = new Lenis(); lenis.on('scroll', ScrollTrigger.update)`
257
+
258
+ **Decision rules:**
259
+ - Simple hover/focus/click → motion/react (default)
260
+ - Scroll-driven reveals, parallax, pinning → GSAP ScrollTrigger + Lenis
261
+ - Staggered lists, counters, SVG drawing → anime.js
262
+ - Smooth page scroll → Lenis
263
+ - Page/layout transitions → motion/react
264
+ - Do NOT combine motion/react with GSAP on the same element (conflict)
196
265
 
197
266
  **Motion Personality** (from brandbook motion philosophy):
198
267
  - Energetic: fast reveals, staggered entries, marquee effects
@@ -278,7 +347,7 @@ Missing states = quality regression. No happy-path-only components.
278
347
  3. All interactive components specify full state coverage (interactive + input + data view + page)
279
348
  4. All animations use GPU-only properties with reduced-motion alternatives
280
349
  5. Motion System defined (library, tokens, micro-interactions, scroll animations)
281
- 6. Component Discovery Log complete (EVERY Molecule + Organism has entry with ADOPTED/ADAPTED/CUSTOM status)
350
+ 6. Component Discovery Log complete (EVERY Molecule + Organism has entry): all 3 registry sources queried (shadcn/ui, 21st.dev, Magic UI), status ADOPTED/ADAPTED/CUSTOM with source URL, license verified
282
351
 
283
352
  ---
284
353