opencode-agent-kit
Version:
Multi-stack OpenCode agent toolkit — 33+ specialized AI agents, 200+ skills, 46 commands, 8 MCP servers (Nuxt, React, Node.js, Laravel, CI3, Android, Flutter, DevOps, SEO, SonarQube, and more)
597 lines (420 loc) • 13.9 kB
Markdown
# Frontend Developer Agent - Documentation Index
Navigasi lengkap untuk semua dokumentasi Frontend Developer Agent.
## 🚀 Quick Links
| Kebutuhan | Dokumen |
| --------------------------- | ------------------------------------------------------------------ |
| Baru mulai? | [QUICK_START.md](./QUICK_START.md) |
| Butuh contoh? | [EXAMPLES.md](./EXAMPLES.md) |
| API patterns? | [API_PATTERNS.md](./API_PATTERNS.md) |
| Roadmap mentor 30 hari? | [MENTOR_CURRICULUM_30_DAYS.md](./MENTOR_CURRICULUM_30_DAYS.md) |
| Checklist harian mentor? | [MENTOR_CURRICULUM_CHECKLIST.md](./MENTOR_CURRICULUM_CHECKLIST.md) |
| Assignment mingguan mentor? | [MENTOR_WEEKLY_ASSIGNMENTS.md](./MENTOR_WEEKLY_ASSIGNMENTS.md) |
| Cari command cepat? | [CHEATSHEET.md](./CHEATSHEET.md) |
| Workflow lengkap? | [WORKFLOWS.md](./WORKFLOWS.md) |
| MCP integration? | [MCP_GUIDE.md](./MCP_GUIDE.md) |
| Testing agent? | [TESTING_GUIDE.md](./TESTING_GUIDE.md) |
| SOP tim? | [TEAM_OPERATING_GUIDE.md](./TEAM_OPERATING_GUIDE.md) |
| Overview lengkap? | [README.md](./README.md) |
| Installation summary? | [SUMMARY.md](./SUMMARY.md) |
## 📖 Documentation Structure
```
.opencode/
├── agents/
│ └── frontend-developer.md # Agent definition
└── docs/frontend/nuxt/ # Supporting documentation (this directory)
├── INDEX.md # This file - navigation hub
├── README.md # Complete user guide
├── QUICK_START.md # Get started in 5 minutes
├── EXAMPLES.md # Practical examples
├── API_PATTERNS.md # useApi composable guide
├── MENTOR_CURRICULUM_30_DAYS.md # 30-day beginner curriculum
├── MENTOR_CURRICULUM_CHECKLIST.md # daily execution checklist
├── MENTOR_WEEKLY_ASSIGNMENTS.md # weekly tasks and rubric
├── WORKFLOWS.md # Detailed workflows
├── CHEATSHEET.md # Quick reference
├── MCP_GUIDE.md # MCP integration
├── TESTING_GUIDE.md # Testing & validation
├── TEAM_OPERATING_GUIDE.md# Team operating SOP
├── SUMMARY.md # Installation summary
└── COMPLETION_REPORT.md # Project completion
```
**Important:** Only `frontend-developer.md` appears in OpenCode agent list. All other files in `docs/` are supporting documentation.
## 📚 Documentation By Use Case
### For New Users
**Start Here:**
1. Read [QUICK_START.md](./QUICK_START.md) - 5 menit untuk memahami basics
2. Try examples dari [EXAMPLES.md](./EXAMPLES.md) - mulai dari simple
3. Reference [CHEATSHEET.md](./CHEATSHEET.md) - untuk quick commands
**Progression:**
- Week 1: QUICK_START → EXAMPLES (Section 1-3)
- Week 2: EXAMPLES (Section 4-6) → WORKFLOWS (Workflow 1-3)
- Week 3: Complete WORKFLOWS → MCP_GUIDE basics
- Week 4: Advanced MCP usage → Custom workflows
### For Experienced Users
**Quick Reference:**
- [CHEATSHEET.md](./CHEATSHEET.md) - Commands, skills, shortcuts
- [EXAMPLES.md](./EXAMPLES.md) - Copy-paste examples
- [MCP_GUIDE.md](./MCP_GUIDE.md) - Advanced MCP patterns
**Deep Dives:**
- [WORKFLOWS.md](./WORKFLOWS.md) - Complete feature workflows
- [README.md](./README.md) - Comprehensive capabilities
- [frontend-developer.md](./frontend-developer.md) - Agent internals
### For Team Leads
**Setup & Onboarding:**
1. [SUMMARY.md](./SUMMARY.md) - Quick installation overview
2. [QUICK_START.md](./QUICK_START.md) - Team onboarding guide
3. [TESTING_GUIDE.md](./TESTING_GUIDE.md) - Validation & quality
**Best Practices:**
- [WORKFLOWS.md](./WORKFLOWS.md) - Standard workflows untuk team
- [README.md](./README.md) - Capabilities & limitations
- [EXAMPLES.md](./EXAMPLES.md) - Pattern library
### For Testing & QA
**Validation:**
1. [TESTING_GUIDE.md](./TESTING_GUIDE.md) - Complete testing suite
2. [EXAMPLES.md](./EXAMPLES.md) - Expected outputs
3. [WORKFLOWS.md](./WORKFLOWS.md) - End-to-end scenarios
**Bug Reports:**
- Use templates dari TESTING_GUIDE.md
- Reference specific workflows
- Document expected vs actual
## 📝 Documentation Details
### [README.md](./README.md) - Complete User Guide
**Size:** 12KB | **Lines:** 505
**Content:**
- Agent capabilities overview
- Skills integration (10+ skills)
- Usage methods (@mention, primary agent)
- Practical examples
- Tips & best practices
- Troubleshooting
- FAQ
**Best For:**
- Understanding full capabilities
- Learning all features
- Reference guide
### [QUICK_START.md](./QUICK_START.md) - Getting Started
**Size:** 11KB | **Lines:** 544
**Content:**
- 5-minute quick start
- Installation verification
- First component creation
- MCP setup basics
- Common tasks
- Next steps
**Best For:**
- New users
- Quick onboarding
- Team training
- Demos
### [EXAMPLES.md](./EXAMPLES.md) - Practical Examples
**Size:** 18KB | **Lines:** 900+
**Content:**
- 8 major categories
- 50+ code examples
- Real-world scenarios
- Expected outputs
- Prompt templates
- Best practices
**Categories:**
1. Component Development
2. Nuxt UI Integration
3. API Integration
4. Form Handling
5. State Management
6. Performance Optimization
7. Accessibility Review
8. Bug Fixing
**Best For:**
- Copy-paste solutions
- Learning by example
- Pattern reference
- Prompt templates
### [WORKFLOWS.md](./WORKFLOWS.md) - Detailed Workflows
**Size:** 15KB | **Lines:** 758
**Content:**
- 8 complete workflows
- Step-by-step guides
- Success criteria
- Validation checklists
**Workflows:**
1. New Component Development
2. Bug Investigation & Fix
3. Performance Optimization
4. Accessibility Compliance
5. Feature Implementation
6. Code Review
7. Testing Strategy
8. Documentation
**Best For:**
- Complex tasks
- Standard procedures
- Quality assurance
- Team alignment
### [CHEATSHEET.md](./CHEATSHEET.md) - Quick Reference
**Size:** 11KB | **Lines:** 621
**Content:**
- Quick commands
- Skills reference
- MCP servers
- Code patterns
- Keyboard shortcuts
- Common tasks
**Sections:**
- Agent activation
- Component patterns
- Data fetching
- Form handling
- Testing
- Optimization
- Accessibility
**Best For:**
- Quick lookup
- Daily reference
- Command reminder
- Pattern templates
### [MCP_GUIDE.md](./MCP_GUIDE.md) - MCP Integration
**Size:** 22KB | **Lines:** 1000+
**Content:**
- MCP fundamentals
- Server setup (4 servers)
- Tool usage
- Advanced patterns
- Troubleshooting
- Best practices
**MCP Servers:**
1. Nuxt MCP
2. Nuxt UI MCP
3. Playwright MCP
4. Figma MCP
**Best For:**
- MCP setup
- Advanced usage
- Integration patterns
- Troubleshooting MCP
### [TESTING_GUIDE.md](./TESTING_GUIDE.md) - Testing & Validation
**Size:** 16KB | **Lines:** 800+
**Content:**
- 17 test scenarios
- Validation checklists
- Performance benchmarks
- Troubleshooting
- Report templates
**Test Categories:**
- Basic functionality (3 tests)
- MCP integration (3 tests)
- Skills integration (4 tests)
- Advanced scenarios (4 tests)
- Edge cases (3 tests)
**Best For:**
- Agent validation
- Quality assurance
- Bug reporting
- Performance monitoring
### [SUMMARY.md](./SUMMARY.md) - Installation Summary
**Size:** 10KB
**Content:**
- Installation recap
- Configuration overview
- Quick reference
- Next steps
- Team sharing
**Best For:**
- Post-installation
- Setup verification
- Quick overview
- Sharing with team
### [frontend-developer.md](./frontend-developer.md) - Agent Definition
**Size:** 30KB | **Lines:** 989
**Content:**
- Agent identity & role
- Core responsibilities
- MCP integration logic
- Skills integration strategy
- Memory management
- Quality standards
- Workflows & protocols
**Best For:**
- Understanding agent behavior
- Customizing agent
- Advanced configuration
- Contributing improvements
## 🎯 Learning Paths
### Path 1: Beginner Frontend Developer
**Goal:** Learn agent basics dalam 1 minggu
**Week 1:**
- Day 1: QUICK_START.md → Complete first example
- Day 2: EXAMPLES.md Section 1-2 → Create 3 components
- Day 3: EXAMPLES.md Section 3 → Practice API integration
- Day 4: WORKFLOWS.md Workflow 1 → Component development
- Day 5: CHEATSHEET.md → Memorize common commands
- Weekend: Practice 5+ examples
**Success Criteria:**
- Can create basic components independently
- Understands agent capabilities
- Comfortable with @mention syntax
### Path 2: Advanced Frontend Developer
**Goal:** Master advanced features dalam 2 minggu
**Week 1:**
- Day 1-2: MCP_GUIDE.md → Setup all MCP servers
- Day 3-4: EXAMPLES.md Section 4-8 → Advanced patterns
- Day 5: WORKFLOWS.md Workflow 4-5 → Accessibility & performance
**Week 2:**
- Day 1-2: Complete 3 advanced workflows
- Day 3: Custom workflow creation
- Day 4: TESTING_GUIDE.md → Run full test suite
- Day 5: Team knowledge sharing
**Success Criteria:**
- Can use all MCP servers effectively
- Understands all skills integration
- Can optimize performance
- Can review accessibility
### Path 3: Team Lead / Architect
**Goal:** Setup team & establish standards
**Week 1:**
- Day 1: Review all documentation
- Day 2: TESTING_GUIDE.md → Validate agent
- Day 3: WORKFLOWS.md → Customize for team
- Day 4: Create team standards
- Day 5: Team training session
**Week 2+:**
- Establish code review workflows
- Create custom examples for team
- Monitor agent usage
- Gather feedback
- Iterate on standards
**Success Criteria:**
- Team onboarded successfully
- Standard workflows established
- Quality metrics defined
- Continuous improvement process
## 🔍 Search Guide
**Finding Specific Information:**
| Looking For | Search In | Keyword |
| ------------------ | ------------------------- | ---------------------------- |
| Component creation | EXAMPLES.md | "ProductCard", "Button" |
| Form validation | EXAMPLES.md | "Zod", "validation" |
| API integration | EXAMPLES.md | "useFetch", "error handling" |
| State management | EXAMPLES.md | "Pinia", "cart" |
| Performance | EXAMPLES.md, WORKFLOWS.md | "optimize", "lighthouse" |
| Accessibility | EXAMPLES.md, WORKFLOWS.md | "WCAG", "aria" |
| MCP usage | MCP_GUIDE.md | Server name |
| Skills | CHEATSHEET.md | Skill name |
| Testing | TESTING_GUIDE.md | Test number |
| Commands | CHEATSHEET.md | "@frontend" |
## 📊 Documentation Stats
**Total Documentation:**
- Files: 12
- Total Size: ~115 KB
- Total Lines: ~5,500+
- Code Examples: 100+
- Workflows: 8
- Test Scenarios: 17
- Skills Documented: 10+
- MCP Servers: 4
**Coverage:**
- Component Development ✅
- API Integration ✅
- Form Handling ✅
- State Management ✅
- Performance Optimization ✅
- Accessibility ✅
- Testing ✅
- MCP Integration ✅
- Skills Integration ✅
- Troubleshooting ✅
## 🔄 Documentation Updates
**Version:** 1.0.0
**Last Updated:** 2024-04-08
**Recent Additions:**
- ✨ EXAMPLES.md - 50+ practical examples
- ✨ TESTING_GUIDE.md - Complete testing suite
- ✨ MCP_GUIDE.md - Comprehensive MCP integration
- ✨ INDEX.md - This navigation file
**Upcoming:**
- Video tutorials
- Interactive examples
- Team templates
- Custom workflow generator
## 💡 Tips for Using Documentation
### 1. Start Small
Jangan overwhelm - mulai dari QUICK_START.md
### 2. Learn By Doing
Copy examples dari EXAMPLES.md dan modifikasi
### 3. Reference Often
Keep CHEATSHEET.md open saat coding
### 4. Follow Workflows
Use WORKFLOWS.md untuk complex tasks
### 5. Test Regularly
Validate dengan TESTING_GUIDE.md
### 6. Share Knowledge
Document custom patterns untuk team
## 🤝 Contributing
Found improvement opportunities?
1. **Documentation Gaps:**
- Missing examples?
- Unclear explanations?
- Need more workflows?
2. **Report Format:**
```markdown
**Document:** EXAMPLES.md
**Section:** Form Handling
**Issue:** Missing multi-step form example
**Suggestion:** Add wizard form with 3 steps
```
3. **Share Your Examples:**
- Custom workflows that work well
- Team-specific patterns
- Performance optimizations
- Accessibility improvements
## 📞 Support
**Questions?**
- Check FAQ in README.md
- Review TROUBLESHOOTING sections
- Reference EXAMPLES.md untuk similar cases
**Issues?**
- Use TESTING_GUIDE.md templates
- Document exact steps
- Share error messages
**Feedback?**
- What's working well?
- What needs improvement?
- What's missing?
## ✅ Quick Checklist
**Before Starting Development:**
- [ ] Read QUICK_START.md (5 minutes)
- [ ] Setup MCP servers (MCP_GUIDE.md)
- [ ] Try 3 basic examples (EXAMPLES.md)
- [ ] Bookmark CHEATSHEET.md
**For Each Feature:**
- [ ] Check relevant workflow (WORKFLOWS.md)
- [ ] Reference similar example (EXAMPLES.md)
- [ ] Use appropriate skills
- [ ] Test with TESTING_GUIDE.md
**After Development:**
- [ ] Run quality checks
- [ ] Validate accessibility
- [ ] Document learnings
- [ ] Share with team
**Ready to start? Go to [QUICK_START.md](./QUICK_START.md)!** 🚀