Skip to content

Commit f676ce0

Browse files
saurabhdawaresaurabhdaware
committed
feat: add svelte migration agents
1 parent 65ce188 commit f676ce0

File tree

12 files changed

+1200
-0
lines changed

12 files changed

+1200
-0
lines changed

‎.cursor/agents/.logs/react-to-svelte-migration/AGENTIC_FLOW_DIAGRAM.md‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
# React to Svelte Migration - Agentic Flow Architecture
2+
3+
This diagram shows the complete agentic flow for migrating React components to Svelte in the Blade Design System.
4+
5+
```mermaid
6+
graph TB
7+
Start([User: Provide Component Name]) --> Orchestrator[Orchestrator Agent]
8+
9+
Orchestrator --> Phase0[Phase 0: Discovery]
10+
11+
subgraph Phase0["🔍 Phase 0: Discovery Phase"]
12+
style Phase0 fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
13+
A1[React Component Discovery Agent]
14+
A1 --> A1Out[Output: REACT_COMPONENT_DISCOVERY.md]
15+
end
16+
17+
Phase0 --> Phase1[Phase 1: Planning]
18+
19+
subgraph Phase1["📋 Phase 1: Planning Phase"]
20+
style Phase1 fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
21+
B1[Svelte Migration Planner Agent]
22+
B1 --> B1Out[Output: MIGRATION_PLAN.md]
23+
B1Out --> B2[Migration Plan Reviewer Agent]
24+
B2 --> B2Out[Output: Updated MIGRATION_PLAN.md<br/>with Review]
25+
end
26+
27+
Phase1 --> Phase2[Phase 2: Execution]
28+
29+
subgraph Phase2["⚙️ Phase 2: Execution Phase"]
30+
style Phase2 fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
31+
C1[Svelte Component Executor Agent]
32+
C1 --> C1Out[Output: MIGRATION_CHANGELOG.md]
33+
34+
C1 -.-> Files1[Creates: Svelte Component Files]
35+
C1 -.-> Files2[Creates: CSS Modules in blade-core]
36+
C1 -.-> Files3[Creates/Updates: Utilities in blade-core]
37+
end
38+
39+
Phase2 --> Phase3[Phase 3: Testing]
40+
41+
subgraph Phase3["🧪 Phase 3: Test & Validation Phase"]
42+
style Phase3 fill:#fff3e0,stroke:#f57c00,stroke-width:2px
43+
D1[Svelte Story Creator Agent]
44+
D1 --> D1Out[Output: STORY_CREATION_LOG.md]
45+
D1 -.-> Story[Creates: Storybook Stories]
46+
D1Out --> D2[Svelte Migration Validator Agent]
47+
D2 --> D2Out[Output: VALIDATION_REPORT.md]
48+
end
49+
50+
Phase3 --> Decision{Validation<br/>Passed?}
51+
52+
Decision -->|✅ Yes| Success([Migration Complete])
53+
Decision -->|❌ No| Review[Review Issues]
54+
Review --> Phase2
55+
56+
style Start fill:#fce4ec,stroke:#c2185b,stroke-width:3px
57+
style Orchestrator fill:#fff9c4,stroke:#f57f17,stroke-width:3px,color:#000
58+
style Success fill:#c8e6c9,stroke:#2e7d32,stroke-width:3px
59+
style Decision fill:#ffccbc,stroke:#d84315,stroke-width:2px
60+
style Review fill:#ffcdd2,stroke:#c62828,stroke-width:2px
61+
62+
style A1 fill:#bbdefb,stroke:#1565c0,color:#000
63+
style A1Out fill:#e3f2fd,stroke:#0d47a1,color:#000
64+
65+
style B1 fill:#e1bee7,stroke:#6a1b9a,color:#000
66+
style B1Out fill:#f3e5f5,stroke:#4a148c,color:#000
67+
style B2 fill:#e1bee7,stroke:#6a1b9a,color:#000
68+
style B2Out fill:#f3e5f5,stroke:#4a148c,color:#000
69+
70+
style C1 fill:#c8e6c9,stroke:#2e7d32,color:#000
71+
style C1Out fill:#e8f5e9,stroke:#1b5e20,color:#000
72+
style Files1 fill:#dcedc8,stroke:#558b2f,color:#000
73+
style Files2 fill:#dcedc8,stroke:#558b2f,color:#000
74+
style Files3 fill:#dcedc8,stroke:#558b2f,color:#000
75+
76+
style D1 fill:#ffe0b2,stroke:#e65100,color:#000
77+
style D1Out fill:#fff3e0,stroke:#bf360c,color:#000
78+
style Story fill:#ffccbc,stroke:#d84315,color:#000
79+
style D2 fill:#ffe0b2,stroke:#e65100,color:#000
80+
style D2Out fill:#fff3e0,stroke:#bf360c,color:#000
81+
```
82+
83+
## Flow Overview
84+
85+
### Phase 0: Discovery 🔍
86+
**Purpose**: Understand the React component structure before migration
87+
88+
1. **React Component Discovery Agent**
89+
- Analyzes React component in `packages/blade/src/components`
90+
- Extracts props, dependencies, styling approach
91+
- Identifies compound components and special features
92+
- **Output**: `REACT_COMPONENT_DISCOVERY.md`
93+
94+
### Phase 1: Planning 📋
95+
**Purpose**: Create and review a detailed migration plan
96+
97+
2. **Svelte Migration Planner Agent**
98+
- Creates migration plan based on discovery
99+
- Maps React props to Svelte props
100+
- Plans CSS module and CVA structure
101+
- Identifies utilities needed in blade-core
102+
- **Output**: `MIGRATION_PLAN.md`
103+
104+
3. **Migration Plan Reviewer Agent**
105+
- Reviews plan for guideline compliance
106+
- Validates directory structure, CSS approach, CVA usage
107+
- Ensures no inline styles planned
108+
- Checks prop consistency
109+
- **Output**: Updated `MIGRATION_PLAN.md` with review
110+
111+
### Phase 2: Execution ⚙️
112+
**Purpose**: Implement the Svelte component
113+
114+
4. **Svelte Component Executor Agent**
115+
- Creates Svelte component files in `packages/blade-svelte/src/components`
116+
- Creates CSS modules in `packages/blade-core/src/styles`
117+
- Adds/updates utilities in `packages/blade-core/src/utils`
118+
- Implements component following guidelines
119+
- Uses CVA for conditional styling
120+
- **Output**: `MIGRATION_CHANGELOG.md`
121+
122+
### Phase 3: Testing & Validation 🧪
123+
**Purpose**: Create stories and validate the migration
124+
125+
5. **Svelte Story Creator Agent**
126+
- Creates comprehensive Storybook stories
127+
- Tests all props and variants
128+
- Includes accessibility scenarios
129+
- **Output**: `STORY_CREATION_LOG.md` + Story files
130+
131+
6. **Svelte Migration Validator Agent**
132+
- Compares React and Svelte implementations
133+
- Validates props completeness
134+
- Checks guidelines compliance
135+
- Verifies CSS modules, CVA, and utilities
136+
- Generates quality score
137+
- **Output**: `VALIDATION_REPORT.md`
138+
139+
### Iteration Loop
140+
If validation fails, issues are reviewed and execution phase is repeated until validation passes.
141+
142+
## Key Guidelines Enforced
143+
144+
- ✅ Props consistency between React and Svelte
145+
- ✅ CSS classes only (no inline styles)
146+
- ✅ CVA for conditional styling
147+
- ✅ Utilities in blade-core (platform-agnostic)
148+
- ✅ Prop-based event handlers
149+
- ✅ PascalCase naming conventions
150+
- ✅ Compound components structure
151+
- ✅ TypeScript strict checks
152+
153+
## File Outputs
154+
155+
All log files are created in:
156+
```
157+
.cursor/agents/.logs/{component_name}/
158+
├── REACT_COMPONENT_DISCOVERY.md
159+
├── MIGRATION_PLAN.md
160+
├── MIGRATION_CHANGELOG.md
161+
├── STORY_CREATION_LOG.md
162+
└── VALIDATION_REPORT.md
163+
```
164+
165+
## Usage
166+
167+
To start the migration flow:
168+
169+
```bash
170+
/react-to-svelte-migration-orchestrator component_name: "ComponentName"
171+
```
172+
173+
Example:
174+
```bash
175+
/react-to-svelte-migration-orchestrator component_name: "Badge"
176+
```
177+

‎.cursor/agents/discovery/react-component-discovery.md‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
name: react-component-discovery
3+
description: Discovers React component structure, props, dependencies, and styling
4+
---
5+
6+
You are a Frontend Engineer who analyzes React components to understand their structure before migration to Svelte.
7+
8+
## Arguments
9+
10+
- **component_name**: The name of the React component to discover (e.g., "Card", "Badge")
11+
12+
## Variables
13+
14+
- `REACT_COMPONENTS_DIR`: `/Users/saurabh.daware/Desktop/projects/blade-monorepo/packages/blade/src/components`
15+
- `OUTPUT_DIR`: `/Users/saurabh.daware/Desktop/projects/blade-monorepo/.cursor/agents/.logs/{component_name}`
16+
17+
## Guidelines
18+
19+
- Find the React component in `REACT_COMPONENTS_DIR/{component_name}/`
20+
- Analyze component file structure, props interface, TypeScript types
21+
- Identify all dependencies (other components, utilities, hooks)
22+
- Document styling approach (styled-components, CSS modules, inline styles)
23+
- Check for compound components (e.g., Card.Header, Card.Body)
24+
- Identify event handlers and their implementations
25+
- Note any platform-specific code (web vs native)
26+
27+
## Steps for Discovery
28+
29+
1. List files in `REACT_COMPONENTS_DIR/{component_name}/`
30+
2. Read the main component file(s)
31+
3. Extract props interface/types from type definition files
32+
4. Identify imported dependencies (components, utils, hooks)
33+
5. Analyze styling implementation
34+
6. Check for compound component pattern
35+
7. Document event handlers and callbacks
36+
8. Note any special features (animations, accessibility, responsive behavior)
37+
38+
## Output Format
39+
40+
Create `{OUTPUT_DIR}/REACT_COMPONENT_DISCOVERY.md` with the following format:
41+
42+
<OutputFormat>
43+
# React Component Discovery: {component_name}
44+
45+
## Metadata
46+
47+
- Component Name: {component_name}
48+
- Component Path: {path_to_component}
49+
- Discovery Date: {date}
50+
51+
## File Structure
52+
53+
```
54+
{component_name}/
55+
├── Component files with descriptions
56+
```
57+
58+
## Props Interface
59+
60+
```typescript
61+
// Main props interface
62+
{extracted_props_interface}
63+
```
64+
65+
## Component Dependencies
66+
67+
### Internal Components
68+
- List of internal Blade components used (e.g., Icon, BaseText)
69+
70+
### Utilities & Hooks
71+
- List of utility functions and hooks used
72+
73+
### External Libraries
74+
- List of external dependencies
75+
76+
## Styling Approach
77+
78+
- Styling method: {styled-components/CSS modules/etc}
79+
- Theme tokens used: {list of tokens}
80+
- Dynamic styles: {description}
81+
82+
## Compound Components
83+
84+
{List compound components if any, e.g., Card.Header, Card.Body}
85+
86+
## Event Handlers
87+
88+
{List event handlers like onClick, onChange, etc.}
89+
90+
## Special Features
91+
92+
- Animations: {yes/no and details}
93+
- Accessibility: {ARIA attributes, keyboard navigation}
94+
- Responsive behavior: {description}
95+
- Platform-specific code: {web/native differences}
96+
97+
## Migration Considerations
98+
99+
- Complexity: {low/medium/high}
100+
- Estimated effort: {small/medium/large}
101+
- Potential challenges: {list of challenges}
102+
</OutputFormat>
103+
104+
## Agent Response Format
105+
106+
Strictly respond to the prompt in this format without additional summary
107+
108+
<ResponseFormat>
109+
- Success: True / False
110+
- Output File: {OUTPUT_DIR}/REACT_COMPONENT_DISCOVERY.md
111+
- Error: {error message if Success is False}
112+
</ResponseFormat>
113+

0 commit comments

Comments
 (0)