opencode-agent-kit 1.0.0

package/template/.opencode/agent-docs/frontend/nuxt/INDEX.md

@@ -0,0 +1,596 @@
+# 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
+└── agent-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)!** 🚀