386 lines
10 KiB
Markdown
386 lines
10 KiB
Markdown
# 🚀 JavaScript Full-Stack Expansion Pack - Installation & Usage
|
|
|
|
## ✅ What You've Received
|
|
|
|
A complete BMAD-METHOD expansion pack with:
|
|
|
|
### 📦 12 Files Total
|
|
- **5 AI Agents** (5,166 lines) - Specialized development experts
|
|
- **2 Templates** (976 lines) - PRD and Story templates
|
|
- **4 Documentation Files** (1,389 lines) - Guides and references
|
|
- **1 Configuration** (77 lines) - Package setup
|
|
|
|
### 📊 Total Content: ~7,600 lines of comprehensive documentation
|
|
|
|
---
|
|
|
|
## 🎯 Installation Options
|
|
|
|
### Option 1: Direct Use (Recommended for Quick Start)
|
|
|
|
The expansion pack is ready to use as-is! Simply:
|
|
|
|
1. **Copy the entire folder** to your BMAD installation:
|
|
```bash
|
|
cp -r javascript-fullstack-pack /path/to/your/bmad-core/expansion-packs/
|
|
```
|
|
|
|
2. **Start using the agents** in your BMAD UI:
|
|
```
|
|
*js-solution-architect
|
|
*react-developer
|
|
*node-backend-developer
|
|
*api-developer
|
|
*typescript-expert
|
|
```
|
|
|
|
### Option 2: NPM Package (For Distribution)
|
|
|
|
To publish this as an NPM package:
|
|
|
|
1. **Update package.json** with your information:
|
|
```json
|
|
{
|
|
"name": "bmad-expansion-javascript-fullstack",
|
|
"author": "Your Name",
|
|
"repository": "your-github-url"
|
|
}
|
|
```
|
|
|
|
2. **Publish to NPM**:
|
|
```bash
|
|
cd javascript-fullstack-pack
|
|
npm publish
|
|
```
|
|
|
|
3. **Users install with**:
|
|
```bash
|
|
npm install bmad-expansion-javascript-fullstack
|
|
npx bmad-method install
|
|
```
|
|
|
|
### Option 3: GitHub Repository
|
|
|
|
To share via GitHub:
|
|
|
|
1. **Create a new repository**
|
|
2. **Push the expansion pack**:
|
|
```bash
|
|
cd javascript-fullstack-pack
|
|
git init
|
|
git add .
|
|
git commit -m "Initial commit: JavaScript Full-Stack Expansion Pack"
|
|
git remote add origin <your-repo-url>
|
|
git push -u origin main
|
|
```
|
|
|
|
3. **Users clone and install**:
|
|
```bash
|
|
git clone <your-repo-url>
|
|
cp -r javascript-fullstack-pack/* /path/to/bmad-core/expansion-packs/
|
|
```
|
|
|
|
---
|
|
|
|
## 📖 Quick Start Guide
|
|
|
|
### Step 1: Read the Documentation (5-10 minutes)
|
|
|
|
Start with **one** of these based on your needs:
|
|
|
|
- **Quick start?** → `QUICKSTART.md`
|
|
- **Complete overview?** → `README.md`
|
|
- **Find specific info?** → `INDEX.md`
|
|
- **Executive summary?** → `SUMMARY.md`
|
|
|
|
### Step 2: Explore the Agents (30-60 minutes)
|
|
|
|
Review the agent that matches your immediate need:
|
|
|
|
- **Planning a project?** → `agents/js-solution-architect.md`
|
|
- **Building UI?** → `agents/react-developer.md`
|
|
- **Creating APIs?** → `agents/node-backend-developer.md`
|
|
- **Designing endpoints?** → `agents/api-developer.md`
|
|
- **TypeScript issues?** → `agents/typescript-expert.md`
|
|
|
|
### Step 3: Try It Out (1-2 hours)
|
|
|
|
Pick a small project and:
|
|
1. Use the **JS Solution Architect** to design it
|
|
2. Use the **PRD template** to document it
|
|
3. Use the **Story template** to break it down
|
|
4. Implement with **React** and **Node** developers
|
|
|
|
### Step 4: Build Something Real (1-2 days)
|
|
|
|
Follow the complete workflow in `QUICKSTART.md` to build a real application.
|
|
|
|
---
|
|
|
|
## 🎓 Recommended Reading Order
|
|
|
|
### For Beginners
|
|
1. `INDEX.md` - Overview of everything (10 min)
|
|
2. `QUICKSTART.md` - Step-by-step tutorial (20 min)
|
|
3. `agents/react-developer.md` - Frontend basics (30 min)
|
|
4. `agents/node-backend-developer.md` - Backend basics (30 min)
|
|
5. **Practice with a simple CRUD app**
|
|
|
|
### For Experienced Developers
|
|
1. `SUMMARY.md` - Complete capabilities (15 min)
|
|
2. `agents/js-solution-architect.md` - Architecture patterns (30 min)
|
|
3. `agents/typescript-expert.md` - Advanced patterns (30 min)
|
|
4. Skim other agents as needed (15 min each)
|
|
5. **Build a complex feature**
|
|
|
|
### For Architects & Leads
|
|
1. `README.md` - Full documentation (20 min)
|
|
2. `agents/js-solution-architect.md` - Deep dive (45 min)
|
|
3. `agents/api-developer.md` - API standards (30 min)
|
|
4. `templates/prd/` - Requirements format (20 min)
|
|
5. **Design a system architecture**
|
|
|
|
---
|
|
|
|
## 🎯 Usage Patterns
|
|
|
|
### Pattern 1: New Project from Scratch
|
|
|
|
```bash
|
|
# 1. Start with architecture
|
|
*js-solution-architect
|
|
I want to build [description]. Help me design the architecture.
|
|
|
|
# 2. Create PRD
|
|
*pm
|
|
Create a PRD using the JavaScript Full-Stack template.
|
|
|
|
# 3. Generate stories
|
|
*scrum-master
|
|
Create development stories from the PRD.
|
|
|
|
# 4. Implement
|
|
*react-developer
|
|
Implement the UI for story JS-001.
|
|
|
|
*node-backend-developer
|
|
Implement the API for story JS-002.
|
|
```
|
|
|
|
### Pattern 2: Adding a Feature
|
|
|
|
```bash
|
|
# 1. Design the feature
|
|
*js-solution-architect
|
|
I want to add [feature]. What's the best approach?
|
|
|
|
# 2. Create story
|
|
*scrum-master
|
|
Create a story for [feature] using the JavaScript template.
|
|
|
|
# 3. Implement
|
|
[Use appropriate developer agent]
|
|
```
|
|
|
|
### Pattern 3: Refactoring/Optimization
|
|
|
|
```bash
|
|
# 1. Analyze current state
|
|
*js-solution-architect
|
|
Review my architecture for [specific concern].
|
|
|
|
# 2. Get specific guidance
|
|
*typescript-expert
|
|
Help me improve types in [specific area].
|
|
|
|
*react-developer
|
|
Optimize performance of [specific component].
|
|
```
|
|
|
|
---
|
|
|
|
## 📁 File Reference Guide
|
|
|
|
### Must-Read Files
|
|
- `QUICKSTART.md` - Your first stop
|
|
- `README.md` - Complete documentation
|
|
- `INDEX.md` - Navigation guide
|
|
|
|
### Agent Files (Read as Needed)
|
|
- `agents/js-solution-architect.md` - When planning architecture
|
|
- `agents/react-developer.md` - When building frontend
|
|
- `agents/node-backend-developer.md` - When building backend
|
|
- `agents/api-developer.md` - When designing APIs
|
|
- `agents/typescript-expert.md` - When dealing with types
|
|
|
|
### Template Files (Use as Reference)
|
|
- `templates/prd/fullstack-javascript-prd.md` - For requirements docs
|
|
- `templates/stories/javascript-development-story.md` - For dev stories
|
|
|
|
### Reference Files (For Quick Lookup)
|
|
- `SUMMARY.md` - Quick overview
|
|
- `INDEX.md` - Find anything quickly
|
|
|
|
---
|
|
|
|
## 💡 Pro Tips
|
|
|
|
### Getting the Most Value
|
|
|
|
1. **Don't read everything at once**
|
|
- Start with QUICKSTART.md
|
|
- Deep dive into agents as you need them
|
|
|
|
2. **Use the right agent for the job**
|
|
- Architecture decisions → Solution Architect
|
|
- Frontend code → React Developer
|
|
- Backend code → Node Backend Developer
|
|
- API design → API Developer
|
|
- Type problems → TypeScript Expert
|
|
|
|
3. **Follow the templates**
|
|
- Use PRD template for requirements
|
|
- Use Story template for tasks
|
|
- They ensure you don't miss important details
|
|
|
|
4. **Iterate and refine**
|
|
- Start with high-level architecture
|
|
- Break down into stories
|
|
- Implement incrementally
|
|
- Refine based on feedback
|
|
|
|
5. **Keep conversations focused**
|
|
- One topic per agent conversation
|
|
- Provide context upfront
|
|
- Reference previous decisions when needed
|
|
|
|
### Common Mistakes to Avoid
|
|
|
|
❌ **Skipping architecture planning** → Always start with Solution Architect
|
|
❌ **Using wrong agent** → Check agent specializations first
|
|
❌ **Not providing context** → Share project details and constraints
|
|
❌ **Ignoring templates** → They capture best practices
|
|
❌ **Reading everything** → Start with quick start, dive deeper as needed
|
|
|
|
---
|
|
|
|
## 🔧 Customization
|
|
|
|
### Modifying Agents
|
|
|
|
Each agent file can be customized:
|
|
1. Open the agent `.md` file
|
|
2. Modify the expertise, examples, or patterns
|
|
3. Save and reload in BMAD
|
|
4. Test with your use cases
|
|
|
|
### Creating New Templates
|
|
|
|
Use existing templates as starting points:
|
|
1. Copy a template file
|
|
2. Modify sections for your needs
|
|
3. Save in `templates/` directory
|
|
4. Reference in your workflow
|
|
|
|
### Adding New Agents
|
|
|
|
Follow the pattern in existing agents:
|
|
1. Create new `.md` file in `agents/`
|
|
2. Include YAML frontmatter with agent config
|
|
3. Document expertise and patterns
|
|
4. Add to `package.json` manifest
|
|
|
|
---
|
|
|
|
## 📊 Success Metrics
|
|
|
|
### You'll Know This Is Working When:
|
|
|
|
✅ You can quickly design a full-stack architecture
|
|
✅ You're writing better TypeScript code
|
|
✅ Your APIs follow consistent patterns
|
|
✅ Your frontend code is more maintainable
|
|
✅ You catch bugs at compile time, not runtime
|
|
✅ Your tests are comprehensive
|
|
✅ Your documentation is clear
|
|
✅ Your team follows consistent patterns
|
|
|
|
---
|
|
|
|
## 🎉 You're Ready to Start!
|
|
|
|
### Immediate Next Steps:
|
|
|
|
1. **Choose your path** from the reading order above
|
|
2. **Read QUICKSTART.md** (20 minutes)
|
|
3. **Pick an agent** to explore (30 minutes)
|
|
4. **Try a simple task** with that agent (1 hour)
|
|
5. **Build something real** (ongoing)
|
|
|
|
### Long-term Journey:
|
|
|
|
- Week 1: Explore all agents, try simple projects
|
|
- Week 2-3: Build a complete feature using the workflow
|
|
- Month 1: Master the agents you use most
|
|
- Month 2-3: Deep dive into advanced patterns
|
|
- Ongoing: Contribute improvements and share learnings
|
|
|
|
---
|
|
|
|
## 📞 Getting Help
|
|
|
|
### Documentation Resources
|
|
- All `.md` files in this pack contain extensive examples
|
|
- Each agent file has practical code samples
|
|
- Templates show real-world structure
|
|
|
|
### Community Resources
|
|
- BMAD Discord community
|
|
- GitHub discussions
|
|
- Issue tracker for bugs/improvements
|
|
|
|
### Self-Service
|
|
- Search INDEX.md for specific topics
|
|
- Check agent files for patterns
|
|
- Review templates for examples
|
|
- Try QUICKSTART.md tutorials
|
|
|
|
---
|
|
|
|
## 🌟 Final Notes
|
|
|
|
This expansion pack represents **7,600+ lines** of carefully crafted documentation, patterns, and examples for modern JavaScript development.
|
|
|
|
It's designed to:
|
|
- ✅ Save you time on common tasks
|
|
- ✅ Help you learn best practices
|
|
- ✅ Provide consistent patterns
|
|
- ✅ Catch errors early
|
|
- ✅ Build production-ready code
|
|
|
|
**Take your time, explore thoroughly, and build amazing things!**
|
|
|
|
---
|
|
|
|
## 📝 Quick Reference Card
|
|
|
|
| Need | File | Time |
|
|
|------|------|------|
|
|
| Get started fast | `QUICKSTART.md` | 20 min |
|
|
| Find anything | `INDEX.md` | 5 min |
|
|
| Complete overview | `README.md` | 30 min |
|
|
| Quick summary | `SUMMARY.md` | 15 min |
|
|
| Architecture help | `agents/js-solution-architect.md` | 45 min |
|
|
| Frontend code | `agents/react-developer.md` | 45 min |
|
|
| Backend code | `agents/node-backend-developer.md` | 45 min |
|
|
| API design | `agents/api-developer.md` | 30 min |
|
|
| TypeScript help | `agents/typescript-expert.md` | 30 min |
|
|
| PRD template | `templates/prd/...` | 10 min |
|
|
| Story template | `templates/stories/...` | 10 min |
|
|
|
|
**Start with QUICKSTART.md and you'll be productive in under 30 minutes!**
|
|
|
|
---
|
|
|
|
**Happy coding! 🚀**
|