opencode-agent-kit 1.0.0

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

@@ -0,0 +1,474 @@
+# 📦 Frontend Developer Agent - Installation Summary
+
+## ✅ Instalasi Berhasil!
+
+Selamat! Anda telah berhasil menginstall **Frontend Developer Agent** yang lengkap dan profesional untuk OpenCode.
+
+---
+
+## 📊 Yang Telah Dibuat
+
+### Struktur Directory
+
+```
+.opencode/
+├── config.json                    # OpenCode agent configuration (779B)
+└── agents/
+    ├── frontend-developer.md      # Agent definition - 773 lines (18K)
+    ├── README.md                  # User guide - 505 lines (12K)
+    ├── WORKFLOWS.md               # 8 workflows - 758 lines (15K)
+    ├── CHEATSHEET.md             # Quick reference - 621 lines (11K)
+    ├── QUICK_START.md            # Quick start - 544 lines (11K)
+    └── SUMMARY.md                # This file
+```
+
+### Total Statistics
+
+- **Files Created**: 6 files
+- **Total Lines**: 3,201 lines of documentation & configuration
+- **Total Size**: ~67 KB of comprehensive guides
+- **Time Investment**: Production-ready agent system
+
+---
+
+## 🎯 File Overview
+
+### 1. **frontend-developer.md** (18KB - Core Agent)
+
+**Isi:**
+- Core identity & responsibilities
+- Technical skills integration (10+ skills)
+- Memory management system
+- Working methodology & protocols
+- Framework-specific expertise (Nuxt, Vue)
+- Design & aesthetics philosophy
+- Accessibility commitment (WCAG 2.1)
+- Performance optimization strategies
+- Quality checklist
+
+**Kapan Baca:** 
+- Untuk memahami bagaimana agent bekerja internally
+- Saat ingin customize agent behavior
+- Reference untuk advanced usage
+
+---
+
+### 2. **README.md** (12KB - Complete Guide)
+
+**Isi:**
+- Cara menggunakan agent (2 methods)
+- 10+ skills integration explanation
+- 5 detailed usage examples
+- Tips & best practices
+- Troubleshooting guide
+- Memory management
+- Advanced usage patterns
+- Team collaboration guide
+
+**Kapan Baca:**
+- **FIRST TIME** - Baca ini terlebih dahulu!
+- Untuk memahami full capabilities
+- Saat butuh troubleshooting
+- Reference lengkap untuk daily use
+
+---
+
+### 3. **WORKFLOWS.md** (15KB - 8 Workflows)
+
+**Isi:**
+8 complete workflows dengan step-by-step:
+1. ✅ Membuat Component Library
+2. ✅ Performance Optimization
+3. ✅ Implementasi Design Figma
+4. ✅ Form dengan Validation
+5. ✅ Testing Integration
+6. ✅ Dark Mode Implementation
+7. ✅ Progressive Enhancement
+8. ✅ Analytics Integration
+
+**Kapan Baca:**
+- Saat mulai task baru yang complex
+- Butuh guidance untuk specific scenario
+- Ingin learn best practices workflows
+- Template untuk common tasks
+
+---
+
+### 4. **CHEATSHEET.md** (11KB - Quick Reference)
+
+**Isi:**
+- Quick commands & patterns
+- Component creation templates
+- Styling & design shortcuts
+- Performance quick wins
+- Testing commands
+- Accessibility audit steps
+- Debugging helpers
+- Emergency commands
+- Pro tips
+
+**Kapan Baca:**
+- **KEEP OPEN** saat coding!
+- Quick lookup untuk commands
+- Refresh memory on patterns
+- Emergency reference
+
+---
+
+### 5. **QUICK_START.md** (11KB - Getting Started)
+
+**Isi:**
+- 3-step quick start
+- 5 example use cases
+- Skills reference
+- Configuration guide
+- Best practices
+- Common issues & solutions
+- Quality checklist
+- Learning path
+- Next steps
+
+**Kapan Baca:**
+- **START HERE** jika baru pertama kali
+- Quick onboarding guide
+- Share dengan new team members
+- When you need a refresher
+
+---
+
+### 6. **config.json** (779B - Configuration)
+
+**Isi:**
+```json
+{
+  "agent": {
+    "frontend": {
+      "description": "Expert frontend developer",
+      "mode": "subagent",
+      "model": "claude-sonnet-4",
+      "temperature": 0.4,
+      "permissions": { ... }
+    }
+  }
+}
+```
+
+**Customize:**
+- Change `mode` to `"primary"` untuk default agent
+- Adjust `temperature` untuk creativity level
+- Modify `permissions` untuk control access
+
+---
+
+## 🚀 Quick Start (3 Steps)
+
+### 1️⃣ Test Agent
+
+```bash
+@frontend-developer Hello! Analyze project structure ini.
+```
+
+### 2️⃣ Try Example
+
+```bash
+@frontend-developer Buat Button component dengan:
+- 5 variants (primary, secondary, success, error, ghost)
+- 3 sizes (sm, md, lg)
+- Loading state & icons
+- Accessible (ARIA + keyboard)
+- File: app/components/ui/Button.vue
+```
+
+### 3️⃣ Read Documentation
+
+- **First:** QUICK_START.md
+- **Next:** README.md
+- **Bookmark:** CHEATSHEET.md
+
+---
+
+## 💡 Key Features
+
+### ✨ Skills Integration
+
+Agent terintegrasi dengan **10+ professional skills**:
+
+**Core Skills (Auto-loaded):**
+- ✅ coding-standards
+- ✅ frontend-patterns
+- ✅ frontend-design
+- ✅ web-design-guidelines
+
+**Contextual Skills (On-demand):**
+- ✅ nuxt-ui
+- ✅ vercel-composition-patterns
+- ✅ building-components
+- ✅ security-review
+- ✅ tdd-workflow
+
+### 🧠 Memory Management
+
+Agent menggunakan **progressive context building**:
+- Tracks session context
+- Remembers user preferences
+- Maintains project patterns
+- Builds deep understanding over time
+- Smart context compaction
+
+### 🎯 Quality Standards
+
+Agent ensures:
+- ✅ TypeScript strict mode (no `any`)
+- ✅ Immutability (spread operators)
+- ✅ Accessibility (WCAG 2.1 AA)
+- ✅ Performance optimization
+- ✅ Error handling
+- ✅ Responsive design
+- ✅ SSR compatibility (Nuxt)
+- ✅ Clean, maintainable code
+
+### 🎨 Framework Expertise
+
+Supports:
+- **Nuxt 4** (primary - current project)
+- **Vue 3** Composition API
+- TypeScript strict mode
+- Modern CSS & Tailwind
+
+---
+
+## 📚 Recommended Learning Path
+
+### Day 1: Getting Started
+1. ✅ Read QUICK_START.md (this takes 10 minutes)
+2. ✅ Test agent dengan simple request
+3. ✅ Try 2-3 examples dari QUICK_START
+
+### Day 2: Deep Dive
+1. ✅ Read README.md completely
+2. ✅ Try workflow dari WORKFLOWS.md
+3. ✅ Bookmark CHEATSHEET.md
+
+### Week 1: Integration
+1. ✅ Use agent untuk daily tasks
+2. ✅ Explore different workflows
+3. ✅ Customize agent untuk project needs
+
+### Week 2: Mastery
+1. ✅ Read frontend-developer.md untuk understand internals
+2. ✅ Create custom workflows
+3. ✅ Share dengan team
+
+---
+
+## 🎓 Example Use Cases
+
+### 1. Build Component
+```bash
+@frontend-developer Buat MarketCard component untuk display market data
+```
+
+### 2. Optimize Performance
+```bash
+@frontend-developer Dashboard lambat dengan 500+ items, optimize please
+```
+
+### 3. Implement Design
+```bash
+@frontend-developer Implement hero section dengan aesthetic futuristic
+[attach design screenshot]
+```
+
+### 4. Add Accessibility
+```bash
+@frontend-developer Audit Modal.vue untuk accessibility issues
+```
+
+### 5. Review Code
+```bash
+@frontend-developer Review CreateMarketForm.vue untuk best practices
+```
+
+---
+
+## ⚙️ Customization Options
+
+### Change Agent Mode
+
+Edit `.opencode/config.json`:
+
+```json
+{
+  "agent": {
+    "frontend": {
+      "mode": "primary"  // Change to primary agent
+    }
+  }
+}
+```
+
+### Adjust Temperature
+
+```json
+{
+  "agent": {
+    "frontend": {
+      "temperature": 0.2  // More focused (0.0-0.5)
+      // or
+      "temperature": 0.7  // More creative (0.6-1.0)
+    }
+  }
+}
+```
+
+### Modify Permissions
+
+```json
+{
+  "agent": {
+    "frontend": {
+      "permission": {
+        "edit": "ask",        // Ask before editing
+        "bash": {
+          "*": "deny",        // Deny all bash
+          "npm *": "allow"    // Allow npm only
+        }
+      }
+    }
+  }
+}
+```
+
+---
+
+## 🔧 Maintenance
+
+### Update Agent
+
+1. Edit `.opencode/agents/frontend-developer.md`
+2. Modify sections as needed
+3. Save file
+4. Changes active on next session
+
+### Version Control
+
+```bash
+# Track changes
+git add .opencode/
+git commit -m "feat: add frontend developer agent"
+git push
+
+# Team members can now use the same agent!
+```
+
+### Share with Team
+
+```bash
+# All files are in version control
+# Team members just need to:
+git pull
+opencode
+@frontend-developer ...
+```
+
+---
+
+## 🆘 Get Help
+
+### Documentation
+- **Quick Start:** QUICK_START.md
+- **Full Guide:** README.md
+- **Workflows:** WORKFLOWS.md
+- **Reference:** CHEATSHEET.md
+- **Internals:** frontend-developer.md
+
+### Ask Agent
+```bash
+@frontend-developer How do I [question]?
+@frontend-developer Explain [concept]
+@frontend-developer Help me with [task]
+```
+
+### Community
+- OpenCode Discord: https://opencode.ai/discord
+- OpenCode Docs: https://opencode.ai/docs
+- GitHub: https://github.com/anomalyco/opencode
+
+---
+
+## ✅ Verification Checklist
+
+Pastikan semuanya berfungsi:
+
+- [ ] Agent file exists: `.opencode/agents/frontend-developer.md`
+- [ ] Config exists: `.opencode/config.json`
+- [ ] Can invoke agent: `@frontend-developer test`
+- [ ] Skills accessible: `~/.opencode/skills/`
+- [ ] Documentation readable
+- [ ] Examples work
+
+Test command:
+```bash
+@frontend-developer Analyze this project dan suggest next steps
+```
+
+---
+
+## 🎉 You're All Set!
+
+Anda sekarang memiliki:
+
+✅ **Fully configured** Frontend Developer Agent  
+✅ **10+ integrated skills** untuk berbagai tasks  
+✅ **3,201 lines** of professional documentation  
+✅ **8 detailed workflows** untuk common scenarios  
+✅ **Comprehensive guides** untuk quick reference  
+✅ **Memory management** untuk smart assistance  
+✅ **Quality standards** enforcement  
+✅ **Framework expertise** (Nuxt, Vue)  
+
+---
+
+## 🚀 Next Actions
+
+### Immediate (Now)
+```bash
+@frontend-developer Hello! Let's start building.
+```
+
+### Today
+- [ ] Read QUICK_START.md
+- [ ] Try 2-3 example commands
+- [ ] Bookmark CHEATSHEET.md
+
+### This Week
+- [ ] Read README.md
+- [ ] Try a workflow dari WORKFLOWS.md
+- [ ] Integrate ke daily workflow
+- [ ] Share dengan team
+
+---
+
+## 💪 Happy Coding!
+
+Your Frontend Developer Agent is ready to help you build:
+
+✨ **Beautiful** components  
+⚡ **Performant** applications  
+🎨 **Stunning** designs  
+♿ **Accessible** interfaces  
+🔒 **Secure** code  
+🧪 **Well-tested** features  
+
+**Start building amazing things!** 🚀
+
+```bash
+@frontend-developer Let's create something extraordinary! ✨
+```
+
+---
+
+**Frontend Developer Agent v1.0.0**  
+*Created with ❤️ for exceptional development experience*
+
+*April 2026*

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

@@ -0,0 +1,54 @@
+# Team Operating Guide (Frontend Agent)
+
+Panduan ringkas agar penggunaan agent konsisten di level tim.
+
+## Default Working Agreement
+
+- Gunakan mode `fast` untuk task tiny, `balanced` untuk task normal
+- Minta `thorough` hanya untuk task kompleks/berisiko
+- Jangan minta commit/PR jika masih fase eksplorasi
+
+## Prompting Contract untuk Developer
+
+Sertakan 4 hal ini saat memberi task:
+
+1. Tujuan perubahan
+2. File target (kalau sudah tahu)
+3. Constraint (mis. jangan ubah API, jangan ubah style global)
+4. Level verifikasi yang diinginkan (`tiny/small/medium+`)
+
+Contoh:
+
+```text
+Tambahkan UButton "Save" di app/components/profile/ProfileHeader.vue.
+Jangan ubah styling global. Task tiny. Fokus minimal diff.
+```
+
+## Output yang Wajib dari Agent
+
+Agent wajib memberikan:
+
+1. What changed
+2. Files touched
+3. Verification status
+4. Command manual jika belum fully verified
+
+## Team Guardrails
+
+- No commit / PR / push tanpa instruksi eksplisit
+- No file di luar scope untuk task tiny/small
+- No opportunistic refactor saat sprint task
+- Selalu ikuti konvensi repo (bukan preferensi agent)
+
+## Recommended Review Loop
+
+1. Developer memberi task dengan konteks jelas
+2. Agent implement + laporan output contract
+3. Reviewer cek diff + verification status
+4. Jika lolos, baru minta commit/PR
+
+## Go/No-Go Cadence
+
+- Lakukan review operasional mingguan terhadap 5-10 task terakhir
+- Setelah perubahan prompt signifikan, lakukan smoke test lintas tiny/small/medium task
+- Catat regresi kualitas berdasarkan: scope discipline, verification clarity, dan output consistency