opencode-agent-kit 1.0.0

package/template/.opencode/agent-docs/frontend/react/API_PATTERNS.md

@@ -0,0 +1,187 @@
+# React Frontend Developer Agent — Data Fetching Patterns
+
+Panduan data fetching patterns untuk React/Next.js project.
+
+## Server Components (Next.js App Router)
+
+### Direct Fetch (Default)
+
+```typescript
+async function ProductList() {
+  const res = await fetch("https://api.example.com/products", {
+    next: { revalidate: 60 },
+  });
+  const products = await res.json();
+
+  return (
+    <ul>
+      {products.map((p) => (
+        <li key={p.id}>{p.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Parallel Fetching
+
+```typescript
+async function DashboardPage() {
+  const [users, products, stats] = await Promise.all([
+    fetch("https://api.example.com/users").then((r) => r.json()),
+    fetch("https://api.example.com/products").then((r) => r.json()),
+    fetch("https://api.example.com/stats").then((r) => r.json()),
+  ]);
+
+  return (
+    <div>
+      <UserList users={users} />
+      <ProductList products={products} />
+      <StatsDisplay stats={stats} />
+    </div>
+  );
+}
+```
+
+## TanStack Query (Client Components)
+
+### Setup
+
+```bash
+npm install @tanstack/react-query
+```
+
+```typescript
+// app/providers.tsx
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}
+```
+
+### Query
+
+```typescript
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+function Profile() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["profile"],
+    queryFn: () => fetch("/api/profile").then((r) => r.json()),
+  });
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+  return <div>{data.name}</div>;
+}
+```
+
+### Mutation
+
+```typescript
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+function CreateProduct() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (newProduct: { name: string; price: number }) =>
+      fetch("/api/products", {
+        method: "POST",
+        body: JSON.stringify(newProduct),
+        headers: { "Content-Type": "application/json" },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["products"] });
+    },
+  });
+
+  return (
+    <button onClick={() => mutation.mutate({ name: "Foo", price: 100 })}>
+      {mutation.isPending ? "Creating..." : "Create Product"}
+    </button>
+  );
+}
+```
+
+## Server Actions (Next.js)
+
+```typescript
+// app/products/actions.ts
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function createProduct(formData: FormData) {
+  const name = formData.get("name");
+  const price = formData.get("price");
+
+  // Validate
+  if (!name || !price) {
+    return { error: "Name and price required" };
+  }
+
+  // Database operation
+  await prisma.product.create({
+    data: { name: String(name), price: Number(price) },
+  });
+
+  revalidatePath("/products");
+}
+```
+
+## Custom Fetch Composable (React)
+
+```typescript
+// lib/api.ts
+interface ApiOptions<T> {
+  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  body?: T;
+  params?: Record<string, string>;
+}
+
+export async function api<T>(
+  endpoint: string,
+  options: ApiOptions<unknown> = {}
+): Promise<T> {
+  const { method = "GET", body, params } = options;
+
+  let url = `/api${endpoint}`;
+  if (params) {
+    const searchParams = new URLSearchParams(params);
+    url += `?${searchParams}`;
+  }
+
+  const res = await fetch(url, {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: body ? JSON.stringify(body) : undefined,
+    credentials: "include",
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ message: res.statusText }));
+    throw new Error(error.message || "API Error");
+  }
+
+  return res.json();
+}
+
+// Usage:
+// const products = await api<Product[]>("/products");
+// const user = await api<User>(`/users/${id}`);

package/template/.opencode/agent-docs/frontend/react/CHEATSHEET.md

@@ -0,0 +1,87 @@
+# React Frontend Developer Agent — Cheatsheet
+
+## Activation
+
+```
+@frontend-react [request]
+@frontend-react Load skill `shadcn-ui` untuk build form components
+@frontend-react Load skills: `building-components`, `security-review`, `tdd-workflow`
+@frontend-react What skills are currently loaded?
+```
+
+## Component Development
+
+```
+@frontend-react Buat component Button dengan:
+@frontend-react Buat DataTable component:
+@frontend-react Buat LoginForm:
+@frontend-react Implement design dari [screenshot]:
+@frontend-react Add dark mode support:
+@frontend-react Make [component] responsive:
+```
+
+## Performance
+
+```
+@frontend-react Load `vercel-react-best-practices` dan audit:
+@frontend-react Add virtualization ke List untuk 500+ items
+@frontend-react Lazy load semua components di bawah fold
+@frontend-react Code split routes dan heavy components
+```
+
+## State Management
+
+```
+@frontend-react Create Zustand store untuk products:
+@frontend-react Create TanStack Query hooks:
+@frontend-react Setup data fetching untuk users page:
+@frontend-react Setup data fetching untuk external API:
+```
+
+## Forms & Validation
+
+```
+@frontend-react Create Zod schema untuk form:
+@frontend-react Implement form dengan React Hook Form:
+@frontend-react Handle form submission dan validation:
+```
+
+## Design & Animation
+
+```
+@frontend-react Add micro-interactions dengan Framer Motion:
+@frontend-react Add page transitions:
+@frontend-react Create ErrorBoundary component:
+```
+
+## Code Review
+
+```
+@frontend-react Review components/ProductCard.tsx:
+@frontend-react Review all changed files sebelum commit:
+@frontend-react Audit accessibility:
+```
+
+## Debugging & Profiling
+
+```
+@frontend-react Debug ProductCard component:
+@frontend-react Profile performance di dashboard page:
+@frontend-react What's the current session context?
+@frontend-react What's the best practice untuk [specific task]?
+```
+
+## Skills Available
+
+| Skill | Description |
+|-------|-------------|
+| `coding-standards` | Universal coding standards |
+| `frontend-patterns` | React/Next.js patterns |
+| `frontend-design` | Design implementation |
+| `web-design-guidelines` | UI/UX compliance |
+| `shadcn-ui` | shadcn/ui components |
+| `vercel-react-best-practices` | React performance |
+| `vercel-composition-patterns` | Component composition |
+| `building-components` | Component library creation |
+| `security-review` | Auth/user input security |
+| `tdd-workflow` | Test-driven development |

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

@@ -0,0 +1,45 @@
+# React Frontend Developer Agent — Dokumentasi Index
+
+Navigasi lengkap untuk semua dokumentasi React Frontend Developer Agent (`@frontend-react`).
+
+## Quick Links
+
+| Kebutuhan | Dokumen |
+|-----------|---------|
+| Baru mulai? | [QUICK_START.md](./QUICK_START.md) |
+| Panduan lengkap? | [README.md](./README.md) |
+| Cari command cepat? | [CHEATSHEET.md](./CHEATSHEET.md) |
+| Data fetching patterns? | [API_PATTERNS.md](./API_PATTERNS.md) |
+
+## Documentation Structure
+
+```
+.opencode/
+├── agents/
+│   └── react-frontend-developer.md  # Agent definition
+└── agent-docs/frontend/react/       # Supporting documentation (this directory)
+    ├── INDEX.md                     # This file — navigation hub
+    ├── README.md                    # Complete user guide
+    ├── QUICK_START.md               # Get started in 5 minutes
+    ├── CHEATSHEET.md                # Quick reference
+    └── API_PATTERNS.md              # Data fetching patterns
+```
+
+## For New Users
+
+1. Read [QUICK_START.md](./QUICK_START.md) — 5 menit memahami basics
+2. Reference [CHEATSHEET.md](./CHEATSHEET.md) — untuk quick commands
+3. Baca [README.md](./README.md) — capabilities lengkap
+
+## For Experienced Users
+
+- [CHEATSHEET.md](./CHEATSHEET.md) — Commands, skills, shortcuts
+- [API_PATTERNS.md](./API_PATTERNS.md) — Data fetching patterns
+- [README.md](./README.md) — Comprehensive capabilities
+
+## Agent Reference
+
+| Mention | File | Stack |
+|---------|------|-------|
+| `@frontend-react` | `react-frontend-developer.md` | React 19, Next.js 15, shadcn/ui, Tailwind CSS |
+| `@frontend-nuxt` | `nuxt-frontend-developer.md` | Nuxt 4, Vue 3, Nuxt UI, Tailwind CSS |

package/template/.opencode/agent-docs/frontend/react/QUICK_START.md

@@ -0,0 +1,43 @@
+# React Frontend Developer Agent — Quick Start
+
+Panduan cepat untuk mulai menggunakan React Frontend Developer Agent (`@frontend-react`).
+
+## Aktivasi Agent
+
+Di OpenCode, ketik:
+
+```
+@frontend-react Hello! Tolong analyze project structure ini.
+```
+
+## Agent Akan Load Skills
+
+Agent otomatis akan load skills yang dibutuhkan:
+- `coding-standards`
+- `frontend-patterns`
+- `frontend-design`
+- `web-design-guidelines`
+
+## Mulai Development!
+
+```
+@frontend-react Buat component Button dengan:
+- 5 variants (primary, secondary, success, error, ghost)
+- 3 sizes (sm, md, lg)
+- Loading state
+- Icon support
+- Accessible (ARIA + keyboard)
+- shadcn/ui style
+```
+
+Agent akan:
+- Membuat component dengan TypeScript strict
+- Implement accessibility standards
+- Follow React 19 / Next.js 15 best practices
+- Include usage examples
+
+## Next Steps
+
+- [CHEATSHEET.md](./CHEATSHEET.md) — Quick commands
+- [API_PATTERNS.md](./API_PATTERNS.md) — Data fetching patterns
+- [README.md](./README.md) — Full capabilities

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

@@ -0,0 +1,159 @@
+# React Frontend Developer Agent — Panduan Lengkap
+
+Dokumentasi lengkap untuk React Frontend Developer Agent (`@frontend-react`).
+
+## Daftar Isi
+
+- [Tentang Agent](#tentang-agent)
+- [Cara Aktivasi](#cara-aktivasi)
+- [Stack yang Didukung](#stack-yang-didukung)
+- [Skills](#skills)
+- [Contoh Penggunaan](#contoh-penggunaan)
+- [Tips & Best Practices](#tips--best-practices)
+- [Referensi Lanjutan](#referensi-lanjutan)
+
+## Tentang Agent
+
+React Frontend Developer Agent adalah subagent spesialis untuk pengembangan frontend menggunakan **React.js / Next.js / Vite**. Agent ini dipanggil oleh IT Leader (`leader`) ketika project membutuhkan frontend berbasis React.
+
+**Stack utama:**
+- React 19 + TypeScript strict
+- Next.js 15 (App Router) — Server Components, Server Actions, Route Handlers
+- Vite + React plugin
+- Tailwind CSS v4
+- shadcn/ui component library
+- TanStack Query (data fetching)
+- Zustand (state management)
+- React Hook Form + Zod (form validation)
+- Framer Motion (animations)
+
+## Cara Aktivasi
+
+### Via IT Leader (Recommended)
+
+IT Leader akan otomatis mendelegasikan task ke `@frontend-react` ketika project menggunakan React/Next.js.
+
+### Manual
+
+```
+@frontend-react [deskripsi task]
+```
+
+## Skills
+
+### Auto-loaded Skills
+
+Setiap session, agent akan load:
+1. `coding-standards` — Universal coding standards
+2. `frontend-patterns` — React/Next.js patterns
+3. `frontend-design` — Design implementation
+4. `web-design-guidelines` — UI/UX compliance
+
+### Contextual Skills (load sesuai kebutuhan)
+
+- `shadcn-ui` — shadcn/ui components
+- `vercel-react-best-practices` — React performance optimization
+- `vercel-composition-patterns` — Component composition patterns
+- `building-components` — Component library creation
+- `security-review` — Auth/user input security
+- `tdd-workflow` — Test-driven development
+
+## Contoh Penggunaan
+
+### 1. Build Component
+
+```
+@frontend-react Buat ProductCard component:
+- Props: product (name, price, image, rating)
+- Variants: default, loading, error
+- Responsive: mobile-first
+- Animasi: hover scale
+- Accessibility: ARIA labels
+```
+
+### 2. Setup Data Fetching
+
+```
+@frontend-react Setup TanStack Query untuk products page:
+- GET /api/products — list with pagination
+- GET /api/products/[id] — single product
+- POST /api/products — create
+- Handle loading, error, empty states
+```
+
+### 3. Implement Form
+
+```
+@frontend-react Buat CreateProduct form:
+- Fields: name, description, price, category
+- Validation: Zod schema
+- Submit: Server Action
+- States: idle, submitting, success, error
+```
+
+### 4. Server Component
+
+```
+@frontend-react Buat ProductList sebagai Server Component:
+- Fetch langsung dari database
+- Search params untuk filter
+- Streaming dengan Suspense
+- Revalidation periodik
+```
+
+### 5. Performance Optimization
+
+```
+@frontend-react Load `vercel-react-best-practices` dan audit:
+- Bundle size
+- Re-render patterns
+- Image optimization
+- Code splitting
+```
+
+## Tips & Best Practices
+
+### Server Components First
+
+Gunakan Server Components secara default. Tambah `'use client'` hanya ketika membutuhkan:
+- Browser APIs (localStorage, event handlers)
+- useState / useEffect
+- onClick / onChange
+- Custom hooks dengan browser APIs
+
+### Data Fetching
+
+- **Server Components**: `fetch()` langsung dengan `next.revalidate`
+- **Client Components**: TanStack Query untuk caching & refetch
+- **Mutations**: Server Actions (Next.js) atau TanStack Query mutations
+
+### State Management
+
+- **Server State**: Server Components + TanStack Query
+- **Client State**: Zustand untuk global state
+- **Form State**: React Hook Form
+- **URL State**: useSearchParams / useParams
+
+### Component Patterns
+
+- Gunakan shadcn/ui components sebagai base
+- Custom components via composition
+- Props interface dengan TypeScript strict
+- Gunakan React.memo hanya untuk expensive renders
+
+### Accessibility
+
+- Semantic HTML elements
+- ARIA labels untuk interactive elements
+- Keyboard navigation
+- Color contrast WCAG 2.1 AA
+- Focus management untuk modals
+
+## Referensi Lanjutan
+
+| Dokumen | Deskripsi |
+|---------|-----------|
+| [QUICK_START.md](./QUICK_START.md) | Mulai dalam 5 menit |
+| [CHEATSHEET.md](./CHEATSHEET.md) | Quick commands reference |
+| [API_PATTERNS.md](./API_PATTERNS.md) | Data fetching patterns |
+| [INDEX.md](./INDEX.md) | Full documentation index |

package/template/.opencode/agent-docs/mobile/android/README.md

@@ -0,0 +1,45 @@
+# Android Developer Agent — `@android`
+
+Android native development dengan Kotlin, Jetpack Compose, dan Material Design 3.
+
+## Quick Reference
+
+| Mention | Agent File | Stack |
+|---------|-----------|-------|
+| `@android` | `android-developer.md` | Kotlin, Jetpack Compose, XML, Material 3, Gradle KTS |
+
+## Commands
+
+```bash
+@android Buat screen login dengan Jetpack Compose + ViewModel
+@android Implementasi Room database untuk produk
+@android Setup Hilt DI module
+@android Migrasi XML layout ke Compose
+@android Implementasi Firebase Cloud Messaging
+@android Buat UI dengan Material Design 3 theme
+```
+
+## Core Stack
+
+- **Language**: Kotlin
+- **UI**: Jetpack Compose, XML layouts
+- **Architecture**: MVVM, Clean Architecture
+- **DI**: Hilt
+- **Database**: Room
+- **Networking**: Retrofit + OkHttp
+- **Navigation**: Navigation Compose
+- **Background**: WorkManager
+- **Build**: Gradle KTS, Version Catalog
+
+## Skills Available
+
+- `android-jetpack-compose` — Compose patterns
+- `edge-to-edge` — Edge-to-edge display
+- `navigation-3` — Jetpack Navigation
+- `firebase-basics` — Firebase services
+- `play-billing-library-version-upgrade` — Play Billing
+- `camera1-to-camerax` — Camera migration
+- `r8-analyzer` — R8/ProGuard optimization
+- `migrate-xml-views-to-jetpack-compose` — XML to Compose migration
+- `security-review` — Security best practices
+- `tdd-workflow` — Test-driven development

package/template/.opencode/agent-docs/mobile/flutter/README.md

@@ -0,0 +1,44 @@
+# Flutter Developer Agent — `@flutter`
+
+Cross-platform mobile development dengan Dart, Flutter SDK, dan Material Design 3.
+
+## Quick Reference
+
+| Mention | Agent File | Stack |
+|---------|-----------|-------|
+| `@flutter` | `flutter-developer.md` | Dart, Flutter SDK, Material 3, Bloc/Riverpod |
+
+## Commands
+
+```bash
+@flutter Buat screen product list dengan Bloc pattern
+@flutter Implementasi GoRouter navigation
+@flutter Setup Firebase Auth + Firestore
+@flutter Buat Repository pattern dengan Dio + Hive
+@flutter Implementasi dark mode dengan Material 3
+@flutter Buat unit test dan widget test
+```
+
+## Core Stack
+
+- **Language**: Dart
+- **UI**: Material Design 3, Cupertino widgets
+- **Architecture**: Clean Architecture
+- **State Management**: Bloc, Riverpod, Provider
+- **Navigation**: GoRouter
+- **Networking**: Dio, http package
+- **Local Storage**: Hive, Isar, Drift, flutter_secure_storage
+- **Firebase**: Auth, Firestore, Cloud Messaging
+- **Code Generation**: freezed, build_runner
+- **Testing**: flutter_test, bloc_test, mocktail, integration_test
+
+## Skills Available
+
+- `coding-standards` — Universal coding standards
+- `frontend-patterns` — Mobile UI patterns
+- `frontend-design` — Design implementation
+- `web-design-guidelines` — UI/UX compliance
+- `firebase-basics` — Firebase services
+- `building-components` — Reusable widget libraries
+- `security-review` — Security best practices
+- `tdd-workflow` — Test-driven development