opencode-agent-kit 1.0.0

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

@@ -0,0 +1,956 @@
+# Frontend Developer Agent - Contoh Praktis
+
+Dokumen ini berisi contoh-contoh praktis penggunaan Frontend Developer Agent untuk berbagai skenario development.
+
+## Daftar Isi
+
+1. [Component Development](#1-component-development)
+2. [Nuxt UI Integration](#2-nuxt-ui-integration)
+3. [API Integration](#3-api-integration)
+4. [Form Handling](#4-form-handling)
+5. [State Management](#5-state-management)
+6. [Performance Optimization](#6-performance-optimization)
+7. [Accessibility Review](#7-accessibility-review)
+8. [Bug Fixing](#8-bug-fixing)
+
+---
+
+## 1. Component Development
+
+### Skenario: Membuat Product Card Component
+
+**Prompt:**
+
+```
+@frontend Saya butuh ProductCard component untuk e-commerce dengan fitur:
+- Gambar produk dengan lazy loading
+- Badge untuk discount
+- Rating stars
+- Add to cart button
+- Wishlist toggle
+- Support dark mode
+- Accessible (WCAG 2.1)
+
+Gunakan Nuxt UI components sebisa mungkin.
+```
+
+**Output yang Diharapkan:**
+
+- `app/components/product/ProductCard.vue` menggunakan `<UCard>`, `<UBadge>`, `<UButton>`
+- TypeScript interfaces untuk Product type
+- Composable `useProduct` untuk business logic
+- Accessible markup dengan ARIA labels
+- Responsive design dengan Tailwind
+- Unit tests dengan Vitest
+
+**Agent akan:**
+
+1. ✅ Check MCP Nuxt UI untuk available components
+2. ✅ Load skill `nuxt-ui` untuk component patterns
+3. ✅ Load skill `building-components` untuk best practices
+4. ✅ Load skill `web-design-guidelines` untuk accessibility
+5. ✅ Create component dengan TypeScript strict mode
+6. ✅ Add comprehensive tests
+
+---
+
+## 2. Nuxt UI Integration
+
+### Skenario: Dashboard Layout dengan Sidebar
+
+**Prompt:**
+
+```
+@frontend Build dashboard layout dengan:
+- Collapsible sidebar navigation
+- Top header dengan user menu
+- Breadcrumb navigation
+- Main content area
+- Toast notifications
+- Command palette (Cmd+K)
+
+Gunakan Nuxt UI App components.
+```
+
+**Output yang Diharapkan:**
+
+- Layout menggunakan `<UDashboard>` components
+- `<UVerticalNavigation>` untuk sidebar
+- `<UCommandPalette>` untuk search
+- `<UToast>` untuk notifications
+- Dark mode toggle
+- Responsive mobile menu
+
+**Agent akan:**
+
+1. ✅ Query Nuxt UI MCP untuk Dashboard components
+2. ✅ Check documentation untuk `<UDashboard>` API
+3. ✅ Implement dengan Nuxt 4 app/ directory structure
+4. ✅ Add keyboard shortcuts
+5. ✅ Test responsive behavior
+
+---
+
+## 3. API Integration
+
+### Skenario: Data Fetching dengan Error Handling
+
+**Prompt:**
+
+```
+@frontend Implement user list page dengan:
+- Fetch dari /api/users
+- Loading skeleton
+- Error state dengan retry
+- Pagination
+- Search dan filter
+- Optimistic updates untuk delete
+
+Gunakan useApi composable (app/composables/useApi.ts)
+```
+
+**Output yang Diharapkan:**
+
+- `app/pages/users/index.vue` dengan `useApi`
+- Error handling dengan `<UAlert>`
+- Loading states dengan `<USkeleton>`
+- Pagination dengan `<UPagination>`
+- Search dengan debounce
+
+**Agent akan:**
+
+1. ✅ Load skill `frontend-patterns` untuk data fetching
+2. ✅ Use custom `useApi` composable (recommended pattern)
+3. ✅ Implement error boundaries
+4. ✅ Add loading states
+5. ✅ Handle authentication automatically
+
+**Code Example (Recommended - Using useApi):**
+
+```vue
+<script setup lang="ts">
+interface User {
+  id: string
+  name: string
+  email: string
+  role: 'admin' | 'user'
+}
+
+const page = ref(1)
+const search = ref('')
+
+// ✅ BEST: Use useApi for automatic auth + error handling
+const {
+  data: response,
+  pending,
+  error,
+  refresh,
+} = await useApi<User[]>('/users', {
+  query: { page, search },
+  watch: [page, search],
+})
+
+// Access users from response.data
+const users = computed(() => response.value?.data || [])
+
+const handleDelete = async (id: string) => {
+  // Optimistic update
+  const originalUsers = users.value
+  users.value = users.value.filter((u) => u.id !== id)
+
+  // Use useApi for delete
+  const { error: deleteError } = await useApi(`/users/${id}`, {
+    method: 'DELETE',
+  })
+
+  if (deleteError.value) {
+    // Rollback on error
+    users.value = originalUsers
+    useToast().add({
+      title: 'Error',
+      description: deleteError.value.message,
+      color: 'red',
+    })
+  } else {
+    useToast().add({
+      title: 'Success',
+      description: 'User deleted successfully',
+    })
+  }
+}
+</script>
+
+<template>
+  <UContainer>
+    <div class="space-y-4">
+      <UInput v-model="search" placeholder="Search users..." />
+
+      <div v-if="pending">
+        <USkeleton v-for="i in 5" :key="i" class="h-20" />
+      </div>
+
+      <UAlert v-else-if="error" color="red" :description="error.message">
+        <template #actions>
+          <UButton @click="refresh">Retry</UButton>
+        </template>
+      </UAlert>
+
+      <div v-else>
+        <UCard v-for="user in users" :key="user.id">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <div>
+                <h3 class="font-semibold">{{ user.name }}</h3>
+                <p class="text-sm text-gray-500">{{ user.email }}</p>
+              </div>
+              <UBadge :color="user.role === 'admin' ? 'blue' : 'gray'">
+                {{ user.role }}
+              </UBadge>
+            </div>
+          </template>
+
+          <template #footer>
+            <UButton color="red" variant="ghost" @click="handleDelete(user.id)"> Delete </UButton>
+          </template>
+        </UCard>
+      </div>
+
+      <UPagination v-model="page" :total="100" />
+    </div>
+  </UContainer>
+</template>
+```
+
+**Alternative (Using native useFetch):**
+
+```vue
+<script setup lang="ts">
+// ⚠️ Only use this if you need custom caching or external API
+const {
+  data: users,
+  pending,
+  error,
+  refresh,
+} = await useFetch<User[]>('/api/users', {
+  query: { page, search },
+  watch: [page, search],
+})
+</script>
+```
+
+**Key Differences - useApi vs useFetch:**
+
+| Feature         | useApi                   | useFetch             |
+| --------------- | ------------------------ | -------------------- |
+| Authentication  | ✅ Automatic             | ⚠️ Manual            |
+| Error message   | ✅ `error.value.message` | ❌ Need to extract   |
+| 401 Redirect    | ✅ Automatic             | ❌ Manual            |
+| SSR/CSR Smart   | ✅ Yes                   | ✅ Yes               |
+| Type Safety     | ✅ Generic `<T>`         | ✅ Generic `<T>`     |
+| POST/PUT/DELETE | ✅ Auto-$fetch           | ⚠️ Need useAsyncData |
+
+**IMPORTANT: Always prefer `useApi` for this project's API calls.**
+@frontend Implement user list page dengan:
+
+- Fetch dari /api/users
+- Loading skeleton
+- Error state dengan retry
+- Pagination
+- Search dan filter
+- Optimistic updates untuk delete
+
+````
+
+**Output yang Diharapkan:**
+
+- `app/pages/users/index.vue` dengan `useFetch`
+- Error handling dengan `<UAlert>`
+- Loading states dengan `<USkeleton>`
+- Pagination dengan `<UPagination>`
+- Search dengan debounce
+
+**Agent akan:**
+
+1. ✅ Load skill `frontend-patterns` untuk data fetching
+2. ✅ Use Nuxt 4 `useFetch` dengan proper typing
+3. ✅ Implement error boundaries
+4. ✅ Add loading states
+5. ✅ Create reusable composable
+
+**Code Example:**
+
+```vue
+<script setup lang="ts">
+interface User {
+  id: string
+  name: string
+  email: string
+  role: 'admin' | 'user'
+}
+
+const page = ref(1)
+const search = ref('')
+
+const {
+  data: users,
+  pending,
+  error,
+  refresh,
+} = await useFetch<User[]>('/api/users', {
+  query: { page, search },
+  watch: [page, search],
+})
+
+const handleDelete = async (id: string) => {
+  // Optimistic update
+  users.value = users.value?.filter((u) => u.id !== id)
+
+  try {
+    await $fetch(`/api/users/${id}`, { method: 'DELETE' })
+  } catch (err) {
+    // Rollback on error
+    await refresh()
+  }
+}
+</script>
+
+<template>
+  <UContainer>
+    <div class="space-y-4">
+      <UInput v-model="search" placeholder="Search users..." />
+
+      <div v-if="pending">
+        <USkeleton v-for="i in 5" :key="i" class="h-20" />
+      </div>
+
+      <UAlert v-else-if="error" color="red" :description="error.message">
+        <template #actions>
+          <UButton @click="refresh">Retry</UButton>
+        </template>
+      </UAlert>
+
+      <div v-else>
+        <UCard v-for="user in users" :key="user.id">
+          <!-- User content -->
+        </UCard>
+      </div>
+
+      <UPagination v-model="page" :total="100" />
+    </div>
+  </UContainer>
+</template>
+````
+
+---
+
+## 4. Form Handling
+
+### Skenario: Complex Form dengan Validation
+
+**Prompt:**
+
+```
+@frontend Create user profile form dengan:
+- Multiple steps (Personal, Contact, Preferences)
+- Real-time validation
+- File upload untuk avatar
+- Auto-save draft
+- Success/error toast
+- Accessible form labels
+```
+
+**Output yang Diharapkan:**
+
+- Multi-step form dengan `<UForm>`
+- Validation dengan Zod schema
+- `<UFormGroup>` untuk field groups
+- File upload dengan preview
+- Auto-save dengan debounce
+
+**Agent akan:**
+
+1. ✅ Check Nuxt UI Form components via MCP
+2. ✅ Load skill `frontend-patterns` untuk form handling
+3. ✅ Implement validation dengan Zod
+4. ✅ Add accessibility features
+5. ✅ Create composable untuk form state
+
+**Code Example:**
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod'
+
+const schema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email address'),
+  avatar: z.instanceof(File).optional(),
+})
+
+type FormData = z.infer<typeof schema>
+
+const state = reactive<FormData>({
+  name: '',
+  email: '',
+  avatar: undefined,
+})
+
+const { pending, error, execute } = useFetch('/api/profile', {
+  method: 'POST',
+  body: state,
+  immediate: false,
+})
+
+const onSubmit = async () => {
+  await execute()
+  if (!error.value) {
+    useToast().add({ title: 'Profile updated!' })
+  }
+}
+
+// Auto-save draft
+watchDebounced(
+  state,
+  () => {
+    localStorage.setItem('profile-draft', JSON.stringify(state))
+  },
+  { debounce: 1000 }
+)
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" @submit="onSubmit">
+    <UFormGroup label="Name" name="name" required>
+      <UInput v-model="state.name" />
+    </UFormGroup>
+
+    <UFormGroup label="Email" name="email" required>
+      <UInput v-model="state.email" type="email" />
+    </UFormGroup>
+
+    <UFormGroup label="Avatar" name="avatar">
+      <UInput type="file" accept="image/*" />
+    </UFormGroup>
+
+    <UButton type="submit" :loading="pending"> Save Profile </UButton>
+  </UForm>
+</template>
+```
+
+---
+
+## 5. State Management
+
+### Skenario: Shopping Cart dengan Pinia
+
+**Prompt:**
+
+```
+@frontend Implement shopping cart dengan:
+- Add/remove items
+- Update quantity
+- Calculate total
+- Persist to localStorage
+- Sync across tabs
+- Optimistic updates
+```
+
+**Output yang Diharapkan:**
+
+- `app/stores/cart.ts` Pinia store
+- Composable `useCart` untuk easy access
+- LocalStorage persistence
+- BroadcastChannel untuk sync
+- Type-safe actions
+
+**Agent akan:**
+
+1. ✅ Load skill `frontend-patterns` untuk state management
+2. ✅ Create Pinia store dengan TypeScript
+3. ✅ Implement persistence plugin
+4. ✅ Add optimistic updates
+5. ✅ Create comprehensive tests
+
+**Code Example:**
+
+```typescript
+// app/stores/cart.ts
+import { defineStore } from 'pinia'
+
+interface CartItem {
+  id: string
+  name: string
+  price: number
+  quantity: number
+}
+
+export const useCartStore = defineStore('cart', () => {
+  const items = ref<CartItem[]>([])
+
+  const total = computed(() =>
+    items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  )
+
+  const addItem = (product: Omit<CartItem, 'quantity'>) => {
+    const existing = items.value.find((i) => i.id === product.id)
+    if (existing) {
+      existing.quantity++
+    } else {
+      items.value.push({ ...product, quantity: 1 })
+    }
+  }
+
+  const removeItem = (id: string) => {
+    items.value = items.value.filter((i) => i.id !== id)
+  }
+
+  const updateQuantity = (id: string, quantity: number) => {
+    const item = items.value.find((i) => i.id === id)
+    if (item) {
+      item.quantity = Math.max(0, quantity)
+      if (item.quantity === 0) {
+        removeItem(id)
+      }
+    }
+  }
+
+  // Persist to localStorage
+  watch(
+    items,
+    (newItems) => {
+      localStorage.setItem('cart', JSON.stringify(newItems))
+    },
+    { deep: true }
+  )
+
+  // Sync across tabs
+  if (process.client) {
+    const channel = new BroadcastChannel('cart-sync')
+    channel.onmessage = (event) => {
+      items.value = event.data
+    }
+    watch(items, (newItems) => {
+      channel.postMessage(newItems)
+    })
+  }
+
+  return {
+    items,
+    total,
+    addItem,
+    removeItem,
+    updateQuantity,
+  }
+})
+
+// app/composables/useCart.ts
+export const useCart = () => useCartStore()
+```
+
+---
+
+## 6. Performance Optimization
+
+### Skenario: Optimize Slow Page
+
+**Prompt:**
+
+```
+@frontend Page /products sangat lambat. Tolong optimize:
+- Initial load time
+- Image loading
+- Component rendering
+- Bundle size
+- Lighthouse score target: 90+
+```
+
+**Agent akan:**
+
+1. ✅ Load skill `frontend-patterns`
+2. ✅ Analyze bundle dengan `nuxi analyze`
+3. ✅ Implement lazy loading
+4. ✅ Add image optimization
+5. ✅ Use virtual scrolling untuk long lists
+6. ✅ Run Lighthouse audit
+
+**Optimizations Applied:**
+
+```vue
+<!-- Before -->
+<script setup lang="ts">
+import ProductCard from '~/components/ProductCard.vue'
+import HeavyChart from '~/components/HeavyChart.vue'
+
+const { data: products } = await useFetch('/api/products')
+</script>
+
+<template>
+  <div v-for="product in products" :key="product.id">
+    <img :src="product.image" />
+    <ProductCard :product="product" />
+  </div>
+  <HeavyChart :data="chartData" />
+</template>
+
+<!-- After -->
+<script setup lang="ts">
+// Lazy load heavy component
+const HeavyChart = defineAsyncComponent(() => import('~/components/HeavyChart.vue'))
+
+// Fetch with caching
+const { data: products } = await useFetch('/api/products', {
+  key: 'products-list',
+  getCachedData: (key) => useNuxtData(key).data,
+})
+</script>
+
+<template>
+  <!-- Virtual scrolling untuk list panjang -->
+  <UVirtualScroll :items="products" :item-height="200">
+    <template #default="{ item: product }">
+      <!-- Optimized image dengan Nuxt Image -->
+      <NuxtImg :src="product.image" width="400" height="300" loading="lazy" format="webp" />
+      <ProductCard :product="product" />
+    </template>
+  </UVirtualScroll>
+
+  <!-- Lazy load chart -->
+  <ClientOnly>
+    <HeavyChart v-if="showChart" :data="chartData" />
+  </ClientOnly>
+</template>
+```
+
+**Results:**
+
+- ✅ Bundle size reduced: 500KB → 200KB
+- ✅ First Contentful Paint: 3.5s → 1.2s
+- ✅ Lighthouse Performance: 65 → 94
+- ✅ Images optimized with WebP format
+- ✅ Code splitting implemented
+
+---
+
+## 7. Accessibility Review
+
+### Skenario: Audit Existing Component
+
+**Prompt:**
+
+```
+@frontend Review accessibility untuk component app/components/Modal.vue
+Target: WCAG 2.1 Level AA compliance
+```
+
+**Agent akan:**
+
+1. ✅ Load skill `web-design-guidelines`
+2. ✅ Check semantic HTML
+3. ✅ Verify ARIA attributes
+4. ✅ Test keyboard navigation
+5. ✅ Check color contrast
+6. ✅ Provide detailed report
+
+**Audit Report Example:**
+
+````markdown
+# Accessibility Audit: Modal.vue
+
+## Issues Found (6)
+
+### Critical
+
+1. ❌ Missing `role="dialog"` on modal container
+2. ❌ No focus trap - keyboard navigation escapes modal
+3. ❌ Missing `aria-labelledby` and `aria-describedby`
+
+### Warning
+
+4. ⚠️ Close button lacks accessible label
+5. ⚠️ Background color contrast 3.2:1 (needs 4.5:1)
+
+### Info
+
+6. ℹ️ Consider adding focus restoration on close
+
+## Recommended Fixes
+
+### 1. Add proper ARIA attributes
+
+```vue
+<template>
+  <div role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-desc">
+    <h2 id="modal-title">{{ title }}</h2>
+    <p id="modal-desc">{{ description }}</p>
+  </div>
+</template>
+```
+````
+
+### 2. Implement focus trap
+
+```typescript
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
+const modalRef = ref<HTMLElement>()
+const { activate, deactivate } = useFocusTrap(modalRef)
+
+watch(isOpen, (open) => {
+  if (open) activate()
+  else deactivate()
+})
+```
+
+### 3. Add accessible close button
+
+```vue
+<UButton icon="i-heroicons-x-mark" aria-label="Close modal" @click="close" />
+```
+
+## After Fixes
+
+✅ All WCAG 2.1 Level AA criteria met
+✅ Keyboard navigation: Tab, Shift+Tab, Escape
+✅ Screen reader friendly
+✅ Color contrast: 7.8:1
+
+```
+
+---
+
+## 8. Bug Fixing
+
+### Skenario: Fix Hydration Mismatch
+
+**Prompt:**
+```
+
+@frontend Ada error hydration mismatch di homepage:
+"Hydration completed but contains mismatches."
+
+Error terjadi di section hero dengan dynamic timestamp.
+
+````
+
+**Agent akan:**
+1. ✅ Load skill `frontend-patterns`
+2. ✅ Analyze SSR/CSR differences
+3. ✅ Identify root cause
+4. ✅ Provide fix dengan explanation
+5. ✅ Add preventive measures
+
+**Diagnosis:**
+```markdown
+# Hydration Mismatch Analysis
+
+## Root Cause
+Timestamp generated differently on server vs client:
+- Server: Uses UTC time
+- Client: Uses local timezone
+
+## Code Causing Issue
+```vue
+<template>
+  <p>Last updated: {{ new Date().toLocaleString() }}</p>
+</template>
+````
+
+## Fix
+
+```vue
+<script setup lang="ts">
+// Option 1: Client-only rendering
+const timestamp = ref('')
+
+onMounted(() => {
+  timestamp.value = new Date().toLocaleString()
+})
+</script>
+
+<template>
+  <ClientOnly fallback="Loading...">
+    <p>Last updated: {{ timestamp }}</p>
+  </ClientOnly>
+</template>
+```
+
+```vue
+<!-- Option 2: Use consistent format -->
+<script setup lang="ts">
+const timestamp = new Date().toISOString()
+</script>
+
+<template>
+  <p>Last updated: {{ timestamp }}</p>
+</template>
+```
+
+## Prevention
+
+- ✅ Always use ClientOnly for browser APIs
+- ✅ Use ISO format untuk dates
+- ✅ Test with SSR enabled
+- ✅ Add hydration tests
+
+```
+
+---
+
+## Tips untuk Prompt yang Efektif
+
+### ✅ Good Prompts
+
+```
+
+@frontend Build login form dengan email/password, validation, dan error handling
+
+```
+- Specific dan actionable
+- Jelas output yang diharapkan
+- Focused scope
+
+```
+
+@frontend Check accessibility untuk ProductCard component, target WCAG 2.1 AA
+
+```
+- Clear success criteria
+- Specific component
+- Defined standard
+
+### ❌ Bad Prompts
+
+```
+
+@frontend Bantu saya
+
+```
+- Terlalu vague
+- Tidak ada context
+
+```
+
+@frontend Build full e-commerce website
+
+```
+- Scope terlalu luas
+- Perlu breakdown
+
+### Best Practices
+
+1. **Be Specific**: Sebutkan exact component/page/feature
+2. **Provide Context**: Jika ada existing code, mention file path
+3. **Set Standards**: Sebutkan requirements (accessibility, performance, etc.)
+4. **Ask Questions**: Agent bisa tanya jika butuh clarification
+5. **Iterate**: Start small, kemudian expand
+
+---
+
+## MCP Integration Examples
+
+### Query Nuxt Documentation
+
+```
+
+@frontend Bagaimana cara implement custom error page di Nuxt 4?
+
+```
+
+Agent akan:
+1. Query Nuxt MCP untuk error handling docs
+2. Get latest Nuxt 4 patterns
+3. Provide code example dengan explanation
+
+### Check Nuxt UI Components
+
+```
+
+@frontend Apa komponen terbaik untuk notification system?
+
+```
+
+Agent akan:
+1. Query Nuxt UI MCP untuk Toast/Notification components
+2. Compare options (`<UNotification>` vs `<UToast>`)
+3. Provide implementation recommendation
+
+### Use Playwright for Testing
+
+```
+
+@frontend Create E2E test untuk login flow
+
+```
+
+Agent akan:
+1. Use Playwright MCP untuk browser automation
+2. Generate test script
+3. Add assertions dan error cases
+4. Setup test runners
+
+---
+
+## Common Workflows Cheatsheet
+
+| Task | Prompt Example |
+|------|----------------|
+| Create Component | `@frontend Create Button component dengan variants primary/secondary` |
+| Fix Bug | `@frontend Fix hydration error di app/pages/index.vue` |
+| Add Feature | `@frontend Add dark mode toggle menggunakan Nuxt UI` |
+| Optimize | `@frontend Optimize bundle size untuk /dashboard route` |
+| Review | `@frontend Review accessibility untuk Modal component` |
+| Test | `@frontend Add unit tests untuk useCart composable` |
+| Document | `@frontend Add JSDoc comments untuk ProductCard props` |
+| Refactor | `@frontend Refactor UserList component, extract reusable logic` |
+
+---
+
+## Troubleshooting
+
+### Agent tidak load skill yang expected
+
+**Solusi:**
+- Explicitly mention skill: `@frontend Gunakan skill web-design-guidelines untuk review ini`
+- Check skill available: List skills di `.opencode/skills/` dan `~/.opencode/skills/`
+
+### MCP server tidak respond
+
+**Solusi:**
+- Check `.opencode/config.json` - pastikan `enabled: true`
+- Restart OpenCode session
+- Verify internet connection (untuk remote MCP)
+
+### Agent terlalu verbose
+
+**Solusi:**
+- Add constraint: `@frontend (concise) Create button component`
+- Request specific output: `@frontend Show only code, no explanation`
+
+### Need Figma access
+
+**Solusi:**
+1. Get token dari https://www.figma.com/developers/api#access-tokens
+2. Set `FIGMA_ACCESS_TOKEN` di `.env`
+3. Enable di `.opencode/config.json`: `"enabled": true`
+4. Restart session
+
+---
+
+## Next Steps
+
+Setelah familiar dengan examples di atas:
+
+1. **Explore Skills**: Check `~/.opencode/skills/` untuk available skills
+2. **Read Workflows**: Baca `WORKFLOWS.md` untuk detailed workflows
+3. **Check MCP Guide**: Read `MCP_GUIDE.md` untuk advanced MCP usage
+4. **Practice**: Start dengan simple components, gradually increase complexity
+5. **Contribute**: Share your own examples dan workflows dengan team
+
+---
+
+**Happy Coding! 🚀**
+
+Untuk pertanyaan atau feedback:
+- Check dokumentasi lengkap di `.opencode/agents/`
+- Atau mention `@frontend` dengan pertanyaan Anda
+```