248 lines
7.4 KiB
Markdown
248 lines
7.4 KiB
Markdown
# JavaScript Full-Stack Expansion Pack
|
|
|
|
A comprehensive BMAD-METHOD expansion pack for building modern JavaScript applications with specialized agents for frontend, backend, and full-stack development.
|
|
|
|
## Overview
|
|
|
|
This expansion pack provides a complete team of AI agents specialized in JavaScript development, covering:
|
|
|
|
- **Frontend Development**: React, Vue, Svelte, Angular with modern tooling
|
|
- **Backend Development**: Node.js, Express, Fastify, NestJS
|
|
- **API Development**: REST, GraphQL, WebSocket, tRPC
|
|
- **Database Integration**: SQL (PostgreSQL, MySQL) and NoSQL (MongoDB, Redis)
|
|
- **Modern Tooling**: Vite, Webpack, TypeScript, ESBuild
|
|
- **Testing**: Jest, Vitest, Cypress, Playwright
|
|
- **Deployment**: Docker, Kubernetes, Serverless
|
|
|
|
## Agents Included (5 Total)
|
|
|
|
### Planning & Architecture
|
|
- **JS Solution Architect**: Designs full-stack JavaScript architectures, technology selection, and system design
|
|
|
|
### Development Agents
|
|
- **React Developer**: Expert in React 18+, Next.js 14, hooks, and modern state management
|
|
- **Node Backend Developer**: Backend development with Express, Fastify, NestJS, and database integration
|
|
- **API Developer**: REST, GraphQL, tRPC API design with versioning and documentation
|
|
|
|
### Specialized Roles
|
|
- **TypeScript Expert**: Type safety, advanced type patterns, migration strategies, and strict mode configuration
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
# Install BMAD-METHOD if not already installed
|
|
npx bmad-method install
|
|
|
|
# Install this expansion pack
|
|
npm install bmad-expansion-javascript-fullstack
|
|
|
|
# Or manually copy to your bmad-core/expansion-packs directory
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
### Web UI Usage
|
|
|
|
1. Load the full-stack team bundle:
|
|
```
|
|
*load team-javascript-fullstack
|
|
```
|
|
|
|
2. Start with architecture planning:
|
|
```
|
|
*js-solution-architect
|
|
I need to build a real-time collaboration platform with React frontend and Node.js backend
|
|
```
|
|
|
|
3. Switch to specific development agents as needed:
|
|
```
|
|
*react-developer
|
|
*node-backend-developer
|
|
*api-developer
|
|
```
|
|
|
|
### IDE Usage
|
|
|
|
1. Initialize with JavaScript templates:
|
|
```bash
|
|
npx bmad-method init --expansion javascript-fullstack
|
|
```
|
|
|
|
2. Use specialized agents through the CLI:
|
|
```bash
|
|
npx bmad-method develop --agent react-developer
|
|
```
|
|
|
|
## Agent Capabilities
|
|
|
|
### JS Solution Architect
|
|
- Full-stack architecture design
|
|
- Technology stack selection
|
|
- Microservices vs monolith decisions
|
|
- Database schema design
|
|
- API contract definition
|
|
- Performance and scalability planning
|
|
|
|
### React Developer
|
|
- Modern React patterns (hooks, context, custom hooks)
|
|
- State management (Redux, Zustand, Jotai, Recoil)
|
|
- Next.js for SSR/SSG
|
|
- Component libraries (shadcn/ui, MUI, Chakra)
|
|
- React Query for data fetching
|
|
- Performance optimization
|
|
|
|
### Node Backend Developer
|
|
- Express, Fastify, NestJS frameworks
|
|
- Authentication & authorization (JWT, OAuth, Passport)
|
|
- Database integration (Prisma, TypeORM, Mongoose)
|
|
- Background jobs (Bull, BullMQ)
|
|
- Caching strategies (Redis)
|
|
- Error handling and logging
|
|
|
|
### API Developer
|
|
- RESTful API design
|
|
- GraphQL schema and resolvers
|
|
- tRPC for type-safe APIs
|
|
- API documentation (OpenAPI/Swagger)
|
|
- Versioning strategies
|
|
- Rate limiting and throttling
|
|
|
|
### TypeScript Expert
|
|
- TypeScript configuration optimization
|
|
- Advanced type patterns
|
|
- Generic types and utility types
|
|
- Type inference and narrowing
|
|
- Migration from JavaScript
|
|
- Type safety for APIs
|
|
|
|
## Structure
|
|
|
|
### Agent Teams
|
|
- `fullstack-team.yaml`: Complete full-stack development team
|
|
- `frontend-team.yaml`: Frontend-focused development team
|
|
- `backend-team.yaml`: Backend and API development team
|
|
|
|
### Workflows (6 Total)
|
|
- `fullstack-greenfield.yaml`: New full-stack project from scratch
|
|
- `frontend-app-development.yaml`: Frontend application workflow
|
|
- `backend-api-development.yaml`: Backend API development workflow
|
|
- `feature-development.yaml`: Adding features to existing apps
|
|
- `mvp-rapid-prototype.yaml`: Fast MVP and prototype development
|
|
- `migration-to-typescript.yaml`: JavaScript to TypeScript migration
|
|
|
|
### Checklists (8 Total)
|
|
- `architecture-review-checklist.md`: Architecture validation
|
|
- `api-design-checklist.md`: API design quality
|
|
- `frontend-checklist.md`: React/Next.js quality
|
|
- `backend-checklist.md`: Node.js backend quality
|
|
- `security-checklist.md`: Security validation
|
|
- `performance-checklist.md`: Performance optimization
|
|
- `deployment-readiness-checklist.md`: Production deployment
|
|
- `story-dod-checklist.md`: Story definition of done
|
|
|
|
### Tasks (6 Total)
|
|
- `create-development-story.md`: Story creation guide
|
|
- `create-architecture-doc.md`: Architecture documentation
|
|
- `create-api-spec.md`: API specification creation
|
|
- `setup-project.md`: Project initialization
|
|
- `code-review.md`: Code review process
|
|
- `performance-optimization.md`: Performance tuning
|
|
|
|
### Data/Reference (6 Total)
|
|
- `development-guidelines.md`: Coding standards and conventions
|
|
- `architecture-patterns.md`: Common architecture patterns
|
|
- `best-practices.md`: Full-stack best practices
|
|
- `technology-stack-guide.md`: Stack selection guide
|
|
- `security-guidelines.md`: Security implementation
|
|
- `deployment-strategies.md`: Deployment patterns
|
|
|
|
### Templates (2 Total)
|
|
- `fullstack-javascript-prd.md`: Comprehensive PRD template
|
|
- `javascript-development-story.md`: Detailed story template
|
|
|
|
## Use Cases
|
|
|
|
### Building a SaaS Application
|
|
```
|
|
*js-solution-architect
|
|
I want to build a project management SaaS with:
|
|
- React frontend with real-time updates
|
|
- Node.js REST API
|
|
- PostgreSQL database
|
|
- Stripe payment integration
|
|
- Multi-tenant architecture
|
|
```
|
|
|
|
### Creating a Real-Time Chat App
|
|
```
|
|
*node-backend-developer
|
|
Build a WebSocket-based chat server with:
|
|
- Socket.io for real-time communication
|
|
- Redis for pub/sub
|
|
- MongoDB for message persistence
|
|
- JWT authentication
|
|
```
|
|
|
|
### Performance Optimization
|
|
```
|
|
*performance-engineer
|
|
My React app is loading slowly. Here's my bundle analysis:
|
|
[attach webpack-bundle-analyzer output]
|
|
Help me optimize the bundle size and loading performance.
|
|
```
|
|
|
|
## Best Practices Included
|
|
|
|
Each agent follows industry best practices:
|
|
- **Code Quality**: ESLint, Prettier, Husky pre-commit hooks
|
|
- **Testing**: Unit tests, integration tests, E2E tests
|
|
- **Documentation**: JSDoc, TypeDoc, API documentation
|
|
- **Security**: OWASP guidelines, dependency scanning
|
|
- **Performance**: Code splitting, lazy loading, caching
|
|
- **Accessibility**: WCAG compliance, semantic HTML
|
|
|
|
## Integration with Core BMAD
|
|
|
|
This expansion pack integrates seamlessly with core BMAD agents:
|
|
- **Analyst**: Gathers requirements for JS projects
|
|
- **PM**: Creates PRDs using JS-specific templates
|
|
- **Architect**: Works with JS Solution Architect for technical design
|
|
- **Scrum Master**: Creates stories using JS development templates
|
|
- **Dev**: Executes development with JS-specific guidance
|
|
- **QA**: Tests with JS testing frameworks
|
|
|
|
## Configuration
|
|
|
|
Add to your `bmad-core/config/core-config.yaml`:
|
|
|
|
```yaml
|
|
expansion_packs:
|
|
- name: javascript-fullstack
|
|
enabled: true
|
|
agents:
|
|
- js-solution-architect
|
|
- react-developer
|
|
- node-backend-developer
|
|
- api-developer
|
|
- typescript-expert
|
|
```
|
|
|
|
## Contributing
|
|
|
|
Contributions welcome! Add new agents for:
|
|
- Svelte/SvelteKit development
|
|
- Deno/Bun runtimes
|
|
- Astro/Remix frameworks
|
|
- Mobile development (React Native)
|
|
- Desktop apps (Electron, Tauri)
|
|
|
|
## License
|
|
|
|
MIT License - Part of the BMAD-METHOD ecosystem
|
|
|
|
## Support
|
|
|
|
- GitHub Issues: Report bugs or request features
|
|
- Discord: Join the BMAD community
|
|
- Documentation: Full docs in `/docs` directory
|