opencode-agent-kit 1.0.0

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

@@ -0,0 +1,506 @@
+# Frontend Developer Agent - User Guide
+
+Panduan lengkap untuk menggunakan Frontend Developer Agent di OpenCode.
+
+## 📚 Complete Documentation
+
+- **[README.md](./README.md)** - User guide (you are here)
+- **[QUICK_START.md](./QUICK_START.md)** - Getting started in 5 minutes
+- **[EXAMPLES.md](./EXAMPLES.md)** - 50+ practical examples
+- **[WORKFLOWS.md](./WORKFLOWS.md)** - 8 detailed workflows
+- **[CHEATSHEET.md](./CHEATSHEET.md)** - Quick reference
+- **[MCP_GUIDE.md](./MCP_GUIDE.md)** - MCP integration guide
+- **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** - Testing & validation
+- **[SUMMARY.md](./SUMMARY.md)** - Installation summary
+
+## 📋 Daftar Isi
+
+1. [Cara Menggunakan Agent](#cara-menggunakan-agent)
+2. [Skills yang Terintegrasi](#skills-yang-terintegrasi)
+3. [Contoh Penggunaan](#contoh-penggunaan)
+4. [Tips & Best Practices](#tips--best-practices)
+5. [Troubleshooting](#troubleshooting)
+
+---
+
+## Cara Menggunakan Agent
+
+### Metode 1: Menggunakan @mention (Recommended)
+
+Dalam OpenCode, Anda bisa langsung memanggil agent dengan `@` mention:
+
+```
+@frontend-developer bantu aku buat komponen Card yang reusable
+```
+
+### Metode 2: Mengaktifkan sebagai Primary Agent
+
+Edit `opencode.json` untuk menjadikan ini primary agent:
+
+```json
+{
+  "agent": {
+    "frontend": {
+      "prompt": "{file:.opencode/agents/frontend-developer.md}",
+      "mode": "primary"
+    }
+  }
+}
+```
+
+Kemudian gunakan Tab key untuk switch ke agent ini.
+
+---
+
+## Skills yang Terintegrasi
+
+Agent ini mengintegrasikan 10+ skills dari repository Anda:
+
+### Core Skills (Auto-load)
+
+Agent akan otomatis load skills ini saat session dimulai:
+
+1. **`coding-standards`**
+   - Universal coding best practices
+   - TypeScript/JavaScript standards
+   - Error handling patterns
+   - File organization
+
+2. **`frontend-patterns`**
+   - Vue/Nuxt component patterns
+   - Composable patterns
+   - State management
+   - Performance optimization
+   - Form handling
+
+3. **`frontend-design`**
+   - Design thinking process
+   - Aesthetic guidelines
+   - Typography standards
+   - Animation patterns
+   - Creative implementation
+
+4. **`web-design-guidelines`**
+   - UI/UX compliance
+   - Accessibility audit
+   - Design best practices
+   - Interface guidelines
+
+### Contextual Skills (Load on-demand)
+
+Agent akan load skills ini sesuai kebutuhan:
+
+- **`nuxt-ui`** - Saat bekerja dengan Nuxt UI components
+- **`vercel-composition-patterns`** - Untuk refactoring komponen kompleks
+- **`building-components`** - Saat membuat component library
+- **`security-review`** - Untuk user input dan authentication
+- **`tdd-workflow`** - Saat menulis tests
+
+---
+
+## Contoh Penggunaan
+
+### 1. Membuat Komponen Baru
+
+```
+@frontend-developer Buat komponen MarketCard untuk menampilkan:
+- Nama market
+- Status (active/closed/resolved)
+- Volume trading
+- Tanggal berakhir
+- Tombol untuk bet
+
+Gunakan Nuxt UI dan pastikan accessible.
+```
+
+Agent akan:
+
+1. Load skill `nuxt-ui` dan `building-components`
+2. Membuat komponen dengan TypeScript strict mode
+3. Implementasi accessibility (ARIA labels, keyboard navigation)
+4. Tambahkan loading states dan error handling
+5. Gunakan design system yang konsisten
+
+### 2. Optimasi Performance
+
+```
+@frontend-developer Review komponen MarketList.vue, kayaknya lemot saat render 100+ items. Bisa dioptimasi?
+```
+
+Agent akan:
+
+1. Load skill `frontend-patterns`
+2. Analisis performance bottlenecks
+3. Suggest virtualization untuk long lists
+4. Implementasi memoization
+5. Optimize re-renders
+
+### 3. Implementasi Design
+
+```
+@frontend-developer Bikin landing page dengan aesthetic futuristic,
+bold colors, dan smooth animations. Pakai gradient meshes dan
+geometric patterns.
+```
+
+Agent akan:
+
+1. Load skill `frontend-design`
+2. Choose distinctive fonts (bukan Inter/Roboto)
+3. Create cohesive color palette
+4. Implement purposeful animations
+5. Add atmospheric backgrounds
+
+### 4. Refactoring Komponen
+
+```
+@frontend-developer Komponen UserProfile ini terlalu complex, ada 15 props dan banyak conditional rendering. Bisa direfactor?
+```
+
+Agent akan:
+
+1. Load skill `vercel-composition-patterns`
+2. Extract compound components
+3. Use composition over props
+4. Improve maintainability
+5. Preserve functionality
+
+### 5. Accessibility Audit
+
+```
+@frontend-developer Check accessibility untuk form di pages/create-market.vue
+```
+
+Agent akan:
+
+1. Load skill `web-design-guidelines`
+2. Check semantic HTML
+3. Verify keyboard navigation
+4. Check ARIA labels
+5. Test color contrast
+6. Provide actionable fixes
+
+---
+
+## Tips & Best Practices
+
+### 1. Berikan Konteks yang Cukup
+
+❌ **Kurang baik:**
+
+```
+Buat komponen button
+```
+
+✅ **Lebih baik:**
+
+```
+Buat komponen Button dengan:
+- Variants: primary, secondary, ghost
+- Sizes: sm, md, lg
+- Support icon (leading dan trailing)
+- Loading state
+- Disabled state
+- Full width option
+
+Gunakan Nuxt UI sebagai base dan pastikan accessible.
+```
+
+### 2. Spesifikasikan Stack Nuxt/Vue
+
+Agent ini fokus ke Nuxt/Vue. Sebutkan konteks stack dengan jelas:
+
+```
+@frontend-developer Buat composable useMarketData dengan Vue 3
+```
+
+### 3. Minta Penjelasan
+
+Agent akan explain trade-offs dan decisions:
+
+```
+@frontend-developer Explain kenapa kamu pakai computed di sini vs watch
+```
+
+### 4. Iterasi Bertahap
+
+Mulai simple, lalu improve:
+
+```
+# Step 1
+@frontend-developer Buat basic MarketCard component
+
+# Step 2 (setelah review)
+@frontend-developer Tambahkan animation saat hover dan loading skeleton
+
+# Step 3
+@frontend-developer Add share dan bookmark functionality
+```
+
+### 5. Leverage Memory Management
+
+Agent akan remember context dalam session:
+
+```
+# Message 1
+@frontend-developer Analyze struktur project ini
+
+# Message 5 (agent sudah tau struktur)
+Buat komponen serupa dengan UserCard tapi untuk Market
+```
+
+---
+
+## Memory Management
+
+### Apa yang Agent Ingat
+
+✅ **Selama Session:**
+
+- Project structure dan patterns
+- Your coding preferences
+- Design system tokens
+- Recent changes
+- Architecture decisions
+
+❌ **Tidak Diingat:**
+
+- Temporary debug code
+- Failed experiments
+- Session sebelumnya (kecuali disebutkan)
+
+### Cara Memaksimalkan Context
+
+**Untuk task besar, guide the agent:**
+
+```markdown
+@frontend-developer Kita akan implement feature "Market Discovery".
+
+Phase 1: Buat komponen MarketGrid untuk display markets
+Phase 2: Add filtering (status, category, date range)  
+Phase 3: Implement search dengan semantic similarity
+Phase 4: Add sorting options
+
+Mulai dari Phase 1 dulu.
+```
+
+**Agent akan track progress:**
+
+```yaml
+Session Context:
+  current_phase: 'Phase 1'
+  completed_components: ['MarketGrid']
+  next_steps: ['Add filtering']
+```
+
+---
+
+## Troubleshooting
+
+### Agent tidak load skill yang dibutuhkan
+
+**Solusi:** Minta explicitly
+
+```
+@frontend-developer Load skill `nuxt-ui` and help me build a form
+```
+
+### Agent pakai pattern yang tidak sesuai project
+
+**Solusi:** Specify project patterns
+
+```
+@frontend-developer Kita pakai Pinia untuk state management, bukan Zustand.
+Update approach kamu.
+```
+
+### Agent terlalu verbose
+
+**Solusi:** Minta concise
+
+```
+@frontend-developer Same task tapi less explanation, more code
+```
+
+### Agent skip accessibility
+
+**Solusi:** Remind explicitly
+
+```
+@frontend-developer IMPORTANT: Ensure WCAG 2.1 compliance untuk semua komponen
+```
+
+### Performance concerns tidak addressed
+
+**Solusi:** Trigger performance review
+
+```
+@frontend-developer Load `frontend-patterns` and review for performance
+```
+
+---
+
+## Advanced Usage
+
+### Custom Workflow
+
+Anda bisa create custom workflow file:
+
+**.opencode/workflows/create-component.md**
+
+```markdown
+# Component Creation Workflow
+
+1. Load skills: `building-components`, `web-design-guidelines`
+2. Create component file with TypeScript
+3. Add props interface
+4. Implement render logic
+5. Add accessibility attributes
+6. Create usage example
+7. Add to exports
+```
+
+Kemudian:
+
+```
+@frontend-developer Follow workflow di .opencode/workflows/create-component.md untuk buat SearchBar component
+```
+
+### Team Collaboration
+
+Share agent config dengan team (tanpa auto-commit oleh agent):
+
+```bash
+# Commit hanya saat Anda memang meminta commit
+git add .opencode/agents/frontend-developer.md
+git commit -m "Add frontend developer agent config"
+git push
+
+# Team members bisa langsung pakai
+@frontend-developer ...
+```
+
+### Integration dengan CI/CD
+
+Agent bisa review PR sebelum merge:
+
+```bash
+# .github/workflows/frontend-review.yml
+- name: Frontend Review
+  run: |
+    opencode "@frontend-developer Review changes in this PR for:
+    - Performance issues
+    - Accessibility compliance
+    - Code quality
+    - Best practices"
+```
+
+---
+
+## Keyboard Shortcuts
+
+Untuk primary agent mode:
+
+- `Tab` - Switch between agents
+- `Ctrl+P` - List available actions
+- `/` - Run commands (e.g., `/undo`, `/redo`)
+- `@` - Mention agents/files
+
+---
+
+## Maintenance
+
+### Update Agent Skills
+
+Ketika ada skill baru:
+
+1. Check skill availability:
+
+```bash
+ls ~/.opencode/skills
+ls ~/.agents/skills
+```
+
+2. Update agent file untuk include skill baru di section "Contextual Skills"
+
+3. Test integration:
+
+```
+@frontend-developer Load skill `new-skill-name` dan explain kapan harus dipakai
+```
+
+### Version Control
+
+Track perubahan agent config:
+
+```bash
+# See changes
+git diff .opencode/agents/frontend-developer.md
+
+# Update
+git add .opencode/agents/frontend-developer.md
+git commit -m "Update frontend agent: add new skill integration"
+```
+
+---
+
+## Resources
+
+### Related Files
+
+- Agent definition: `.opencode/agents/frontend-developer.md`
+- Project guidelines: `CLAUDE.md`
+- Skills directory: `~/.opencode/skills/`, `~/.agents/skills/`
+
+### Documentation
+
+- OpenCode Agents: https://opencode.ai/docs/agents
+- OpenCode Skills: https://opencode.ai/docs/skills
+- OpenCode Config: https://opencode.ai/docs/config
+
+### Community
+
+- OpenCode Discord: https://opencode.ai/discord
+- GitHub Issues: https://github.com/anomalyco/opencode/issues
+
+---
+
+## Quick Reference Card
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ FRONTEND DEVELOPER AGENT - Quick Reference                  │
+├─────────────────────────────────────────────────────────────┤
+│                                                              │
+│ ACTIVATE:                                                    │
+│   @frontend-developer [your request]                        │
+│                                                              │
+│ COMMON TASKS:                                                │
+│   • Build component        → Specify props, behavior, style │
+│   • Optimize performance   → Mention specific bottleneck    │
+│   • Implement design       → Describe aesthetic direction   │
+│   • Refactor code          → Explain current issues         │
+│   • Review accessibility   → Point to specific files        │
+│                                                              │
+│ LOADED SKILLS:                                               │
+│   ✓ coding-standards       ✓ frontend-patterns              │
+│   ✓ frontend-design        ✓ web-design-guidelines          │
+│                                                              │
+│ CONTEXTUAL SKILLS:                                           │
+│   • nuxt-ui                • vercel-composition-patterns    │
+│   • building-components    • security-review                │
+│   • tdd-workflow                                            │
+│                                                              │
+│ QUALITY STANDARDS:                                           │
+│   ☑ TypeScript strict mode ☑ Accessibility (WCAG 2.1)       │
+│   ☑ Immutability           ☑ Performance optimized          │
+│   ☑ Error handling         ☑ Responsive design              │
+│                                                              │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+**Happy coding! 🚀**
+
+Jika ada pertanyaan atau butuh bantuan, mention `@frontend-developer` di OpenCode Anda.

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

@@ -0,0 +1,140 @@
+# Frontend Developer Agent
+
+Expert frontend developer agent for Nuxt.js + Nuxt UI projects with MCP integration.
+
+## 🎯 Agent
+
+**Frontend Developer** (`frontend-developer.md`) - Senior frontend developer specializing in:
+
+- Nuxt 4 & Vue 3 Composition API
+- Nuxt UI component library
+- TypeScript strict mode
+- Performance optimization
+- Accessibility (WCAG 2.1)
+- Modern CSS & animations
+
+## 📚 Documentation
+
+Complete documentation in `docs/` folder:
+
+| Document                                    | Description                      |
+| ------------------------------------------- | -------------------------------- |
+| [QUICK_START.md](./docs/QUICK_START.md)     | Get started in 5 minutes         |
+| [EXAMPLES.md](./docs/EXAMPLES.md)           | 50+ practical code examples      |
+| [API_PATTERNS.md](./docs/API_PATTERNS.md)   | useApi composable guide          |
+| [WORKFLOWS.md](./docs/WORKFLOWS.md)         | 8 detailed development workflows |
+| [CHEATSHEET.md](./docs/CHEATSHEET.md)       | Quick command reference          |
+| [MCP_GUIDE.md](./docs/MCP_GUIDE.md)         | MCP server integration           |
+| [TESTING_GUIDE.md](./docs/TESTING_GUIDE.md) | Testing & validation             |
+| [INDEX.md](./docs/INDEX.md)                 | Complete navigation              |
+
+## 🚀 Quick Start
+
+1. **Activate agent:**
+
+   ```
+   @frontend Hello! What can you help me with?
+   ```
+
+2. **Create component:**
+
+   ```
+   @frontend Create Button component dengan props label dan variant
+   ```
+
+3. **Read documentation:**
+   - Start: `docs/QUICK_START.md`
+   - Examples: `docs/EXAMPLES.md`
+
+## 🔧 Configuration
+
+Agent configured in `../.opencode/config.json`:
+
+- **Model:** Claude Sonnet 4
+- **Temperature:** 0.4
+- **MCP Servers:** Nuxt, Nuxt UI, Playwright, Figma
+- **Skills:** 10+ professional skills integrated
+
+## 📁 Structure
+
+```
+.opencode/agents/
+├── README.md                  # This file
+├── frontend-developer.md      # Agent definition (main file)
+└── docs/                      # All documentation
+    ├── INDEX.md               # Navigation hub
+    ├── QUICK_START.md         # Getting started
+    ├── EXAMPLES.md            # Code examples
+    ├── API_PATTERNS.md        # API patterns
+    └── ... (8+ more guides)
+```
+
+**Why this structure?**
+
+- OpenCode shows ONLY `frontend-developer.md` in agent list
+- All documentation in `docs/` folder (clean agent switcher)
+- Easy to share/distribute as single package
+
+## ✨ Features
+
+- **MCP Integration:** Real-time Nuxt & Nuxt UI documentation
+- **Skills Integration:** 10+ professional coding skills
+- **Custom Patterns:** Project-specific patterns (e.g., useApi)
+- **Type Safety:** TypeScript strict mode enforced
+- **Accessibility:** WCAG 2.1 Level AA compliance
+- **Performance:** Lighthouse 90+ targets
+
+## 🎓 Usage Examples
+
+### Create Component
+
+```
+@frontend Create ProductCard component dengan:
+- Image with lazy loading
+- Price and discount badge
+- Add to cart button
+- Wishlist toggle
+Gunakan Nuxt UI components.
+```
+
+### API Integration
+
+```
+@frontend Implement user list page dengan:
+- useApi composable untuk fetch
+- Error handling dengan retry
+- Pagination
+- Search functionality
+```
+
+### Performance Optimization
+
+```
+@frontend Optimize /products page:
+- Current FCP: 3.5s
+- Target: < 1.5s
+- Lighthouse: 90+
+```
+
+## 📖 Learn More
+
+- **Quick Start:** `docs/QUICK_START.md` (5 minutes)
+- **Full Guide:** `docs/INDEX.md` (complete navigation)
+- **API Patterns:** `docs/API_PATTERNS.md` (useApi guide)
+- **Examples:** `docs/EXAMPLES.md` (50+ examples)
+
+## 🤝 Sharing
+
+To share this agent with others:
+
+1. Copy entire `agents/` folder
+2. Copy `../.opencode/config.json` (agent config section)
+3. Share documentation: Point to `docs/QUICK_START.md`
+
+Recipients will see only "Frontend Developer" in their agent list!
+
+---
+
+**Version:** 1.0.0  
+**Status:** Production Ready ✅  
+**Documentation:** 12 files | ~230 KB | 8,500+ lines

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

@@ -0,0 +1,65 @@
+# Frontend Developer Agent - Documentation
+
+Complete documentation untuk Frontend Developer Agent.
+
+## 📚 Documentation Files
+
+- **[README.md](./README.md)** - Complete user guide
+- **[QUICK_START.md](./QUICK_START.md)** - Get started in 5 minutes
+- **[EXAMPLES.md](./EXAMPLES.md)** - 50+ practical examples
+- **[API_PATTERNS.md](./API_PATTERNS.md)** - useApi composable guide
+- **[WORKFLOWS.md](./WORKFLOWS.md)** - 8 detailed workflows
+- **[CHEATSHEET.md](./CHEATSHEET.md)** - Quick reference
+- **[MCP_GUIDE.md](./MCP_GUIDE.md)** - MCP integration guide
+- **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** - Testing & validation
+- **[SUMMARY.md](./SUMMARY.md)** - Installation summary
+- **[COMPLETION_REPORT.md](./COMPLETION_REPORT.md)** - Project completion report
+
+## 🚀 Quick Navigation
+
+### For Beginners
+
+Start here → [QUICK_START.md](./QUICK_START.md)
+
+### For Examples
+
+See [EXAMPLES.md](./EXAMPLES.md) and [API_PATTERNS.md](./API_PATTERNS.md)
+
+### For Quick Reference
+
+Use [CHEATSHEET.md](./CHEATSHEET.md)
+
+### For Complete Guide
+
+Read [INDEX.md](./INDEX.md) for full navigation
+
+## 📖 About
+
+These documentation files support the **Frontend Developer Agent** (`../frontend-developer.md`).
+
+The agent is configured in `../../config.json` and uses these docs as reference material.
+
+## 🎯 Structure
+
+```
+.opencode/agents/
+├── frontend-developer.md    # Agent definition (ONLY agent file)
+└── docs/                    # All documentation files
+    ├── INDEX.md             # Navigation hub
+    ├── README.md            # This file
+    ├── QUICK_START.md       # Getting started
+    ├── EXAMPLES.md          # Practical examples
+    ├── API_PATTERNS.md      # useApi guide
+    ├── WORKFLOWS.md         # Detailed workflows
+    ├── CHEATSHEET.md        # Quick reference
+    ├── MCP_GUIDE.md         # MCP integration
+    ├── TESTING_GUIDE.md     # Testing suite
+    ├── SUMMARY.md           # Installation summary
+    └── COMPLETION_REPORT.md # Project completion
+```
+
+This structure ensures OpenCode only shows **"Frontend Developer"** in the agent list, keeping it clean and focused.
+
+---
+
+**Total Documentation:** 12 files | ~230 KB | 8,500+ lines