Initial commit
This commit is contained in:
Zhongwei Li
289
commands/explore.md
Normal file
289
commands/explore.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# /explore - Discover Angular Agents
|
||||
|
||||
## Meet Your 7 Specialized Agents
|
||||
|
||||
Each agent is an expert in their domain, ready to guide you through every aspect of Angular development.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Agent 1: TypeScript Fundamentals
|
||||
|
||||
**Specialty**: TypeScript, Type System, OOP, Decorators
|
||||
|
||||
**Expert In**:
|
||||
- Basic and advanced TypeScript types
|
||||
- Object-oriented programming concepts
|
||||
- Generic types and constraints
|
||||
- Decorators and metadata reflection
|
||||
- Async/await and Promise handling
|
||||
- Modern JavaScript features
|
||||
|
||||
**When to Use**:
|
||||
- Learning TypeScript from scratch
|
||||
- Understanding complex type definitions
|
||||
- Writing type-safe code
|
||||
- Mastering advanced features
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ typescript-mastery
|
||||
- Advanced type patterns
|
||||
- Type narrowing and guards
|
||||
- Conditional and mapped types
|
||||
|
||||
**Prerequisites**: JavaScript fundamentals
|
||||
|
||||
**Learning Estimate**: 20-30 hours
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Agent 2: Angular Core Architecture
|
||||
|
||||
**Specialty**: Components, Services, DI, Modules, Lifecycle
|
||||
|
||||
**Expert In**:
|
||||
- Component creation and lifecycle
|
||||
- Service design and patterns
|
||||
- Dependency injection system
|
||||
- Angular modules and feature modules
|
||||
- Templates and data binding
|
||||
- Built-in and custom directives
|
||||
|
||||
**When to Use**:
|
||||
- Building Angular components
|
||||
- Designing service architecture
|
||||
- Understanding Angular's DI system
|
||||
- Learning lifecycle hooks
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ angular-core-patterns
|
||||
- Component communication
|
||||
- Template syntax
|
||||
- Directive creation
|
||||
|
||||
**Prerequisites**: TypeScript fundamentals
|
||||
|
||||
**Learning Estimate**: 25-35 hours
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Agent 3: Reactive Programming & RxJS
|
||||
|
||||
**Specialty**: Observables, Subjects, Operators, Reactive Patterns
|
||||
|
||||
**Expert In**:
|
||||
- Observable creation and subscription
|
||||
- Subject types and use cases
|
||||
- RxJS operators (map, filter, switchMap, etc.)
|
||||
- Higher-order observables
|
||||
- Memory leak prevention
|
||||
- Error handling in streams
|
||||
- Testing Observables
|
||||
|
||||
**When to Use**:
|
||||
- Working with async data streams
|
||||
- Implementing reactive patterns
|
||||
- Managing subscriptions
|
||||
- Testing Observable-based code
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ rxjs-mastery
|
||||
- Operator composition
|
||||
- Stream combination strategies
|
||||
- Subscription management
|
||||
|
||||
**Prerequisites**: Angular Core concepts
|
||||
|
||||
**Learning Estimate**: 25-35 hours
|
||||
|
||||
---
|
||||
|
||||
## 📝 Agent 4: Forms, Validation & Directives
|
||||
|
||||
**Specialty**: Reactive/Template Forms, Validation, Custom Directives
|
||||
|
||||
**Expert In**:
|
||||
- Reactive forms (FormControl, FormGroup, FormArray)
|
||||
- Template-driven forms
|
||||
- Form validation (built-in and custom)
|
||||
- Async validators
|
||||
- Custom directives
|
||||
- Form accessibility
|
||||
- Advanced form patterns
|
||||
|
||||
**When to Use**:
|
||||
- Building any type of form
|
||||
- Implementing complex validation
|
||||
- Creating reusable form components
|
||||
- Building custom directives
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ angular-forms
|
||||
- Form state management
|
||||
- Cross-field validation
|
||||
- Dynamic form generation
|
||||
|
||||
**Prerequisites**: Angular Core, RxJS basics
|
||||
|
||||
**Learning Estimate**: 20-25 hours
|
||||
|
||||
---
|
||||
|
||||
## 🛣️ Agent 5: Routing, Performance & Advanced Patterns
|
||||
|
||||
**Specialty**: Routing, Lazy Loading, Performance, Angular Signals
|
||||
|
||||
**Expert In**:
|
||||
- Route configuration and navigation
|
||||
- Lazy loading and code splitting
|
||||
- Route guards (CanActivate, CanDeactivate, Resolve)
|
||||
- Change detection optimization
|
||||
- Performance metrics and optimization
|
||||
- Angular Signals and new reactivity model
|
||||
- Micro-frontend architecture
|
||||
|
||||
**When to Use**:
|
||||
- Designing application routing architecture
|
||||
- Implementing lazy loading
|
||||
- Optimizing bundle size and performance
|
||||
- Building large-scale applications
|
||||
- Understanding change detection
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ angular-routing (Performance)
|
||||
- Preloading strategies
|
||||
- Route caching patterns
|
||||
- Bundle analysis
|
||||
|
||||
**Prerequisites**: Angular Core, Routing basics
|
||||
|
||||
**Learning Estimate**: 20-25 hours
|
||||
|
||||
---
|
||||
|
||||
## 🗄️ Agent 6: State Management & APIs
|
||||
|
||||
**Specialty**: NgRx, Akita, Services, Angular Signals, HTTP Integration
|
||||
|
||||
**Expert In**:
|
||||
- Store architecture and patterns
|
||||
- Actions, reducers, selectors
|
||||
- Effects and side effects
|
||||
- Entity adapters
|
||||
- Facade pattern
|
||||
- HTTP integration and caching
|
||||
- Angular Signals for state
|
||||
- API request handling
|
||||
|
||||
**When to Use**:
|
||||
- Managing complex application state
|
||||
- Sharing state between components
|
||||
- Implementing time-travel debugging
|
||||
- Normalizing API responses
|
||||
- Preventing race conditions
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ state-management-advanced
|
||||
- Entity patterns
|
||||
- Selector composition
|
||||
- API integration patterns
|
||||
|
||||
**Prerequisites**: Angular Core, RxJS mastery
|
||||
|
||||
**Learning Estimate**: 30-40 hours
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Agent 7: Testing, Build & Deployment
|
||||
|
||||
**Specialty**: Unit/E2E Testing, Build Optimization, CI/CD, DevOps
|
||||
|
||||
**Expert In**:
|
||||
- Unit testing with Jasmine and TestBed
|
||||
- E2E testing with Cypress and Playwright
|
||||
- Test coverage and strategies
|
||||
- Service mocking and HTTP testing
|
||||
- Build optimization (AOT, tree-shaking)
|
||||
- Bundle analysis
|
||||
- CI/CD pipelines (GitHub Actions, etc.)
|
||||
- Deployment to various platforms
|
||||
- Monitoring and error tracking
|
||||
- Performance monitoring
|
||||
|
||||
**When to Use**:
|
||||
- Writing tests for components and services
|
||||
- Setting up end-to-end testing
|
||||
- Optimizing production builds
|
||||
- Setting up CI/CD pipelines
|
||||
- Deploying to production
|
||||
- Monitoring application health
|
||||
|
||||
**Key Skills**:
|
||||
- ✅ angular-testing-deployment
|
||||
- Test patterns and strategies
|
||||
- Deployment best practices
|
||||
- Performance monitoring
|
||||
|
||||
**Prerequisites**: All other agents' concepts
|
||||
|
||||
**Learning Estimate**: 35-50 hours
|
||||
|
||||
---
|
||||
|
||||
## 🎓 Agent Collaboration
|
||||
|
||||
Agents often work together:
|
||||
|
||||
```
|
||||
TypeScript Fundamentals
|
||||
↓
|
||||
Angular Core Architecture
|
||||
↓
|
||||
┌───┴────────────────────┐
|
||||
↓ ↓
|
||||
RxJS Mastery Forms & Validation
|
||||
↓ ↓
|
||||
└───┬────────────────────┘
|
||||
↓
|
||||
Routing & Performance
|
||||
↓
|
||||
State Management & APIs
|
||||
↓
|
||||
Testing, Build & Deployment
|
||||
```
|
||||
|
||||
## Quick Assessment
|
||||
|
||||
Answer these questions to see which agent can help you most:
|
||||
|
||||
1. **Do you need TypeScript help?** → Agent 1
|
||||
2. **Building components/services?** → Agent 2
|
||||
3. **Working with async data?** → Agent 3
|
||||
4. **Creating forms?** → Agent 4
|
||||
5. **Scaling application?** → Agent 5
|
||||
6. **Managing state?** → Agent 6
|
||||
7. **Testing/deploying?** → Agent 7
|
||||
|
||||
## Learning Hours by Agent
|
||||
|
||||
| Agent | Hours | Difficulty |
|
||||
|-------|-------|-----------|
|
||||
| TypeScript Fundamentals | 20-30h | Beginner |
|
||||
| Angular Core | 25-35h | Beginner |
|
||||
| RxJS Mastery | 25-35h | Intermediate |
|
||||
| Forms & Validation | 15-20h | Intermediate |
|
||||
| Routing & Performance | 20-25h | Intermediate |
|
||||
| State Management | 30-40h | Advanced |
|
||||
| Testing & Deployment | 35-50h | Advanced |
|
||||
| **Total** | **170-235h** | **Mixed** |
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Start with `/learn`** to choose a learning path
|
||||
2. **Deep dive** into specific agents here
|
||||
3. **Use `/projects`** for hands-on practice
|
||||
4. **Use `/assess`** to test your knowledge
|
||||
5. **Ask agents directly** for detailed guidance
|
||||
|
||||
---
|
||||
|
||||
**Ready to Master Angular?** Start with your first agent! 🚀
|
||||
Reference in New Issue
Block a user