mycontext-cli 2.0.2 β†’ 2.0.4

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.
Files changed (69) hide show
  1. package/README.md +426 -103
  2. package/dist/README.md +426 -103
  3. package/dist/agents/implementations/ClaudeAgentWorkflow.d.ts.map +1 -1
  4. package/dist/agents/implementations/ClaudeAgentWorkflow.js +75 -4
  5. package/dist/agents/implementations/ClaudeAgentWorkflow.js.map +1 -1
  6. package/dist/agents/implementations/CodeGenSubAgent.d.ts.map +1 -1
  7. package/dist/agents/implementations/CodeGenSubAgent.js +69 -0
  8. package/dist/agents/implementations/CodeGenSubAgent.js.map +1 -1
  9. package/dist/agents/implementations/PromptConstructorAgent.d.ts.map +1 -1
  10. package/dist/agents/implementations/PromptConstructorAgent.js +23 -0
  11. package/dist/agents/implementations/PromptConstructorAgent.js.map +1 -1
  12. package/dist/agents/interfaces/SubAgent.d.ts +2 -0
  13. package/dist/agents/interfaces/SubAgent.d.ts.map +1 -1
  14. package/dist/cli.js +13 -40
  15. package/dist/cli.js.map +1 -1
  16. package/dist/commands/generate-components.d.ts +0 -5
  17. package/dist/commands/generate-components.d.ts.map +1 -1
  18. package/dist/commands/generate-components.js +0 -101
  19. package/dist/commands/generate-components.js.map +1 -1
  20. package/dist/commands/health-check.d.ts +28 -0
  21. package/dist/commands/health-check.d.ts.map +1 -0
  22. package/dist/commands/health-check.js +271 -0
  23. package/dist/commands/health-check.js.map +1 -0
  24. package/dist/commands/init.d.ts.map +1 -1
  25. package/dist/commands/init.js +2 -6
  26. package/dist/commands/init.js.map +1 -1
  27. package/dist/config/build-strategies.json +173 -22
  28. package/dist/package.json +2 -2
  29. package/dist/utils/NextJSProjectGenerator.d.ts +70 -0
  30. package/dist/utils/NextJSProjectGenerator.d.ts.map +1 -0
  31. package/dist/utils/NextJSProjectGenerator.js +811 -0
  32. package/dist/utils/NextJSProjectGenerator.js.map +1 -0
  33. package/dist/utils/NextJSProjectValidator.d.ts +103 -0
  34. package/dist/utils/NextJSProjectValidator.d.ts.map +1 -0
  35. package/dist/utils/NextJSProjectValidator.js +759 -0
  36. package/dist/utils/NextJSProjectValidator.js.map +1 -0
  37. package/dist/utils/PreCommandValidator.d.ts +77 -0
  38. package/dist/utils/PreCommandValidator.d.ts.map +1 -0
  39. package/dist/utils/PreCommandValidator.js +251 -0
  40. package/dist/utils/PreCommandValidator.js.map +1 -0
  41. package/dist/utils/ProjectHealthMonitor.d.ts +131 -0
  42. package/dist/utils/ProjectHealthMonitor.d.ts.map +1 -0
  43. package/dist/utils/ProjectHealthMonitor.js +454 -0
  44. package/dist/utils/ProjectHealthMonitor.js.map +1 -0
  45. package/dist/utils/ProjectInitializationSafeguards.d.ts +81 -0
  46. package/dist/utils/ProjectInitializationSafeguards.d.ts.map +1 -0
  47. package/dist/utils/ProjectInitializationSafeguards.js +620 -0
  48. package/dist/utils/ProjectInitializationSafeguards.js.map +1 -0
  49. package/dist/utils/ProjectStructureRepair.d.ts +110 -0
  50. package/dist/utils/ProjectStructureRepair.d.ts.map +1 -0
  51. package/dist/utils/ProjectStructureRepair.js +785 -0
  52. package/dist/utils/ProjectStructureRepair.js.map +1 -0
  53. package/dist/utils/ProjectStructureValidator.d.ts +128 -0
  54. package/dist/utils/ProjectStructureValidator.d.ts.map +1 -0
  55. package/dist/utils/ProjectStructureValidator.js +662 -0
  56. package/dist/utils/ProjectStructureValidator.js.map +1 -0
  57. package/dist/utils/agentDefinitions.d.ts +5 -0
  58. package/dist/utils/agentDefinitions.d.ts.map +1 -1
  59. package/dist/utils/agentDefinitions.js +99 -1
  60. package/dist/utils/agentDefinitions.js.map +1 -1
  61. package/dist/utils/mcpTools.d.ts +189 -0
  62. package/dist/utils/mcpTools.d.ts.map +1 -1
  63. package/dist/utils/mcpTools.js +462 -1
  64. package/dist/utils/mcpTools.js.map +1 -1
  65. package/package.json +2 -2
  66. package/dist/commands/core.d.ts +0 -24
  67. package/dist/commands/core.d.ts.map +0 -1
  68. package/dist/commands/core.js +0 -410
  69. package/dist/commands/core.js.map +0 -1
package/dist/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # MyContext CLI
2
2
 
3
- **🧠 AI-Powered Full-Stack App Generation with Production-Ready Guarantees**
3
+ **🎨 Component-First Visual Builder with Zero-Error Guarantees**
4
4
 
5
5
  [![npm version](https://badge.fury.io/js/mycontext-cli.svg)](https://www.npmjs.com/package/mycontext-cli)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
  [![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org)
8
8
 
9
- Generate complete Next.js applications from natural language with **guaranteed zero linter/build errors** through AI-powered validation gates and automatic build checking.
9
+ Build production-ready React/Next.js components **one at a time**, preview them visually, validate with automatic build checks, then scale to complete applications. Every component guaranteed **zero TypeScript/ESLint/build errors**.
10
10
 
11
11
  ## πŸš€ Quick Start
12
12
 
@@ -14,91 +14,192 @@ Generate complete Next.js applications from natural language with **guaranteed z
14
14
  # Install globally
15
15
  npm install -g mycontext-cli
16
16
 
17
- # Build a complete app in one command
18
- mycontext build-app --description "Your app idea" --interactive
17
+ # Component-first workflow: Generate β†’ Preview β†’ Validate β†’ Build
18
+ mycontext init my-app
19
+ mycontext generate-components Button --with-tests
20
+ mycontext preview components
21
+ mycontext build-app --interactive # Scale to full app when ready
19
22
  ```
20
23
 
21
- ## πŸ’‘ Philosophy: "LLM as Compiler"
24
+ ## πŸ’‘ Philosophy: Component-First Development
25
+
26
+ MyContext starts small and scales gradually:
27
+
28
+ 1. **Generate individual components** β†’ Build your component library piece by piece
29
+ 2. **Visual preview** β†’ See components in browser before integration
30
+ 3. **Automatic validation** β†’ TypeScript, ESLint, build checks on every component
31
+ 4. **Iterate quickly** β†’ Fix issues at component-level, not app-level
32
+ 5. **Scale when ready** β†’ Assemble validated components into full applications
33
+
34
+ **Result:** Component libraries with 0 errors, ready for production.
35
+
36
+ ---
37
+
38
+ ## 🎯 When to Use MyContext
39
+
40
+ ### βœ… Perfect For
41
+
42
+ **πŸš€ MVPs & Prototypes**
43
+ - Ship standard features in 7-15 days, not months
44
+ - Focus on validating your unique value proposition
45
+ - Get to market fast with production-ready code
46
+
47
+ **🏒 Internal Tools & Admin Dashboards**
48
+ - Employee management systems
49
+ - CRUD applications
50
+ - Content management interfaces
51
+ - Analytics dashboards
52
+
53
+ **πŸ‘€ Solo Developers & Small Teams**
54
+ - Skip the authentication/dashboard boilerplate
55
+ - Focus on your product's unique features
56
+ - Reuse component libraries across projects
57
+
58
+ **πŸ“¦ Apps Built on Standard Patterns**
59
+ - Authentication flows (login, signup, password reset)
60
+ - User dashboards and profiles
61
+ - Settings and configuration pages
62
+ - Marketing pages (home, pricing, about)
63
+ - CRUD operations and data tables
64
+
65
+ **⚑ Rapid Validation & Testing**
66
+ - Quickly test product ideas with real users
67
+ - Build multiple variations to find product-market fit
68
+ - Iterate fast with validated components
69
+
70
+ ### ⚠️ Not Ideal For
71
+
72
+ **🎨 Highly Custom UI/UX**
73
+ - Apps where custom design IS the product (Figma, Notion, Linear)
74
+ - Unique component libraries and design systems
75
+ - Apps with non-standard interaction patterns
76
+
77
+ **🏦 Complex Domain-Specific Logic**
78
+ - Fintech apps with specialized workflows
79
+ - Healthcare apps with custom compliance requirements
80
+ - Apps where every flow is unique to your industry
81
+
82
+ **πŸŽ›οΈ Full Architectural Control Required**
83
+ - When you need to architect every detail from scratch
84
+ - Apps with highly specific performance requirements
85
+ - Custom infrastructure and deployment needs
86
+
87
+ **πŸ“± Design-as-Differentiator Products**
88
+ - When your visual design IS your competitive advantage
89
+ - Apps competing on unique user experience
90
+ - Custom animation and interaction-heavy apps
91
+
92
+ ### πŸ’‘ The 70/30 Rule
22
93
 
23
- MyContext treats AI as a **compiler** that transforms requirements into production-ready code:
24
- - **You write the spec** β†’ PRD with user approval gates
25
- - **AI compiles it** β†’ Generates components with validation
26
- - **System validates** β†’ TypeScript, ESLint, build checks
27
- - **You approve** β†’ 12+ validation checkpoints
94
+ MyContext generates the **70% that's universal** (authentication, layouts, CRUD, routing, settings), so you can focus on the **30% that's unique** (your product's core value and competitive advantage).
28
95
 
29
- **Result:** Production-ready code with 0 errors guaranteed.
96
+ **Real Examples:**
97
+
98
+ βœ… **E-commerce Platform**
99
+ - **MyContext generates**: Auth, product tables, cart UI, user dashboard, admin panel
100
+ - **You customize**: Payment flow, recommendation engine, product discovery, checkout experience
101
+
102
+ βœ… **SaaS Dashboard**
103
+ - **MyContext generates**: User management, settings, billing pages, data tables, layouts
104
+ - **You build**: The core product feature that makes your SaaS valuable
105
+
106
+ βœ… **Blog Platform**
107
+ - **MyContext generates**: Auth, post CRUD, user profiles, admin panel, marketing pages
108
+ - **You customize**: Reading experience, content discovery, social features
109
+
110
+ βœ… **Internal Tool**
111
+ - **MyContext generates**: Everything - auth, CRUD, dashboards, reports, settings
112
+ - **You customize**: Business logic, integrations, custom workflows
113
+
114
+ ### 🎯 Quick Decision Guide
115
+
116
+ **Use MyContext if:**
117
+ - βœ… Your app follows standard web patterns
118
+ - βœ… You need to ship an MVP in 2-3 weeks
119
+ - βœ… Your unique value is NOT in the UI
120
+ - βœ… You want zero-error, production-ready code
121
+ - βœ… You're building internal tools or admin dashboards
122
+
123
+ **Consider alternatives if:**
124
+ - ❌ Your UI/UX is your competitive advantage
125
+ - ❌ You're building the next Figma or Notion
126
+ - ❌ You need full control over every architectural decision
127
+ - ❌ Your app has zero standard patterns
30
128
 
31
129
  ---
32
130
 
33
131
  ## πŸ“– Examples
34
132
 
35
- ### Tic-Tac-Toe Game
133
+ ### Start with a Single Component
36
134
 
37
135
  ```bash
38
- mycontext build-app \
39
- --description "Tic-tac-toe with AI opponent, score tracking, and responsive design" \
40
- --interactive \
41
- --with-tests
136
+ # Generate and preview a button component
137
+ mycontext generate-components Button --with-tests
138
+ mycontext preview components
139
+
140
+ # Generated:
141
+ # - Button.tsx (validated, zero errors)
142
+ # - Button.test.tsx
143
+ # - Preview HTML in browser
42
144
  ```
43
145
 
44
- **Generated:**
45
- - Game board component
46
- - AI opponent (minimax algorithm)
47
- - Score tracking system
48
- - Reset functionality
49
- - Responsive Tailwind design
50
- - Unit tests
146
+ ### Build a Component Library
51
147
 
52
- ### E-Commerce Platform
148
+ ```bash
149
+ # Generate authentication components one by one
150
+ mycontext generate-components LoginForm --with-tests
151
+ mycontext generate-components SignupForm --with-tests
152
+ mycontext generate-components PasswordReset --with-tests
153
+
154
+ # Preview all auth components together
155
+ mycontext preview authentication
156
+
157
+ # Each component automatically validated:
158
+ # βœ… TypeScript check passed
159
+ # βœ… ESLint passed
160
+ # βœ… Build passed
161
+ # βœ… Tests passed
162
+ ```
163
+
164
+ ### Scale to Complete Application
53
165
 
54
166
  ```bash
167
+ # Once components are validated, build full app
55
168
  mycontext build-app \
56
- --description "E-commerce with product catalog, shopping cart, checkout, and admin dashboard" \
169
+ --description "E-commerce with product catalog, cart, and checkout" \
57
170
  --interactive \
58
171
  --complete-architecture
172
+
173
+ # Reuses validated components + generates:
174
+ # - Server actions for CRUD
175
+ # - Next.js App Router routes
176
+ # - Full TypeScript types
177
+ # - Integration tests
59
178
  ```
60
179
 
61
- **Generated:**
62
- - Product listing & detail pages
63
- - Shopping cart with persistence
64
- - Checkout flow
65
- - Admin dashboard
66
- - Server actions for CRUD
67
- - Next.js App Router routes
68
- - Full TypeScript types
180
+ ---
69
181
 
70
- ### Todo App with Auth
182
+ ## 🎯 Features
183
+
184
+ ### 🎨 Visual Component Preview
185
+
186
+ Generate interactive HTML previews of your components before building:
187
+
188
+ - **Brand preview** - See your color palette, typography, and design tokens
189
+ - **Component preview** - View all components organized by groups
190
+ - **Group preview** - Focus on specific component families
191
+ - **Auto-open in browser** - Instant visual feedback
71
192
 
72
193
  ```bash
73
- mycontext build-app \
74
- --description "Todo app with user auth, categories, due dates, and dark mode" \
75
- --interactive \
76
- --with-tests
194
+ mycontext preview brand # Preview design system
195
+ mycontext preview components # Preview all components
196
+ mycontext preview authentication # Preview specific group
77
197
  ```
78
198
 
79
- ---
199
+ ### βœ… Zero-Error Component Validation
80
200
 
81
- ## 🎯 Features
201
+ **Every single component** automatically validated before save:
82
202
 
83
- ### βœ… 230-Step Validated Workflow
84
-
85
- Every app goes through **12 validation gates** where you approve:
86
- 1. Features specification
87
- 2. User flows
88
- 3. Edge cases
89
- 4. Technical specs
90
- 5. **PRD (must read entire document)**
91
- 6. TypeScript types
92
- 7. Branding & design system
93
- 8. Build strategy
94
- 9. Component list
95
- 10. Server actions (if full-stack)
96
- 11. Routes (if full-stack)
97
- 12. Final build validation
98
-
99
- ### πŸ”¨ Automatic Build Validation
100
-
101
- **Every component** automatically passes through:
102
203
  - βœ… TypeScript check (`tsc --noEmit`)
103
204
  - βœ… ESLint validation
104
205
  - βœ… Build check (`npm run build`)
@@ -106,63 +207,169 @@ Every app goes through **12 validation gates** where you approve:
106
207
 
107
208
  **Failed components retry automatically** with error context (max 3 attempts).
108
209
 
210
+ ```
211
+ πŸ”¨ Generating: LoginForm
212
+ βœ… Code Generated
213
+ βœ… TypeScript Check Passed
214
+ βœ… ESLint Passed
215
+ βœ… Build Passed
216
+ βœ… Tests Passed
217
+ ```
218
+
219
+ ### 🧩 Component-First Workflow
220
+
221
+ Build your application **one component at a time**:
222
+
223
+ 1. **Generate individual components** or component groups
224
+ 2. **Preview components** in browser before integration
225
+ 3. **Iterate and refine** at component level
226
+ 4. **Build component libraries** with validated pieces
227
+ 5. **Scale to full apps** when ready
228
+
229
+ ```bash
230
+ # Start small
231
+ mycontext generate-components Button --with-tests
232
+
233
+ # Build a group
234
+ mycontext generate-components authentication --with-tests
235
+
236
+ # Preview your work
237
+ mycontext preview components
238
+
239
+ # Scale to full app
240
+ mycontext build-app --interactive
241
+ ```
242
+
109
243
  ### πŸ“Š Real-Time Progress Tracking
110
244
 
111
- Track build progress via JSON files in `.mycontext/progress/`:
245
+ Track component generation progress via JSON files in `.mycontext/progress/`:
246
+
112
247
  ```json
113
248
  {
114
249
  "currentPhase": "component_generation",
115
- "currentStep": 95,
116
- "totalSteps": 230,
117
- "percentComplete": 41.3
250
+ "currentStep": 15,
251
+ "totalSteps": 30,
252
+ "percentComplete": 50.0,
253
+ "currentComponent": "LoginForm"
118
254
  }
119
255
  ```
120
256
 
121
- **Perfect for VS Code extensions & dashboards.**
257
+ **Perfect for VS Code extensions & build dashboards.**
122
258
 
123
- ### πŸ—οΈ Complete Architecture Generation
259
+ ### πŸ—οΈ Scale to Complete Architecture
260
+
261
+ When ready, generate full-stack apps with `--complete-architecture`:
124
262
 
125
- Generate full-stack apps with `--complete-architecture`:
126
263
  - Next.js 15 App Router routes
127
264
  - Server actions with validation
128
265
  - Self-documenting components
129
266
  - Type-safe throughout
267
+ - **Reuses your validated components**
130
268
 
131
269
  ---
132
270
 
133
271
  ## πŸ“‹ Commands
134
272
 
135
- ### Build Complete App (Recommended)
273
+ ### Component Generation (Recommended)
136
274
 
137
275
  ```bash
138
- mycontext build-app --description "Your app" --interactive
276
+ # Generate individual component
277
+ mycontext generate-components Button --with-tests
278
+
279
+ # Generate component group
280
+ mycontext generate-components authentication --with-tests
281
+
282
+ # Generate all components
283
+ mycontext generate-components all --with-tests
139
284
 
140
285
  # Options:
141
- --output <dir> # Output directory (default: mycontext-app)
142
- --interactive # Interactive mode with validation prompts
143
- --with-tests # Generate unit tests
144
- --complete-architecture # Generate server actions + routes
145
- --architecture-type # nextjs-app-router | nextjs-pages | react-spa
146
- --max-retries 3 # Max retry attempts
286
+ --with-tests # Generate unit tests for each component
287
+ --group <group> # Specify component group
288
+ --check # Run typecheck, lint, tests after generation
147
289
  --verbose # Show detailed output
148
290
  ```
149
291
 
150
- ### Step-by-Step Workflow
292
+ ### Visual Preview
293
+
294
+ ```bash
295
+ # Preview brand elements
296
+ mycontext preview brand
297
+
298
+ # Preview all components
299
+ mycontext preview components
300
+
301
+ # Preview specific component group
302
+ mycontext preview authentication
303
+
304
+ # Options:
305
+ --no-open # Don't auto-open in browser
306
+ --port <number> # Port for local server (default: 3000)
307
+ ```
308
+
309
+ ### Component-First Workflow
151
310
 
152
311
  ```bash
153
312
  # 1. Initialize project
154
313
  mycontext init my-app
155
314
 
156
- # 2. Generate context files (with validation gates)
315
+ # 2. Generate context files
157
316
  mycontext generate-context-files --description "Your app"
158
317
 
159
- # 3. Compile PRD (requires approval)
160
- mycontext compile-prd
318
+ # 3. Generate individual components
319
+ mycontext generate-components LoginForm --with-tests
320
+ mycontext generate-components SignupForm --with-tests
161
321
 
162
- # 4. Generate components (with build validation)
163
- mycontext generate-components all --with-tests
322
+ # 4. Preview components
323
+ mycontext preview components
324
+
325
+ # 5. Scale to full app (when ready)
326
+ mycontext build-app --interactive
164
327
  ```
165
328
 
329
+ ### Scale to Complete App
330
+
331
+ **Component-First Mode (NEW - Recommended):**
332
+
333
+ Build apps by reusing existing validated components:
334
+
335
+ ```bash
336
+ # After generating components individually:
337
+ mycontext generate-components LoginForm --with-tests
338
+ mycontext generate-components Dashboard --with-tests
339
+ mycontext generate-components SignupForm --with-tests
340
+
341
+ # Build app - automatically detects & reuses components
342
+ mycontext build-app --interactive --complete-architecture
343
+
344
+ # Claude Agent SDK will:
345
+ # 1. Detect 3 validated components βœ…
346
+ # 2. Decide REUSE_COMPONENTS mode 🎯
347
+ # 3. Map components to routes intelligently πŸ—ΊοΈ
348
+ # 4. Generate scaffolding only (routes, actions, hooks) πŸ—οΈ
349
+ ```
350
+
351
+ **Traditional Mode (Generate Everything):**
352
+
353
+ ```bash
354
+ mycontext build-app --description "Your app" --interactive
355
+
356
+ # Options:
357
+ --output <dir> # Output directory (default: mycontext-app)
358
+ --interactive # Interactive mode with validation prompts
359
+ --with-tests # Generate unit tests
360
+ --complete-architecture # Generate server actions + routes
361
+ --architecture-type # nextjs-app-router | nextjs-pages | react-spa
362
+ --max-retries 3 # Max retry attempts
363
+ --verbose # Show detailed output
364
+ ```
365
+
366
+ **How it works:**
367
+
368
+ 1. **Automatic Detection** - Claude Agent SDK detects existing components
369
+ 2. **Smart Decision** - AI chooses: REUSE vs GENERATE based on what's available
370
+ 3. **Intelligent Mapping** - Maps components to routes (LoginForm β†’ /login)
371
+ 4. **Scaffolding Only** - Generates integration layer, not components
372
+
166
373
  ### Other Commands
167
374
 
168
375
  ```bash
@@ -170,7 +377,8 @@ mycontext setup # Configure AI providers
170
377
  mycontext build-strategy # Interactive strategy selection
171
378
  mycontext analyze # Analyze existing project
172
379
  mycontext list [type] # List components/projects
173
- mycontext preview <type> # Preview components
380
+ mycontext enhance <component> # Enhance component with AI
381
+ mycontext refine <component> # Refine component with AI
174
382
  ```
175
383
 
176
384
  ---
@@ -226,18 +434,52 @@ my-app/
226
434
 
227
435
  ---
228
436
 
229
- ## πŸŽ“ How It Works
437
+ ## πŸŽ“ How It Works (Component-First with Claude Agent SDK)
230
438
 
231
- ### 1. Context Generation
232
- AI generates detailed context files based on your description. **You approve each one.**
439
+ MyContext uses **Claude Agent SDK** with intelligent component detection and reuse. The workflow automatically adapts based on what exists in your project.
233
440
 
234
- ### 2. PRD Compilation
235
- Context files are compiled into a comprehensive PRD. **You must read and approve.**
441
+ ### 1. Intelligent Component Detection (NEW)
236
442
 
237
- ### 3. Component Generation
238
- Components are generated from PRD. **Each component automatically validated:**
443
+ Claude Agent SDK automatically detects existing components:
444
+
445
+ ```bash
446
+ mycontext build-app --interactive --complete-architecture
239
447
  ```
240
- πŸ”¨ Generating: LoginForm
448
+
449
+ **Detection Report:**
450
+ ```
451
+ πŸ” Detecting existing components...
452
+
453
+ βœ… Found 5 validated components:
454
+ - LoginForm (authentication) - All checks passed βœ…
455
+ - Dashboard (admin) - All checks passed βœ…
456
+ - SignupForm (authentication) - All checks passed βœ…
457
+ - ProfileCard (user) - All checks passed βœ…
458
+ - SettingsPanel (admin) - All checks passed βœ…
459
+
460
+ 🎯 Recommendation: REUSE_COMPONENTS
461
+ β†’ Skipping component generation
462
+ β†’ Proceeding with scaffolding generation
463
+ ```
464
+
465
+ **AI-Powered Decision Making:**
466
+
467
+ - **REUSE_COMPONENTS** (3+ validated) β†’ Skip generation, create scaffolding only
468
+ - **PARTIAL_REUSE** (1-2 components) β†’ Mix existing with new
469
+ - **GENERATE_ALL** (0 components) β†’ Traditional full generation
470
+
471
+ ### 2. Component Generation (if needed)
472
+
473
+ Generate components **one at a time** with automatic validation:
474
+
475
+ ```bash
476
+ mycontext generate-components Button --with-tests
477
+ ```
478
+
479
+ **Each component automatically validated:**
480
+
481
+ ```
482
+ πŸ”¨ Generating: Button
241
483
  βœ… Code Generated
242
484
  βœ… TypeScript Check Passed
243
485
  βœ… ESLint Passed
@@ -245,17 +487,84 @@ Components are generated from PRD. **Each component automatically validated:**
245
487
  βœ… Tests Passed
246
488
  ```
247
489
 
248
- ### 4. Error Recovery
249
- Failed components retry with error context:
490
+ ### 3. Visual Preview
491
+
492
+ Preview your components in the browser **before integration**:
493
+
494
+ ```bash
495
+ mycontext preview components
496
+ ```
497
+
498
+ **Opens in browser:**
499
+ - Color-coded component cards
500
+ - Organized by groups
501
+ - User stories and action functions
502
+ - Type and priority information
503
+
504
+ ### 4. Intelligent Route Mapping (NEW)
505
+
506
+ Claude Agent SDK maps components to routes automatically:
507
+
508
+ ```
509
+ πŸ—ΊοΈ Mapping components to routes...
510
+
511
+ Component-to-Route Mappings:
512
+ β”œβ”€β”€ LoginForm β†’ /login (AuthLayout)
513
+ β”‚ Actions: authenticateUser, validateCredentials
514
+ β”‚ Hooks: useAuth
515
+ β”œβ”€β”€ Dashboard β†’ /dashboard (DashboardLayout)
516
+ β”‚ Actions: fetchDashboardData
517
+ β”‚ Hooks: useDashboard
518
+ └── SignupForm β†’ /signup (AuthLayout)
519
+ Actions: createUser, sendVerificationEmail
520
+ Hooks: useAuth, useForm
521
+ ```
522
+
523
+ ### 5. Scaffolding Generation (NEW)
524
+
525
+ Generates integration layer for existing components:
526
+
527
+ ```
528
+ πŸ—οΈ Generating scaffolding...
529
+
530
+ Generated:
531
+ βœ… 3 routes (app/login, app/dashboard, app/signup)
532
+ βœ… 2 server action files (actions/authentication.ts, actions/dashboard.ts)
533
+ βœ… 3 custom hooks (useAuth.ts, useForm.ts, useDashboard.ts)
534
+ βœ… 2 layouts (AuthLayout.tsx, DashboardLayout.tsx)
535
+ ```
536
+
537
+ **Files created:**
538
+ ```typescript
539
+ // app/login/page.tsx
540
+ import { LoginForm } from '@/components/authentication/LoginForm';
541
+
542
+ export default function Page() {
543
+ return <LoginForm />;
544
+ }
545
+
546
+ // actions/authentication.ts
547
+ 'use server';
548
+
549
+ export async function authenticateUser(data: any) {
550
+ // Implementation
551
+ }
552
+ ```
553
+
554
+ ### 6. Automatic Error Recovery
555
+
556
+ Failed components **retry automatically** with error context:
557
+
250
558
  ```
251
559
  ❌ TypeScript check failed (3 errors)
252
- - LoginForm.tsx:12:5 - TS2322: Type 'string' not assignable to 'number'
560
+ - Button.tsx:12:5 - TS2322: Type 'string' not assignable to 'number'
253
561
 
254
562
  πŸ”„ Retry 1/3 (with error context)
255
563
  βœ… Fixed and validated
256
564
  ```
257
565
 
258
- ### 5. Production Deploy
566
+ ### 7. Production Deploy
567
+
259
568
  ```bash
260
569
  cd my-app
261
570
  npm run build # βœ… Zero errors guaranteed
@@ -333,15 +642,26 @@ After successful build:
333
642
 
334
643
  ## πŸ†š MyContext vs Others
335
644
 
336
- | Feature | MyContext | Lovable | v0.dev |
337
- |---------|-----------|---------|--------|
338
- | **Code Location** | Your machine | Cloud | Cloud |
339
- | **Validation Gates** | 12+ checkpoints | None | None |
340
- | **Build Validation** | Every component | None | None |
341
- | **TypeScript Guarantee** | 100% | No | No |
342
- | **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
343
- | **Deployment** | Anywhere | Limited | Vercel only |
344
- | **Progress Tracking** | JSON files | None | None |
645
+ | Feature | MyContext | Lovable | v0.dev |
646
+ | ---------------------------- | ------------------- | ---------- | ----------- |
647
+ | **Approach** | Component-first | App-first | App-first |
648
+ | **Visual Preview** | βœ… HTML previews | ❌ | βœ… Live |
649
+ | **Component-Level Validation** | βœ… Every component | ❌ | ❌ |
650
+ | **Build Validation** | TypeScript+ESLint+Build | None | None |
651
+ | **Zero-Error Guarantee** | βœ… 100% | ❌ | ❌ |
652
+ | **Code Location** | Your machine | Cloud | Cloud |
653
+ | **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
654
+ | **Component Library Building** | βœ… | ❌ | ❌ |
655
+ | **Progress Tracking** | βœ… JSON files | ❌ | ❌ |
656
+ | **Deployment** | Anywhere | Limited | Vercel only |
657
+
658
+ **Key Differentiators:**
659
+
660
+ 1. **Component-First** - Build and validate components individually before scaling to apps
661
+ 2. **Visual Preview** - See components in browser before integration
662
+ 3. **Zero-Error Guarantee** - Every component validated (TypeScript, ESLint, build checks)
663
+ 4. **Local Development** - All code generation happens on your machine
664
+ 5. **BYOK Pricing** - Use your own AI API keys, pay only for what you use
345
665
 
346
666
  ---
347
667
 
@@ -356,18 +676,21 @@ After successful build:
356
676
  ## πŸ› Troubleshooting
357
677
 
358
678
  **"PRD Validation Failed"**
679
+
359
680
  ```bash
360
681
  # Provide feedback and regenerate
361
682
  mycontext compile-prd --force
362
683
  ```
363
684
 
364
685
  **"Component Build Failed"**
686
+
365
687
  ```bash
366
688
  # Automatic retry with error context (max 3 attempts)
367
689
  # Check .mycontext/progress/07-components/<component>.json
368
690
  ```
369
691
 
370
692
  **"Progress Not Tracking"**
693
+
371
694
  ```bash
372
695
  # Verify progress directory exists
373
696
  ls -la .mycontext/progress/
@@ -385,4 +708,4 @@ MIT Β© MyContext
385
708
 
386
709
  ---
387
710
 
388
- **Built by developers, for developers. Your code stays on your machine.** πŸš€
711
+ **Start small. Build component by component. Scale when ready. Zero errors guaranteed.** 🎨
@@ -1 +1 @@
1
- {"version":3,"file":"ClaudeAgentWorkflow.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/ClaudeAgentWorkflow.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EAEf,MAAM,wBAAwB,CAAC;AAOhC,qBAAa,mBACX,YAAW,QAAQ,CAAC,aAAa,EAAE,cAAc,CAAC;IAElD,IAAI,SAAyB;IAC7B,WAAW,SAC6F;IACxG,WAAW,SACwF;IACnG,WAAW,SAAsB;IACjC,SAAS,WAQP;IAEF,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,iBAAiB,CAAwB;IACjD,OAAO,CAAC,cAAc,CAAsB;IAE5C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAAsB;gBAEjC,gBAAgB,CAAC,EAAE,MAAM;IAOrC;;OAEG;IACH,sBAAsB,IAAI,OAAO;IAI3B,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC;IAmFxD;;OAEG;YACW,qBAAqB;IA8EnC;;OAEG;YACW,sBAAsB;IAgDpC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAyGnC;;OAEG;YACW,uBAAuB;IAUrC;;OAEG;YACW,0BAA0B;IAkFxC;;OAEG;IACH,OAAO,CAAC,eAAe;IAwBvB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAgBlC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAgB/B;;OAEG;IACH,OAAO,CAAC,+BAA+B;IAevC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAiBpC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgBtC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAcpC;;OAEG;YACW,iBAAiB;IA2B/B;;OAEG;YACW,4BAA4B;IAK1C;;OAEG;YACW,yBAAyB;IAKvC;;OAEG;YACW,iCAAiC;IAK/C;;OAEG;YACW,8BAA8B;IAK5C;;OAEG;YACW,gCAAgC;IAK9C;;OAEG;YACW,8BAA8B;IAK5C;;OAEG;IACH,OAAO,CAAC,uBAAuB;CAoBhC"}
1
+ {"version":3,"file":"ClaudeAgentWorkflow.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/ClaudeAgentWorkflow.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EAEf,MAAM,wBAAwB,CAAC;AAOhC,qBAAa,mBACX,YAAW,QAAQ,CAAC,aAAa,EAAE,cAAc,CAAC;IAElD,IAAI,SAAyB;IAC7B,WAAW,SAC6F;IACxG,WAAW,SACwF;IACnG,WAAW,SAAsB;IACjC,SAAS,WAQP;IAEF,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,iBAAiB,CAAwB;IACjD,OAAO,CAAC,cAAc,CAAsB;IAE5C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAAsB;gBAEjC,gBAAgB,CAAC,EAAE,MAAM;IAOrC;;OAEG;IACH,sBAAsB,IAAI,OAAO;IAI3B,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC;IAmFxD;;OAEG;YACW,qBAAqB;IAsFnC;;OAEG;YACW,sBAAsB;IAgDpC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IA8KnC;;OAEG;YACW,uBAAuB;IAUrC;;OAEG;YACW,0BAA0B;IAkFxC;;OAEG;IACH,OAAO,CAAC,eAAe;IAwBvB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAgBlC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAgB/B;;OAEG;IACH,OAAO,CAAC,+BAA+B;IAevC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAiBpC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgBtC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAcpC;;OAEG;YACW,iBAAiB;IA2B/B;;OAEG;YACW,4BAA4B;IAK1C;;OAEG;YACW,yBAAyB;IAKvC;;OAEG;YACW,iCAAiC;IAK/C;;OAEG;YACW,8BAA8B;IAK5C;;OAEG;YACW,gCAAgC;IAK9C;;OAEG;YACW,8BAA8B;IAK5C;;OAEG;IACH,OAAO,CAAC,uBAAuB;CAoBhC"}