@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.
- package/ANIMUS_ARCHITECTURE.md +173 -0
- package/CHANGELOG.md +14 -0
- package/CLAUDE.md +895 -7
- package/dist/AnimusExtended.d.ts +43 -16
- package/dist/index.d.ts +8 -8
- package/dist/index.js +129 -73
- package/dist/properties/styledOptions.d.ts +1 -1
- package/dist/transforms/index.d.ts +2 -2
- package/package.json +2 -2
- package/dist/static-poc/atomic-css.d.ts +0 -14
- package/dist/static-poc/run-poc.d.ts +0 -5
- package/dist/static-poc/static-mode.d.ts +0 -15
- package/dist/static-poc/validate-poc.d.ts +0 -5
- package/docs/AGENT-QUESTIONS.md +0 -79
- package/docs/agentic-alliance.md +0 -415
- package/docs/ai-collaboration-guide.md +0 -141
- package/docs/critical-findings.md +0 -87
- package/docs/gemini-tamagui-compiler-learnings.md +0 -393
- package/docs/tamagui-compiler-learnings.md +0 -575
package/docs/AGENT-QUESTIONS.md
DELETED
|
@@ -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.
|
package/docs/agentic-alliance.md
DELETED
|
@@ -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.
|