# 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)!** 🚀