Quick Start Example

Quick Start: Using the MFE App Shell Prompt

Immediate Next Steps

1. Copy This Exact Prompt for AI

I need you to generate a production-ready MFE app shell based on this specification:

[Copy the entire PERFECTED_MFE_APPSHELL_PROMPT.md content here]

Please start by generating:
1. Project structure and package.json
2. TypeScript configuration files
3. Design system tokens (src/design-system/tokens.ts)
4. First 5 atomic components (Button, Input, Text, Badge, LoadingSpinner)
5. Complete test setup and utilities

Generate working, production-ready code with full TypeScript types and comprehensive tests.

2. Alternative: Generate Specific Parts

If you want to improve your existing codebase incrementally:

For Better Design Tokens:

Based on my existing MFE app shell at /Users/jonmatum/Code/jonmatum/mfe-appshell, 
generate an improved design system using this specification:

[Copy just the "Enhanced Token System" section]

Make it compatible with my existing Tailwind CSS setup but use CSS custom properties for true theme flexibility.

For Missing Components:

Looking at my current test coverage report showing gaps in these components:
- DropdownPanel (10.81% coverage)
- NavigationGroup (20% coverage) 
- SubMenuPanel (11.53% coverage)

Generate improved versions of these components with 95%+ test coverage using this specification:

[Copy the relevant atoms section]

For Better Testing:

My current test coverage is 57% overall. Help me achieve 95%+ coverage by generating:

1. Enhanced test utilities and setup
2. Integration tests for component interactions  
3. Accessibility test patterns
4. Performance test utilities

Based on this testing specification:

[Copy the "Comprehensive Testing Strategy" section]

3. Using with Your Existing Codebase

Option A: Gradual Migration

1. Keep your existing /Users/jonmatum/Code/jonmatum/mfe-appshell
2. Create a new branch: git checkout -b enhanced-architecture
3. Use the prompt to generate improved versions of specific components
4. Replace components one by one, ensuring tests pass

Option B: Fresh Start with Migration

1. Create new directory: mkdir mfe-appshell-v2
2. Use the full prompt to generate the complete new architecture
3. Migrate your existing configuration and customizations
4. Compare and merge the best of both approaches

4. Recommended AI Tools & Settings

Claude (Best for Complete Generation)

• Use Claude 3.5 Sonnet
• Enable "Show thinking" for better code generation
• Ask for complete implementations, not just snippets

ChatGPT (Good for Specific Parts)

• Use GPT-4 Turbo
• Break requests into smaller chunks
• Ask for "complete working code with all imports"

GitHub Copilot (Best for Incremental Improvement)

• Use in VS Code with your existing project open
• Ask for specific component improvements
• Great for generating tests for existing components

5. Success Metrics to Track

After using the prompt, measure:

# Test coverage
npm run test:coverage

# Bundle size
npm run build:analyze

# TypeScript compliance
npm run type-check

# Linting
npm run lint

# Performance
npm run build && ls -la dist/

Target improvements:

• Test coverage: 57% → 95%+
• Bundle size: 296KB → <45KB gzipped
• TypeScript errors: Current → 0
• Component count: Current → 25+ atoms, 12+ molecules

6. Common Issues & Solutions

Issue: AI generates incomplete code Solution: Ask "Please provide the complete implementation with all imports and exports"

Issue: Tests don't work Solution: Ask "Generate working tests with proper mocking and setup"

Issue: TypeScript errors Solution: Ask "Fix all TypeScript errors and provide proper type definitions"

Issue: Components don't match design system Solution: Ask "Ensure all components use the design tokens and variant system"