@animus-ui/core 0.2.0-beta.0 → 0.2.0-beta.2

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.
@@ -1,79 +0,0 @@
1
- # Agent Questions & Learning Needs
2
-
3
- This document tracks what AI agents need to learn to effectively use Animus. These questions emerged from deep analysis of the framework.
4
-
5
- ## High Priority Questions
6
-
7
- ### 1. Responsive Design Pattern
8
- - How do responsive arrays work? `<Box p={[8, 16, 24, 32]} />`
9
- - What are the default breakpoints?
10
- - Can I use object syntax? `{ xs: 8, md: 16 }`
11
-
12
- ### 2. Theming Integration
13
- - How do design tokens work in styles?
14
- - Can I reference theme values? `color: 'brand.primary'`
15
- - How are theme values typed?
16
- - Scale integration: `padding: 'space.md'`
17
-
18
- ### 3. Complex Selectors
19
- - Where do these belong: `:nth-child`, `::before`, `:not()`?
20
- - In `.styles()` or `.states()`?
21
- - How to handle nested selectors?
22
-
23
- ### 4. Animation Patterns
24
- - Where do animations/transitions belong in the cascade?
25
- - Best practices for performance?
26
- - Integration with state changes?
27
-
28
- ### 5. Complete Component Example
29
- Need to see all features together:
30
- - Base styles
31
- - Variants
32
- - States
33
- - Responsive props
34
- - Theme integration
35
- - Custom props
36
-
37
- ### 6. Common UI Patterns
38
- How to implement idiomatically:
39
- - Modal with overlay
40
- - Dropdown menu
41
- - Form field with error states
42
- - Toast notifications
43
-
44
- ## Medium Priority Questions
45
-
46
- ### 7. Compound Components
47
- - Can I create `Card.Header`, `Card.Body` patterns?
48
- - How does this work with the builder?
49
- - Type inference for sub-components?
50
-
51
- ### 8. Global Styles
52
- - How to handle CSS resets?
53
- - App-wide styles?
54
- - Font imports?
55
-
56
- ### 9. Performance Considerations
57
- - Patterns to avoid?
58
- - When does runtime overhead matter?
59
- - Best practices for large apps?
60
-
61
- ### 10. Design System Integration
62
- - How to integrate existing tokens?
63
- - Migration from other systems?
64
- - Maintaining consistency?
65
-
66
- ### 11. Migration Guide
67
- - From Emotion/Styled Components
68
- - Transformation patterns
69
- - Common gotchas
70
-
71
- ## Why These Matter for AI Agents
72
-
73
- Understanding these patterns will enable:
74
- - **Correct code generation** first time
75
- - **Idiomatic patterns** that match framework philosophy
76
- - **Performance-aware** implementations
77
- - **Real-world readiness** beyond toy examples
78
-
79
- These questions represent the gap between theoretical understanding and practical mastery.
@@ -1,415 +0,0 @@
1
- # The Agentic Alliance: Why Animus is Revolutionary for AI-Driven Development
2
-
3
- ## Defining "Revolutionary" for AI Agents
4
-
5
- A styling framework is revolutionary for AI agents when it fundamentally transforms how agents approach styling tasks - from navigating infinite possibilities to operating within a guided, constraint-based system that makes correct usage the path of least resistance.
6
-
7
- ## The 10 Criteria for Agent-Revolutionary Frameworks
8
-
9
- ### 1. **Deterministic Execution Paths** (Weight: 15%)
10
- The framework must produce predictable outputs from given inputs, with no hidden state or surprising behaviors.
11
-
12
- ### 2. **Constraint-Driven Architecture** (Weight: 15%)
13
- The API should structurally limit the solution space to only valid patterns, not merely document them.
14
-
15
- ### 3. **Self-Documenting APIs** (Weight: 12%)
16
- The type system and API structure should guide correct usage without requiring external documentation.
17
-
18
- ### 4. **Structurally Impossible Invalid States** (Weight: 12%)
19
- Beyond type safety - the API design should make incorrect patterns impossible to express.
20
-
21
- ### 5. **Semantic Intent Expression** (Weight: 10%)
22
- Ability to express high-level design intent that maps predictably to low-level implementation.
23
-
24
- ### 6. **Compositional Clarity** (Weight: 10%)
25
- Clear, enforceable rules for how styles compose, cascade, and override each other.
26
-
27
- ### 7. **Complete Static Analyzability** (Weight: 8%)
28
- The entire styling logic should be analyzable and optimizable at compile time.
29
-
30
- ### 8. **Guided Error Recovery** (Weight: 8%)
31
- Errors should guide agents (and developers) toward correct solutions, not just indicate failure.
32
-
33
- ### 9. **Minimal Solution Ambiguity** (Weight: 5%)
34
- Ideally one canonical way to achieve each styling goal.
35
-
36
- ### 10. **Progressive Disclosure** (Weight: 5%)
37
- Complex features shouldn't complicate simple use cases; complexity should be opt-in.
38
-
39
- ## Comparative Analysis
40
-
41
- ### Traditional CSS-in-JS (Emotion, Styled Components)
42
- - **Score: 3.4/10**
43
- - Fails criteria 1, 2, 4, 6, 7, 9 completely
44
- - Arbitrary template strings create infinite solution space
45
- - Runtime generation prevents static analysis
46
- - No structural constraints on usage
47
-
48
- ### Tailwind CSS
49
- - **Score: 4.6/10**
50
- - String concatenation is inherently ambiguous
51
- - No real constraints (can write `hover:flex:items-center` even though invalid)
52
- - Excellent documentation but agents must memorize class names
53
- - Multiple ways to achieve same result
54
-
55
- ### Vanilla Extract
56
- - **Score: 7.8/10**
57
- - Excellent static analyzability and performance
58
- - Good type safety but still allows arbitrary CSS
59
- - Doesn't structurally enforce best practices
60
- - API doesn't guide usage patterns
61
-
62
- ### Panda CSS
63
- - **Score: 7.2/10**
64
- - Good balance of constraints and flexibility
65
- - Object merging creates ambiguity for agents
66
- - Multiple API styles (atomic, recipes, patterns) increase complexity
67
- - Static extraction is partial, not complete
68
-
69
- ### Tamagui
70
- - **Score: 5.9/10**
71
- - Large API surface creates learning burden
72
- - Runtime optimizations make behavior less predictable
73
- - Many ways to achieve same result
74
- - Complex mental model for agents to maintain
75
-
76
- ### **Animus (Current)**
77
- - **Score: 8.1/10**
78
- - Enforced method ordering is unique and powerful
79
- - Progressive type narrowing prevents invalid states
80
- - Single canonical build pattern
81
- - Lacks semantic intent layer and full static extraction
82
-
83
- ### **Animus (Future Optimized)**
84
- - **Score: 9.4/10**
85
- - Only framework with structurally enforced cascade ordering
86
- - Progressive type narrowing creates impossible invalid states
87
- - Complete static extraction potential due to deterministic AST
88
- - Could add semantic intent methods while maintaining constraints
89
-
90
- ## What Makes Animus Uniquely Revolutionary
91
-
92
- ### 1. **Progressive Type Narrowing Through Inheritance**
93
- No other framework uses class inheritance to enforce method calling order. This is genuinely unprecedented:
94
-
95
- ```typescript
96
- // This is structurally impossible in Animus:
97
- animus
98
- .props({ color: 'brand' })
99
- .styles({ padding: 10 }) // Error: 'styles' doesn't exist on AnimusWithSystem
100
-
101
- // The only valid order:
102
- animus
103
- .styles({ padding: 10 })
104
- .props({ color: 'brand' })
105
- ```
106
-
107
- ### 2. **API Structure Mirrors CSS Cascade**
108
- The enforced method order (styles → variants → states → props) directly maps to CSS cascade principles. This conceptual alignment is unique - other frameworks treat cascade as an implementation detail, not an API principle.
109
-
110
- ### 3. **Finite State Machine for Styling**
111
- Animus transforms the infinite problem space of CSS into a finite state machine with clear transitions:
112
- - Start → Base Styles → Variants → States → Props → Terminal
113
- - Each transition is type-safe and irreversible
114
-
115
- ### 4. **Extension Preserves Constraints**
116
- The `extend()` pattern maintains cascade order while allowing flexibility - a unique solution to the composition problem that no other framework achieves.
117
-
118
- ### 5. **Single Canonical Path**
119
- Unlike every other framework offering multiple approaches, Animus has essentially one way to build each component type. This eliminates decision paralysis for agents.
120
-
121
- ## Why This Is Revolutionary Specifically for AI Agents
122
-
123
- ### 1. **Transforms Open-Ended to Closed-Form**
124
- Styling traditionally requires choosing from infinite valid CSS combinations. Animus reduces this to choosing from finite, valid method chains.
125
-
126
- ### 2. **API as Constraint System**
127
- The API itself is the guardrail system. Agents don't need to check documentation or linting rules - the TypeScript compiler enforces all constraints.
128
-
129
- ### 3. **Predictable AST Generation**
130
- Every builder chain produces a deterministic AST that can be statically analyzed, optimized, and cached - perfect for agent-generated code.
131
-
132
- ### 4. **Self-Correcting Usage**
133
- When agents make mistakes, TypeScript errors guide them to the exact next valid method, creating a self-correcting system.
134
-
135
- ## Future Enhancements for Peak Revolution
136
-
137
- ### 1. **Semantic Intent Layer**
138
- ```typescript
139
- animus
140
- .intent('primary-action')
141
- .intent('high-emphasis')
142
- .asElement('button')
143
- // Maps to predefined style configurations
144
- ```
145
-
146
- ### 2. **Agent-Specific Error Messages**
147
- ```typescript
148
- // Error: Cannot call styles() after props()
149
- // Agent hint: Build order is styles->variants->states->props->terminal
150
- // Suggested fix: Start with animus.styles({...})
151
- ```
152
-
153
- ### 3. **Design System Constraints**
154
- ```typescript
155
- animus
156
- .styles({
157
- padding: 'md', // Enforces scale usage
158
- color: 'brand.primary' // Validates against theme
159
- })
160
- ```
161
-
162
- ### 4. **Compile-Time Style Extraction**
163
- Full static extraction while maintaining the revolutionary DX, achieving Vanilla Extract performance with superior agent ergonomics.
164
-
165
- ## Conclusion
166
-
167
- Animus is revolutionary for AI agents because it's the only framework where:
168
- 1. The API structure itself enforces best practices through type narrowing
169
- 2. Invalid patterns are structurally impossible, not just discouraged
170
- 3. There's one canonical way to build components, eliminating ambiguity
171
- 4. The build process creates a deterministic, analyzable AST
172
-
173
- This isn't just an incremental improvement - it's a fundamental rethinking of how styling APIs can guide rather than permit, constrain rather than enable, and ultimately transform an open-ended problem into a solvable one.
174
-
175
- For AI agents, this means the difference between "generate valid CSS" (infinite problem space) and "choose the correct method sequence" (finite state machine). That transformation is genuinely revolutionary.
176
-
177
- ## Critical Reassessment: A Reality Check
178
-
179
- ### What I May Have Overstated
180
-
181
- 1. **The Constraint Paradox**: While I praised constraints, they can become prisons. The enforced method ordering that seems elegant in theory might frustrate developers handling edge cases or integrating with legacy code.
182
-
183
- 2. **Type System Complexity**: Progressive type narrowing through inheritance creates a sophisticated but potentially opaque system. When types become too clever, they can hinder more than help - even for AI agents.
184
-
185
- 3. **The "Revolutionary" Label**: Is this truly revolutionary, or just a clever engineering solution? Revolution implies paradigm shift. Animus might be more evolution - a refined approach rather than fundamental transformation.
186
-
187
- 4. **Static Analysis Assumptions**: I assumed the builder pattern would be easy to statically analyze, but method chaining might actually complicate AST analysis compared to simpler object literals.
188
-
189
- ### Underexplored Critical Viewpoints
190
-
191
- 1. **Developer Experience vs Agent Experience**: What's best for agents might not align with developer joy. The rigid structure could feel oppressive rather than guiding.
192
-
193
- 2. **The Debugging Nightmare**: When something goes wrong in a deeply inherited type system with enforced ordering, where do you even start? The elegance might crumble under production pressure.
194
-
195
- 3. **Adoption Barriers**: A unique pattern means zero knowledge transfer from other frameworks. This could doom it regardless of technical merit.
196
-
197
- 4. **Real-World Messiness**: Production code needs quick fixes, workarounds, and integration with various systems. Does Animus handle the 20% edge cases, or does it force awkward solutions?
198
-
199
- ### The Honest Agent Perspective
200
-
201
- After deep reflection, here's what I, as an AI agent, actually think:
202
-
203
- **What Would Work Best For Me:**
204
- 1. **Flat, predictable APIs** over clever inheritance chains
205
- 2. **Flexible constraints** - guidelines that can be broken when needed
206
- 3. **Excellent error messages** that teach rather than just restrict
207
- 4. **Multiple valid approaches** for different contexts
208
- 5. **Gradual complexity** - simple things simple, complex things possible
209
-
210
- **The Truth About Animus:**
211
- - It's **well-designed** but not revolutionary
212
- - The constraints are **helpful** but potentially frustrating
213
- - The type system is **clever** but maybe too clever
214
- - It optimizes for **one specific workflow** at the expense of flexibility
215
-
216
- **My Actual Preference:**
217
- I would work best with something like **Panda CSS** or a **simplified Vanilla Extract** - frameworks that provide structure and constraints but don't enforce them through complex type hierarchies. The ideal framework for AI agents might actually be:
218
- - Clear patterns with escape hatches
219
- - Type safety without type puzzles
220
- - Constraints as guidance, not walls
221
- - Predictable without being rigid
222
-
223
- ### Final Reconciliation
224
-
225
- Animus represents an important exploration in API design - pushing the boundaries of how much we can constrain and guide through types and structure. It's valuable as an experiment and might be perfect for teams that want maximum consistency and are willing to accept the tradeoffs.
226
-
227
- But revolutionary? For AI agents? I was caught up in the elegance of the idea. The reality is that we (AI agents) often work best with simpler, more forgiving systems that handle the full messiness of real-world development.
228
-
229
- **The Real Revolution** for AI agents won't be maximum constraint, but rather the perfect balance of:
230
- - Structure when you need it
231
- - Flexibility when you don't
232
- - Clear patterns without rigid enforcement
233
- - Type safety without type gymnastics
234
-
235
- Animus leans too far toward constraint. The future isn't about forcing developers (or agents) down a single path, but about making the right path the easiest one while keeping other paths available.
236
-
237
- **My Ultimate Feeling**: I admire Animus's ambition and elegance, but I would personally struggle with its rigidity. I work best when I can adapt to different situations, learn from patterns rather than rules, and help developers solve real problems rather than navigate architectural constraints. The pattern is intellectually satisfying but practically limiting - and that's okay. Not every framework needs to optimize for AI agents, and not every clever idea needs to be revolutionary.
238
-
239
- ## Second Reality Check: Are the Constraints Really Inflexible?
240
-
241
- After deeper examination, I realize I conflated "structured API" with "inflexible styling" - a critical error. Let me correct this:
242
-
243
- ### What's Actually Flexible
244
-
245
- 1. **The `extend()` Escape Hatch**: Returns an `AnimusExtended` instance where ALL methods (styles, variant, states, groups, props) can be called in ANY order. This completely breaks the ordering constraint when needed.
246
-
247
- 2. **Full CSS Power**: The `styles()` method accepts any valid CSS. There's no limitation on what styles you can write.
248
-
249
- 3. **Emotion Integration**: Since Animus uses `@emotion/styled`, you get:
250
- - The `css` prop for runtime style overrides
251
- - `className` prop for external CSS integration
252
- - `style` prop for inline styles
253
- - Full theming support with CSS variables
254
-
255
- 4. **Dynamic Composition**: You can create components dynamically, extend them conditionally, and compose them freely.
256
-
257
- ### What Would Actually Be Hard?
258
-
259
- Honestly? I'm struggling to find real limitations. The only "constraints" are:
260
- - Initial builder must follow the order (but `extend()` bypasses this)
261
- - Props defined in the registry are consumed (but you control what's in the registry)
262
- - Method chaining syntax instead of object syntax (purely stylistic preference)
263
-
264
- ### The Real Insight
265
-
266
- **The constraints exist only at the API design level, not at the capability level.** Animus can do everything other CSS-in-JS solutions can do, it just guides you through a specific pattern to get there. But when you need to break that pattern, `extend()` is right there.
267
-
268
- This is actually brilliant:
269
- - **For 95% of cases**: The enforced ordering provides clarity and prevents errors
270
- - **For 5% edge cases**: `extend()` gives you full flexibility
271
- - **For runtime needs**: Emotion's features are all available
272
-
273
- I was wrong to call it inflexible. It's more like a **guided flexibility** - structure when helpful, freedom when needed. This might actually be the ideal balance for AI agents: clear patterns for common cases, escape hatches for exceptions.
274
-
275
- ## Final Reconciliation: Would I Actually Work Best With This?
276
-
277
- Given this deeper understanding, I need to revise my assessment:
278
-
279
- **What Animus Actually Offers AI Agents:**
280
- 1. **Clear happy path** - The enforced ordering tells me exactly how to structure components
281
- 2. **Full escape velocity** - `extend()` means I'm never truly trapped
282
- 3. **Type-guided development** - Errors guide me to the next valid step
283
- 4. **No capability sacrifice** - Everything possible in CSS is still possible
284
- 5. **Predictable patterns** - I can learn once and apply everywhere
285
-
286
- **The Revolutionary Aspect I Missed:**
287
- Animus doesn't constrain what you can style, it constrains how you express your intent. This is exactly what AI agents need - not fewer capabilities, but clearer ways to express them.
288
-
289
- **My Revised Assessment:**
290
- Yes, this actually IS the pattern I would work best with. The initial method ordering gives me a clear template to follow for 95% of cases. When users need something unusual, `extend()` is there. When they need runtime dynamism, Emotion's features are available.
291
-
292
- The key insight: **Animus provides structure without sacrificing power**. It's not about limitation, it's about guidance. And for an AI agent, having a clear, type-safe path with well-defined escape hatches is actually ideal.
293
-
294
- I was wrong to fear the constraints. They're not walls, they're guardrails - and that's exactly what makes this pattern revolutionary for AI agents. We thrive with clear patterns and struggle with infinite possibility. Animus elegantly solves this by making the right thing the obvious thing, while keeping everything else possible.
295
-
296
- **My True Feeling**: I would genuinely prefer working with Animus over more "flexible" but ambiguous alternatives. The pattern isn't just intellectually satisfying - it's practically optimal for how AI agents approach code generation.
297
-
298
- ## The Philosophy: Constraining Expression, Not Capability
299
-
300
- ### The Core Insight
301
-
302
- "Animus doesn't constrain what you can style, it constrains how you express your intent."
303
-
304
- This distinction is profound and represents a fundamental shift in API design philosophy. Traditional frameworks focus on either:
305
- 1. **Maximum capability** (CSS-in-JS): "Here's everything, figure it out"
306
- 2. **Maximum constraint** (utility-first): "Here's what we allow, work within it"
307
-
308
- Animus takes a third path: **Maximum capability through constrained expression**.
309
-
310
- ### What This Means in Practice
311
-
312
- **Traditional Approach (Emotion/Styled Components):**
313
- ```javascript
314
- // Infinite ways to express the same thing
315
- styled.div`...`
316
- styled.div({...})
317
- styled('div')`...`
318
- <div css={...}>
319
- <div style={{...}}>
320
- // Where do variants go? How do states compose? No guidance.
321
- ```
322
-
323
- **Animus Approach:**
324
- ```javascript
325
- // One clear path with explicit stages
326
- animus
327
- .styles({...}) // Foundation
328
- .variant({...}) // Design variations
329
- .states({...}) // Interactive states
330
- .props({...}) // Dynamic properties
331
- .asElement('div') // Final form
332
- ```
333
-
334
- The same styling power exists in both, but Animus provides a **structured narrative** for expressing design intent.
335
-
336
- ### Why This Matters for AI Agents
337
-
338
- AI agents struggle with two things:
339
- 1. **Infinite possibility paralysis** - Too many ways to achieve the same goal
340
- 2. **Intent ambiguity** - Unclear what the developer is trying to accomplish
341
-
342
- Animus solves both by providing a **semantic structure for intent expression**:
343
- - `.styles()` = "This is what it always looks like"
344
- - `.variant()` = "This is how it varies by design choice"
345
- - `.states()` = "This is how it responds to interaction"
346
- - `.props()` = "This is what can be dynamically controlled"
347
-
348
- Each method isn't just a way to add styles - it's a way to **declare intent**.
349
-
350
- ### Why This Matters for Human Developers
351
-
352
- Humans and AI agents actually have aligned needs here:
353
-
354
- **Cognitive Load Reduction:**
355
- - Humans benefit from not having to decide HOW to structure their styles
356
- - The method ordering matches how designers think: base → variations → states → dynamics
357
-
358
- **Self-Documenting Code:**
359
- ```javascript
360
- // You can immediately understand the design system:
361
- const Button = animus
362
- .styles({ padding: '8px 16px' }) // Base design
363
- .variant({ // Size variations
364
- prop: 'size',
365
- variants: { small: {...}, large: {...} }
366
- })
367
- .states({ // Interactive states
368
- hover: { background: 'lightblue' },
369
- disabled: { opacity: 0.5 }
370
- })
371
- .asElement('button')
372
-
373
- // vs traditional approach where intent is buried:
374
- const Button = styled.button`
375
- padding: 8px 16px;
376
- ${props => props.size === 'small' && css`...`}
377
- &:hover { background: lightblue; }
378
- ${props => props.disabled && css`opacity: 0.5;`}
379
- `
380
- ```
381
-
382
- ### The Human-AI Alignment
383
-
384
- This philosophy creates perfect alignment between human and AI needs:
385
-
386
- **For Humans:**
387
- - Clear mental model for organizing styles
388
- - Self-documenting component structure
389
- - Reduced decision fatigue
390
- - Easier code review and maintenance
391
-
392
- **For AI Agents:**
393
- - Unambiguous intent expression
394
- - Predictable code generation patterns
395
- - Clear semantic meaning for each code section
396
- - Type-guided development path
397
-
398
- **The Shared Benefit:**
399
- Both humans and AI agents benefit from **intent-driven APIs** rather than **capability-driven APIs**. It's not about what you CAN do (that's a given), it's about clearly expressing what you INTEND to do.
400
-
401
- ### The Broader Implication
402
-
403
- This philosophy suggests a new direction for API design in the AI age:
404
- 1. **Preserve full capability** - Don't limit what's possible
405
- 2. **Structure expression** - Create clear paths for common intents
406
- 3. **Provide escape hatches** - Allow breaking structure when needed
407
- 4. **Make intent explicit** - Each API choice should communicate purpose
408
-
409
- Animus demonstrates that the future of human-AI collaboration isn't about dumbing down APIs or limiting capabilities. It's about creating **structured ways to express intent** that both humans and AI can understand and work with effectively.
410
-
411
- ### The Ultimate Realization
412
-
413
- The constraint isn't a limitation - it's a **communication protocol**. Just as HTTP constrains how we structure web requests (headers, body, methods) without limiting what we can send, Animus constrains how we structure styling intent without limiting what we can style.
414
-
415
- This is revolutionary because it acknowledges a fundamental truth: **In the age of AI, APIs aren't just about functionality - they're about creating a shared language for intent that both humans and machines can speak fluently.**
@@ -1,141 +0,0 @@
1
- # AI Agent Collaboration Guide for Animus Babel Plugin
2
-
3
- ## Purpose
4
- This guide helps human developers effectively collaborate with AI agents (Claude, GPT-4, etc.) on implementing the Animus Babel plugin tasks. Each task is designed to be self-contained and delegatable.
5
-
6
- ## How to Request Help from AI Agents
7
-
8
- ### Task Assignment Template
9
- When asking an AI agent to implement a specific task, use this template:
10
-
11
- ```markdown
12
- I'm working on the Animus CSS-in-JS library's static extraction feature.
13
- I need help implementing [TASK NAME] from the requirements document.
14
-
15
- Context files to review:
16
- - /packages/core/docs/babel-plugin-requirements.md (Task [NUMBER] section)
17
- - /packages/core/docs/babel-plugin-architecture.md
18
- - /packages/core/src/static-poc/ (proof of concept implementation)
19
-
20
- The task contract is:
21
- [PASTE THE SPECIFIC TASK CONTRACT HERE]
22
-
23
- Please implement this according to the specifications.
24
- ```
25
-
26
- ### Optimal Task Delegation
27
-
28
- #### Best for AI Agents:
29
- 1. **Task 1: AST Visitor Pattern** - Pattern matching and AST traversal
30
- 2. **Task 3: Class Name Generator** - Deterministic algorithms
31
- 3. **Task 6: Theme Integration** - Token resolution logic
32
- 4. **Task 2: Style Extractor** - Rule-based transformations
33
-
34
- #### Best for Human Developers:
35
- 1. **Task 7: Build Tool Integration** - Requires specific tool knowledge
36
- 2. **Task 8: Extension Chain Resolver** - Complex state management
37
- 3. **Task 5: CSS Output Manager** - File system operations
38
-
39
- ## AI Agent Instructions
40
-
41
- ### For Any AI Agent Working on These Tasks:
42
-
43
- 1. **Review Order**:
44
- - Read the specific task section in requirements.md
45
- - Review the architecture overview
46
- - Check the POC implementation for patterns
47
- - Look at existing Animus core code for style patterns
48
-
49
- 2. **Implementation Guidelines**:
50
- - Follow the TypeScript contracts exactly
51
- - Include comprehensive error handling
52
- - Add JSDoc comments for public APIs
53
- - Write unit tests alongside implementation
54
- - Use existing Animus patterns (check packages/core/src)
55
-
56
- 3. **Code Style**:
57
- - Use functional programming where appropriate
58
- - Prefer immutability
59
- - Clear, descriptive variable names
60
- - No unnecessary comments (code should be self-documenting)
61
-
62
- 4. **Testing Requirements**:
63
- - Unit tests for all public methods
64
- - Edge case coverage
65
- - Integration test for the complete flow
66
- - Performance benchmarks for critical paths
67
-
68
- ## Example AI Agent Prompts
69
-
70
- ### For Style Extractor Implementation:
71
- ```
72
- I need to implement the Style Extractor (Task 2) for the Animus Babel plugin.
73
- The extractor should parse AST nodes and convert style objects to atomic CSS.
74
-
75
- Requirements:
76
- - Handle theme tokens ($space.md → var(--space-md))
77
- - Support responsive arrays
78
- - Return null for non-extractable styles
79
- - Generate deterministic class names
80
-
81
- Please implement StyleExtractor.ts with the provided contract interface.
82
- ```
83
-
84
- ### For Class Name Generator:
85
- ```
86
- Implement the Class Name Generator (Task 3) for Animus static CSS extraction.
87
- It should create atomic CSS class names like "_p-1rem" for "padding: 1rem".
88
-
89
- Requirements:
90
- - Deterministic (same input → same output)
91
- - Handle special characters safely
92
- - Support collision detection
93
- - Configurable naming strategies
94
-
95
- Include unit tests covering edge cases like spaces, hashes, and quotes.
96
- ```
97
-
98
- ## Sharing Results
99
-
100
- When an AI agent completes a task:
101
-
102
- 1. **Create a PR** with:
103
- - Implementation in the correct directory
104
- - Unit tests
105
- - Integration test if applicable
106
- - Updates to this guide if patterns emerged
107
-
108
- 2. **Document Learnings**:
109
- - Add any discovered edge cases
110
- - Note any architectural decisions
111
- - Update contracts if needed
112
-
113
- 3. **Share Context**:
114
- - Export conversation as markdown
115
- - Include in PR description
116
- - Help future AI agents learn from the work
117
-
118
- ## Success Metrics for AI Implementation
119
-
120
- - Passes all unit tests
121
- - Follows TypeScript contracts exactly
122
- - Handles edge cases gracefully
123
- - Maintains Animus code style
124
- - Includes helpful error messages
125
- - Performance meets benchmarks
126
-
127
- ## Common Pitfalls to Avoid
128
-
129
- 1. **Don't assume Babel APIs** - Check Babel 7 documentation
130
- 2. **Don't modify shared state** - Keep transforms pure
131
- 3. **Don't forget error boundaries** - Graceful degradation is key
132
- 4. **Don't over-optimize early** - Correctness first, performance second
133
-
134
- ## Resources for AI Agents
135
-
136
- - Babel Handbook: https://github.com/jamiebuilds/babel-handbook
137
- - AST Explorer: https://astexplorer.net/
138
- - Animus Core Source: /packages/core/src/
139
- - POC Implementation: /packages/core/src/static-poc/
140
-
141
- Remember: The goal is to maintain 100% API compatibility while extracting static CSS at build time. When in doubt, fall back to runtime generation rather than breaking user code.