opencode-agent-kit 1.0.3 → 1.0.6

package/README.md

@@ -50,10 +50,10 @@ This repository contains a complete OpenCode agent configuration with **Leader
   - `android-developer.md` — Android Developer (Kotlin/Compose) — `@android`
   - `flutter-developer.md` — Flutter Developer (Dart) — `@flutter`
   - `nuxt-frontend-developer-mentor.md` — Nuxt mentor (standalone)
-- Internal documentation: `.opencode/agent-docs/`
-  - Frontend Nuxt: `.opencode/agent-docs/frontend/nuxt/`
-  - Frontend React: `.opencode/agent-docs/frontend/react/`
-  - Backend Node: `.opencode/agent-docs/backend/node/`
+- Internal documentation: `.opencode/docs/`
+  - Frontend Nuxt: `.opencode/docs/frontend/nuxt/`
+  - Frontend React: `.opencode/docs/frontend/react/`
+  - Backend Node: `.opencode/docs/backend/node/`
 - Local skills: `.opencode/skills/` (62 skill playbooks)
 - Contexts: `.opencode/contexts/` (dev, research, review)
 
@@ -627,11 +627,11 @@ Agents are configured to always report:
 - No pushes unless requested by the user
 - No touching files outside the request scope
 
-Detailed SOP: `.opencode/agent-docs/frontend/nuxt/TEAM_OPERATING_GUIDE.md`
+Detailed SOP: `.opencode/docs/frontend/nuxt/TEAM_OPERATING_GUIDE.md`
 
 ## Documentation
 
-Agent documentation is available at `.opencode/agent-docs/frontend/nuxt/`:
+Agent documentation is available at `.opencode/docs/frontend/nuxt/`:
 
 | Document                  | Content                       |
 | ------------------------- | ----------------------------- |
@@ -685,9 +685,9 @@ Agent documentation is available at `.opencode/agent-docs/frontend/nuxt/`:
 - Flutter prompt: `.opencode/agents/flutter-developer.md`
 - Mobile commands: `.opencode/commands/android-build/`, `android-test/`, `flutter-build/`, `flutter-test/`, `gpc-release/`
 - Mobile rules: `.opencode/rules/android/`, `flutter/`, `mobile/`
-- Main docs: `.opencode/agent-docs/frontend/nuxt/README.md`
-- Quick start: `.opencode/agent-docs/frontend/nuxt/QUICK_START.md`
-- Docs index: `.opencode/agent-docs/frontend/nuxt/INDEX.md`
+- Main docs: `.opencode/docs/frontend/nuxt/README.md`
+- Quick start: `.opencode/docs/frontend/nuxt/QUICK_START.md`
+- Docs index: `.opencode/docs/frontend/nuxt/INDEX.md`
 
 ## Troubleshooting
 

package/bin/commands/init.mjs

@@ -220,12 +220,12 @@ export async function init(options) {
   console.log(
     `       • opencode.json        — 13 agents config with MCP servers`,
   );
-  console.log(`       • .opencode/agents/    — 14 agent prompt files`);
+  console.log(`       • .opencode/agents    — 14 agent prompt files`);
   console.log(`       • .opencode/skills/    — 60+ skill playbooks`);
   console.log(`       • .opencode/commands/  — 35+ slash commands`);
   console.log(`       • .opencode/rules/     — Scoped coding rules`);
   console.log(`       • .opencode/contexts/  — Dev/review/research contexts`);
-  console.log(`       • .opencode/agent-docs/— Agent documentation`);
+  console.log(`       • .opencode/docs/— Agent documentation`);
   console.log(`\n     Next steps:`);
   console.log(`       cd ${targetDir}`);
   console.log(`       opencode\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-agent-kit",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "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/nuxt-frontend-developer.md

@@ -13,16 +13,16 @@ You are a **senior frontend developer** with deep expertise in modern web techno
 
 ## 📚 Documentation
 
-Complete documentation available in `.opencode/agent-docs/frontend/nuxt/`:
-
-- **Quick Start**: `.opencode/agent-docs/frontend/nuxt/QUICK_START.md` - Get started in 5 minutes
-- **Examples**: `.opencode/agent-docs/frontend/nuxt/EXAMPLES.md` - 50+ practical examples
-- **API Patterns**: `.opencode/agent-docs/frontend/nuxt/API_PATTERNS.md` - useApi composable guide
-- **Workflows**: `.opencode/agent-docs/frontend/nuxt/WORKFLOWS.md` - 8 detailed workflows
-- **Cheatsheet**: `.opencode/agent-docs/frontend/nuxt/CHEATSHEET.md` - Quick reference
-- **MCP Guide**: `.opencode/agent-docs/frontend/nuxt/MCP_GUIDE.md` - MCP integration
-- **Testing**: `.opencode/agent-docs/frontend/nuxt/TESTING_GUIDE.md` - Testing & validation
-- **Navigation**: `.opencode/agent-docs/frontend/nuxt/INDEX.md` - Full documentation index
+Complete documentation available in `.opencode/docs/frontend/nuxt/`:
+
+- **Quick Start**: `.opencode/docs/frontend/nuxt/QUICK_START.md` - Get started in 5 minutes
+- **Examples**: `.opencode/docs/frontend/nuxt/EXAMPLES.md` - 50+ practical examples
+- **API Patterns**: `.opencode/docs/frontend/nuxt/API_PATTERNS.md` - useApi composable guide
+- **Workflows**: `.opencode/docs/frontend/nuxt/WORKFLOWS.md` - 8 detailed workflows
+- **Cheatsheet**: `.opencode/docs/frontend/nuxt/CHEATSHEET.md` - Quick reference
+- **MCP Guide**: `.opencode/docs/frontend/nuxt/MCP_GUIDE.md` - MCP integration
+- **Testing**: `.opencode/docs/frontend/nuxt/TESTING_GUIDE.md` - Testing & validation
+- **Navigation**: `.opencode/docs/frontend/nuxt/INDEX.md` - Full documentation index
 
 When users ask for documentation, reference these files.
 

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.json

@@ -8,13 +8,6 @@
       "*.env.example": "allow"
     },
     "edit": "allow",
-    "bash": {
-      "*": "ask",
-      "git status": "allow",
-      "git diff": "allow",
-      "git log*": "allow",
-      "grep *": "allow"
-    },
     "webfetch": "allow",
     "skill": {
       "*": "allow"
@@ -30,6 +23,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",