opencode-agent-kit 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-agent-kit",
-  "version": "1.0.5",
+  "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/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",