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)
475 lines (362 loc) • 9.9 kB
Markdown
# 📦 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
- ✅ impeccable
- ✅ 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*