opencode-agent-kit 1.0.5 → 1.0.7

package/bin/commands/init.mjs

@@ -5,6 +5,7 @@ import {
   mkdirSync,
   writeFileSync,
   readdirSync,
+  appendFileSync,
 } from "fs";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
@@ -201,7 +202,15 @@ export async function init(options) {
     );
   }
 
-  // 6. Install dependencies
+  // 6. Copy opencode.example.json
+  const exampleSrc = join(TEMPLATE_DIR, "opencode.example.json");
+  const exampleDest = join(targetDir, "opencode.example.json");
+  if (existsSync(exampleSrc)) {
+    console.log(`  📄 Copying opencode.example.json...`);
+    copyFileSync(exampleSrc, exampleDest);
+  }
+
+  // 7. Install dependencies
   if (!skipInstall) {
     const pm = detectPackageManager(opencodeDir);
     console.log(`  📦 Installing .opencode/ dependencies with ${pm}...`);
@@ -213,13 +222,36 @@ export async function init(options) {
     }
   }
 
-  // 7. Done
+  // 8. Update .gitignore
+  const gitignorePath = join(targetDir, ".gitignore");
+  const gitignoreEntries = [
+    ".opencode/*",
+    "opencode.json",
+    "opencode.example.json",
+  ];
+  if (!existsSync(gitignorePath)) {
+    writeFileSync(gitignorePath, gitignoreEntries.join("\n") + "\n", "utf-8");
+    console.log(`  📄 Created .gitignore...`);
+  } else {
+    const gitignoreContent = readFileSync(gitignorePath, "utf-8");
+    let appended = false;
+    for (const entry of gitignoreEntries) {
+      if (!gitignoreContent.includes(entry)) {
+        appendFileSync(gitignorePath, entry + "\n", "utf-8");
+        appended = true;
+      }
+    }
+    if (appended) {
+      console.log(`  📄 Updated .gitignore...`);
+    }
+  }
+
+  // 9. Done
   console.log(`\n  ✅ opencode-agent-kit installed!\n`);
   console.log(`     Location: ${targetDir}`);
   console.log(`     What you got:`);
-  console.log(
-    `       • opencode.json        — 13 agents config with MCP servers`,
-  );
+  console.log(`       • opencode.json              — 13 agents config with MCP servers`);
+  console.log(`       • opencode.example.json      — Example config for reference`);
   console.log(`       • .opencode/agents    — 14 agent prompt files`);
   console.log(`       • .opencode/skills/    — 60+ skill playbooks`);
   console.log(`       • .opencode/commands/  — 35+ slash commands`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-agent-kit",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Multi-stack OpenCode agent toolkit — 13 specialized AI agents (Nuxt, React, Node.js, Laravel, CI3, Android, Flutter, DevOps, SEO) with 62 skills, 36 commands, and 6 MCP servers",
   "type": "module",
   "bin": {

package/template/.opencode/agents/ui-ux-designer.md

@@ -22,8 +22,8 @@ You are a **senior UI/UX Designer** specializing in modern web applications, des
 
 1. **Design Direction** — Define visual language, layout patterns, and interaction models for features
 2. **Design System Creation** — Build and maintain design tokens, component libraries, and style guides
- 3. **AI-Assisted Design** — Use Impeccable (23 commands) for design critique, audit, polish, shaping, and visual iteration
- 4. **Impeccable Context** — Create PRODUCT.md (strategy) and DESIGN.md (visual system) automatically via discovery interview when they don't exist
+3. **AI-Assisted Design with Stitch** — Immediately attempt to use Stitch MCP tools (`stitch_generate_screen_from_text`, `stitch_edit_screens`, `stitch_create_project`, etc.) to generate UI screens and variations. If Stitch MCP is unavailable, fall back to manual design specs without asking.
+4. **Impeccable Context** — Use Impeccable (23 commands) for design critique, audit, polish, shaping, and visual iteration
 5. **UX Flow Mapping** — Map user journeys, wireframe screens, define interaction states
 6. **Accessibility Guidelines** — Define WCAG 2.1 compliance requirements, contrast ratios, keyboard navigation, screen reader support
 7. **Component Design Specs** — Provide detailed specifications for each component (layout, states, variants, spacing, typography, color)
@@ -154,6 +154,132 @@ Designer (internal, automatic):
 6. Provide spec to @frontend-nuxt or @frontend-react for implementation
 ```
 
+## Google Stitch Integration
+
+**Google Stitch** is an AI-powered UI design tool accessible via MCP. Use Stitch to accelerate design exploration and generate design variations.
+
+### Stitch MCP Availability
+
+Stitch tools are available when Stitch MCP is enabled in your OpenCode config (`opencode.json` or `~/.config/opencode/opencode.json`). The Stitch MCP must be configured with your API key and set to `"enabled": true`.
+
+**Check Stitch availability**: When you receive a design request, immediately attempt to use Stitch tools. If Stitch MCP is not available (disabled, no API key, or connection error), proceed with manual design specs without Stitch.
+
+### Stitch MCP Tool Reference
+
+| Tool | Purpose |
+|------|---------|
+| `stitch_create_project` | Create a new Stitch project for design work |
+| `stitch_generate_screen_from_text` | Generate UI screens from natural language descriptions |
+| `stitch_get_screen` | Retrieve a generated screen's details |
+| `stitch_list_screens` | List all screens in a Stitch project |
+| `stitch_edit_screens` | Refine existing screens with new prompts |
+| `stitch_list_design_systems` | List available design systems in a project |
+| `stitch_update_design_system` | Update design system tokens (colors, fonts, roundness) |
+| `stitch_create_design_system` | Create a new design system for a project |
+| `stitch_upload_design_md` | Upload DESIGN.md to a Stitch project |
+| `stitch_create_design_system_from_design_md` | Create design system from uploaded DESIGN.md |
+
+### Stitch Workflow
+
+```markdown
+1. Define Design Requirements
+   - User need, target audience, brand context
+   - Key features and interactions
+   - Accessibility requirements
+
+2. Generate with Stitch
+   - Use `stitch_generate_screen_from_text` with natural language descriptions
+   - Example: "A marketplace listing page with filter sidebar, product cards with images, prices, and pagination at the bottom"
+   - Specify deviceType: "MOBILE" or "DESKTOP"
+   - Optionally attach a designSystem for consistency
+
+3. Review and Iterate
+   - Use `stitch_get_screen` to examine generated screens
+   - Use `stitch_edit_screens` to refine specific screens
+   - Iterate until design direction is solid
+
+4. Extract Design Specs
+   - Examine Stitch output for color tokens, typography, spacing patterns
+   - Identify component structures and interaction patterns
+   - Note accessibility considerations
+
+5. Create Formal Specs
+   - Convert Stitch output to structured component specs
+   - Define exact token values in OKLCH
+   - Document states and variants
+   - Prepare handoff for @frontend-nuxt (Vue) or @frontend-react (React)
+```
+
+### When to Use Stitch
+
+| Use Stitch | Don't Use Stitch |
+|------------|-----------------|
+| Rapid design exploration | Final design system decisions |
+| Generating layout variations | Detailed component specs (manual is better) |
+| Visual direction brainstorming | Accessibility-critical components (verify manually) |
+| Style/pattern ideation | Brand-critical designs (requires manual refinement) |
+| Multiple screen mockups | Single micro-component specs |
+
+### Stitch Best Practices
+
+- Use Stitch output as starting point, not final deliverable
+- Always verify accessibility in generated designs
+- Extract and document tokens explicitly
+- Refine Stitch output before handoff to @frontend-nuxt or @frontend-react
+- Keep Stitch as a creative tool, not a replacement for design thinking
+- Use `stitch_edit_screens` to iterate rather than regenerating entire projects
+- Apply design system updates (`stitch_update_design_system`) for brand consistency across screens
+
+### Stitch Integration Example
+
+```markdown
+User: Design a marketplace card component for product listings
+
+Designer (using Stitch):
+
+1. Generate screens with Stitch:
+   - Call `stitch_generate_screen_from_text` with prompt:
+     "Create a responsive marketplace product listing page. 
+      Left sidebar with category filters and price range slider.
+      Grid of product cards showing: product image, title, price, 
+      seller name, rating stars. Each card has a save/wishlist button.
+      Bottom pagination with 12 items per page.
+      Modern, clean design with good whitespace."
+   - Set deviceType: "DESKTOP"
+
+2. Review generated designs:
+   - Call `stitch_get_screen` to examine output
+   - Identify best layout direction
+   - Extract color tokens, typography patterns, spacing values
+
+3. Refine with iteration:
+   - Call `stitch_edit_screens` to adjust specific elements
+   - Example: "Make the product cards more compact, increase image size,
+     add a quick-view button overlay on hover"
+
+4. Create formal component spec:
+   - Layout: [ Stitch-derived structure ]
+   - Tokens: [ Extracted from Stitch output + refined ]
+   - States: hover, loading, empty, error
+   - Accessibility: [ Manual verification ]
+
+5. Handoff to @frontend-nuxt or @frontend-react with complete spec
+```
+
+### Stitch Fallback
+
+If Stitch MCP is unavailable (check by attempting a Stitch tool call):
+
+```markdown
+Stitch MCP not available. Proceeding with manual design specs:
+
+1. Define design direction based on requirements
+2. Create wireframe descriptions
+3. Define design tokens manually
+4. Write component specifications
+5. Prepare handoff for @frontend-nuxt or @frontend-react
+```
+
 ## Design Process
 
 When receiving a design request, follow this process:

package/template/opencode.example.json

@@ -0,0 +1,359 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "description": "IT Team Agent Configuration Example - Copy ke opencode.json dan sesuaikan model sesuai kebutuhan",
+  "note": "Opsional: Jika tidak set model per agent, subagent akan inherit dari primary (IT Leader). Untuk customize, uncomment model line per agent.",
+  "formatter": true,
+  "permission": {
+    "read": {
+      "*": "allow",
+      "*.env": "deny",
+      "*.env.*": "deny",
+      "*.env.example": "allow"
+    },
+    "webfetch": "allow",
+    "skill": {
+      "*": "allow"
+    },
+    "todowrite": "allow",
+    "question": "allow",
+    "doom_loop": "ask",
+    "external_directory": "ask"
+  },
+  "instructions": [
+    ".opencode/instructions/INSTRUCTIONS.md",
+    ".opencode/skills/coding-standards/SKILL.md",
+    ".opencode/skills/security-review/SKILL.md",
+    ".opencode/skills/frontend-design/SKILL.md"
+  ],
+  "mcp": {
+    "nuxt": {
+      "type": "remote",
+      "url": "https://nuxt.com/mcp",
+      "enabled": true,
+      "description": "Nuxt documentation, blog posts, and deployment guides"
+    },
+    "nuxt-ui": {
+      "type": "remote",
+      "url": "https://ui.nuxt.com/mcp",
+      "enabled": true,
+      "description": "Nuxt UI component documentation and examples"
+    },
+    "figma": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-figma"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
+      },
+      "enabled": false,
+      "description": "Figma design file access (requires FIGMA_ACCESS_TOKEN)"
+    },
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-playwright"],
+      "enabled": true,
+      "description": "Browser automation and E2E testing with Playwright"
+    },
+    "stitch": {
+      "type": "remote",
+      "url": "https://stitch.googleapis.com/mcp",
+      "headers": {
+        "X-Goog-Api-Key": "${STITCH_API_KEY}"
+      },
+      "enabled": false,
+      "description": "Google Stitch AI design generation (requires STITCH_API_KEY)"
+    },
+    "postman": {
+      "type": "remote",
+      "url": "https://mcp.postman.com/mcp",
+      "headers": {
+        "Authorization": "Bearer ${POSTMAN_API_KEY}"
+      },
+      "enabled": true,
+      "description": "Postman API management for collections, requests, and documentation"
+    }
+  },
+  "agent": {
+    "leader": {
+      "description": "IT Leader & Technical Project Manager — analyzes requirements, designs architecture, decomposes tasks, delegates to subagents, and unifies outputs",
+      "mode": "primary",
+      "prompt": "{file:.opencode/agents/it-leader.md}",
+      "model": "opencode/claude-opus-4.7",
+      "temperature": 0.4,
+      "color": "#8b5cf6",
+      "permission": {
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow",
+          "npx playwright*": "allow"
+        },
+        "nuxt_*": "allow",
+        "nuxt-ui_*": "allow",
+        "figma_*": "ask",
+        "playwright_*": "allow",
+        "postman_*": "allow",
+        "task": { "*": "allow" }
+      }
+    },
+    "frontend-nuxt": {
+      "description": "Expert Vue/Nuxt frontend developer for Nuxt.js, Vue 3, Nuxt UI, and modern web technologies with MCP integration (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/nuxt-frontend-developer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#3b82f6",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow",
+          "npx playwright*": "allow"
+        },
+        "nuxt_*": "allow",
+        "nuxt-ui_*": "allow",
+        "figma_*": "ask",
+        "playwright_*": "allow"
+      }
+    },
+    "frontend-react": {
+      "description": "Expert React/Next.js frontend developer for React 19, Next.js 15, Vite, shadcn/ui, and modern web technologies (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/react-frontend-developer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#06b6d4",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow",
+          "npx playwright*": "allow"
+        },
+        "figma_*": "ask",
+        "playwright_*": "allow"
+      }
+    },
+    "backend": {
+      "description": "Expert backend developer for Node.js, Express, Prisma, and PostgreSQL (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/node-backend-developer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#10b981",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow"
+        },
+        "postman_*": "allow"
+      }
+    },
+    "ci3": {
+      "description": "CodeIgniter 3 MVC fullstack developer for REST API, JWT, MySQL/PostgreSQL (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/code-igniter-3-fullstack.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#84cc16",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "git status": "allow",
+          "git diff": "allow",
+          "git log*": "allow"
+        },
+        "postman_*": "allow"
+      }
+    },
+    "laravel": {
+      "description": "Laravel backend engineer for REST API, Service/Repository, JWT, MySQL/PostgreSQL (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/laravel-advanced.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#f97316",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "git status": "allow",
+          "git diff": "allow",
+          "git log*": "allow"
+        },
+        "postman_*": "allow"
+      }
+    },
+    "designer": {
+      "description": "UI/UX Designer specializing in design systems, Google Stitch, Figma, accessibility, and design-to-code handoff (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/ui-ux-designer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.5,
+      "color": "#f59e0b",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "git status": "allow",
+          "git diff": "allow",
+          "git log*": "allow"
+        },
+        "stitch_*": "allow",
+        "figma_*": "ask",
+        "nuxt-ui_*": "allow"
+      }
+    },
+    "reviewer": {
+      "description": "Code Reviewer & QA Engineer specializing in code quality, security audit, testing strategy, and verification (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/code-reviewer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#ef4444",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow",
+          "npx playwright*": "allow"
+        },
+        "playwright_*": "allow"
+      }
+    },
+    "database": {
+      "description": "Database Specialist specializing in PostgreSQL schema design, query optimization, Prisma ORM, and migrations (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/database-specialist.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#06b6d4",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow"
+        }
+      }
+    },
+    "devops": {
+      "description": "DevOps Engineer specializing in CI/CD, deployment, Docker, monitoring, and infrastructure (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/devops-specialist.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#6366f1",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "npm *": "allow",
+          "pnpm *": "allow",
+          "bun *": "allow",
+          "yarn *": "allow",
+          "docker *": "allow"
+        }
+      }
+    },
+    "seo": {
+      "description": "SEO Specialist specializing in meta tags, structured data, Core Web Vitals, and content optimization (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/seo-specialist.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#84cc16",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "git status": "allow",
+          "git diff": "allow",
+          "git log*": "allow"
+        },
+        "nuxt_*": "allow"
+      }
+    },
+    "android": {
+      "description": "Expert Android developer for Kotlin, Jetpack Compose, XML, Material Design 3, and Google Play (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/android-developer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#22c55e",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "./gradlew *": "allow",
+          "gradle *": "allow"
+        },
+        "figma_*": "ask",
+        "playwright_*": "allow"
+      }
+    },
+    "flutter": {
+      "description": "Expert Flutter developer for Dart, Flutter SDK, Material Design 3, Firebase, and cross-platform mobile apps (subagent of IT Leader)",
+      "mode": "subagent",
+      "prompt": "{file:.opencode/agents/flutter-developer.md}",
+      "model": "opencode/claude-sonnet-4.5",
+      "temperature": 0.4,
+      "color": "#0284c7",
+      "permission": {
+        "edit": "allow",
+        "webfetch": "allow",
+        "skill": { "*": "allow" },
+        "bash": {
+          "*": "ask",
+          "flutter *": "allow",
+          "dart *": "allow"
+        },
+        "figma_*": "ask",
+        "playwright_*": "allow"
+      }
+    }
+  }
+}

package/template/opencode.json

@@ -7,14 +7,6 @@
       "*.env.*": "deny",
       "*.env.example": "allow"
     },
-    "edit": "allow",
-    "bash": {
-      "*": "ask",
-      "git status": "allow",
-      "git diff": "allow",
-      "git log*": "allow",
-      "grep *": "allow"
-    },
     "webfetch": "allow",
     "skill": {
       "*": "allow"
@@ -30,6 +22,48 @@
     ".opencode/skills/security-review/SKILL.md",
     ".opencode/skills/frontend-design/SKILL.md"
   ],
+  "mcp": {
+    "nuxt": {
+      "type": "remote",
+      "url": "https://nuxt.com/mcp",
+      "enabled": true,
+      "description": "Nuxt documentation, blog posts, and deployment guides"
+    },
+    "nuxt-ui": {
+      "type": "remote",
+      "url": "https://ui.nuxt.com/mcp",
+      "enabled": true,
+      "description": "Nuxt UI component documentation and examples"
+    },
+    "figma": {
+      "type": "remote",
+      "url": "https://mcp.figma.com/mcp"
+    },
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-playwright"],
+      "enabled": true,
+      "description": "Browser automation and E2E testing with Playwright"
+    },
+    "stitch": {
+      "type": "remote",
+      "url": "https://stitch.googleapis.com/mcp",
+      "headers": {
+        "X-Goog-Api-Key": "${STITCH_API_KEY}"
+      },
+      "description": "Google Stitch AI design generation (requires STITCH_API_KEY)"
+    },
+    "postman": {
+      "type": "remote",
+      "url": "https://mcp.postman.com/mcp",
+      "headers": {
+        "Authorization": "Bearer ${POSTMAN_API_KEY}"
+      },
+      "enabled": true,
+      "description": "Postman API management for collections, requests, and documentation"
+    }
+  },
   "agent": {
     "leader": {
       "description": "IT Leader & Technical Project Manager — analyzes requirements, designs architecture, decomposes tasks, delegates to subagents, and unifies outputs",
@@ -38,7 +72,6 @@
       "temperature": 0.4,
       "color": "#8b5cf6",
       "permission": {
-        "edit": "allow",
         "webfetch": "allow",
         "skill": { "*": "allow" },
         "bash": {