opencodekit 0.9.2 → 0.11.0

package/dist/template/.opencode/skill/playwriter/SKILL.md

@@ -0,0 +1,148 @@
+---
+name: playwriter
+description: Browser automation via Chrome extension. Single execute tool with full Playwright API. Uses your existing browser with extensions, sessions, cookies. 90% less context than traditional browser MCP.
+mcp:
+  playwriter:
+    command: npx
+    args: ["playwriter@latest"]
+---
+
+# Playwriter Browser Automation (MCP)
+
+Control your actual Chrome browser via extension. Unlike traditional browser MCP tools that spawn isolated instances, Playwriter:
+
+- **Uses your existing browser** - extensions, sessions, cookies all work
+- **Single `execute` tool** - send Playwright code snippets directly
+- **90% less context** - no tool schema bloat
+- **Full Playwright API** - LLMs already know it from training
+- **Bypass automation detection** - disconnect extension when needed
+
+## Prerequisites
+
+**You must install the Chrome extension first:**
+
+1. Install [Playwriter Extension](https://chromewebstore.google.com/detail/playwriter-mcp/jfeammnjpkecdekppnclgkkffahnhfhe)
+2. Click extension icon on tabs you want to control (icon turns green)
+3. Now the skill can interact with those tabs
+
+## Quick Start
+
+After loading this skill:
+
+```
+# List available tabs (enabled ones)
+skill_mcp(skill_name="playwriter", tool_name="listTabs")
+
+# Execute Playwright code on a tab
+skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "tab-id-here", "code": "await page.goto(\"https://example.com\")"}')
+```
+
+## Available Tools
+
+| Tool       | Description                      | Arguments                         |
+| ---------- | -------------------------------- | --------------------------------- |
+| `listTabs` | List tabs with extension enabled | `{}`                              |
+| `execute`  | Run Playwright code snippet      | `{"tabId": "...", "code": "..."}` |
+
+That's it. Two tools. The power is in the Playwright code you send.
+
+## The `execute` Pattern
+
+Send any valid Playwright code. The `page` object is already available:
+
+```javascript
+// Navigate
+await page.goto("https://github.com");
+
+// Click
+await page.click("button.sign-in");
+
+// Fill form
+await page.fill("#email", "user@example.com");
+await page.fill("#password", "secret");
+await page.click('button[type="submit"]');
+
+// Wait for element
+await page.waitForSelector(".dashboard");
+
+// Get text
+const title = await page.title();
+
+// Screenshot
+await page.screenshot({ path: "/tmp/screenshot.png" });
+
+// Complex selectors
+await page.click("text=Submit");
+await page.click('[data-testid="login-btn"]');
+
+// Evaluate JS in page
+const links = await page.evaluate(() =>
+  Array.from(document.querySelectorAll("a")).map((a) => a.href),
+);
+```
+
+## Examples
+
+### Navigate and Screenshot
+
+```
+skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.goto(\"https://example.com\"); await page.screenshot({ path: \"/tmp/example.png\" })"}')
+```
+
+### Fill a Form
+
+```
+skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.fill(\"#name\", \"John Doe\"); await page.fill(\"#email\", \"john@example.com\"); await page.click(\"button[type=submit]\")"}')
+```
+
+### Login Flow (Using Your Saved Sessions)
+
+```
+# If you're already logged in via browser, just navigate
+skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.goto(\"https://github.com/settings/profile\")"}')
+
+# Your cookies/session already work - no login needed!
+```
+
+### Scrape Data
+
+```
+skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "const items = await page.$$eval(\".product\", els => els.map(e => ({ name: e.querySelector(\"h2\").textContent, price: e.querySelector(\".price\").textContent }))); return items"}')
+```
+
+### Test Responsive
+
+```
+skill_mcp(skill_name="playwriter", tool_name="execute", arguments='{"tabId": "abc123", "code": "await page.setViewportSize({ width: 375, height: 667 }); await page.screenshot({ path: \"/tmp/mobile.png\" })"}')
+```
+
+## Bypassing Automation Detection
+
+For sites that detect automation (Google login, etc.):
+
+1. **Disconnect the extension** before sensitive actions
+2. Perform login manually
+3. **Reconnect** after authentication
+4. Continue automation with your authenticated session
+
+This works because the browser is real - not a Puppeteer/Playwright-spawned instance.
+
+## vs Traditional Playwright MCP
+
+| Aspect               | `playwright` skill      | `playwriter` skill      |
+| -------------------- | ----------------------- | ----------------------- |
+| Tools                | 17+                     | 2                       |
+| Context usage        | High                    | ~90% less               |
+| Browser              | New instance            | Your existing browser   |
+| Extensions           | None                    | All yours               |
+| Sessions/cookies     | Fresh                   | Your logged-in sessions |
+| Automation detection | Always detected         | Can bypass              |
+| API knowledge        | Must learn tool schemas | Standard Playwright     |
+
+## Tips
+
+- **List tabs first** to get valid tabId values
+- **Chain commands** in single execute for efficiency
+- **Use your sessions** - if you're logged into GitHub in Chrome, it just works
+- **Return data** from execute to get values back
+- **Standard Playwright docs** apply - no special syntax to learn

package/dist/template/.opencode/skill/v0/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: v0
+description: AI-powered UI generation via v0 MCP. Create chats, generate React components, get design assistance. Use when building UI components, dashboards, or need AI design help.
+mcp:
+  v0:
+    command: npx
+    args:
+      [
+        "mcp-remote",
+        "https://mcp.v0.dev",
+        "--header",
+        "Authorization: Bearer ${V0_API_KEY}",
+      ]
+    env:
+      V0_API_KEY: "${V0_API_KEY}"
+---
+
+# v0 AI Code Generation (MCP)
+
+Access v0's AI-powered code generation via MCP. When this skill is loaded, the `v0` MCP server auto-starts and exposes tools for creating and managing v0 chats.
+
+## Prerequisites
+
+Set your v0 API key as an environment variable:
+
+```bash
+export V0_API_KEY="your-v0-api-key"
+```
+
+To get your v0 API key:
+
+1. Go to [v0 account settings](https://v0.app/chat/settings/keys)
+2. Create a new API key
+3. Copy and set as environment variable
+
+## Quick Start
+
+After loading this skill, list available tools:
+
+```
+skill_mcp(skill_name="v0", list_tools=true)
+```
+
+Then invoke tools:
+
+```
+skill_mcp(skill_name="v0", tool_name="create_chat", arguments='{"prompt": "Create a React dashboard component with a sidebar"}')
+```
+
+## Available Tools
+
+### create_chat
+
+Create a new v0 chat with a prompt.
+
+| Parameter | Type   | Required | Description                        |
+| --------- | ------ | -------- | ---------------------------------- |
+| `prompt`  | string | Yes      | The prompt for v0 to generate code |
+
+**Example:**
+
+```
+skill_mcp(skill_name="v0", tool_name="create_chat", arguments='{"prompt": "Build a responsive navbar with dark mode toggle"}')
+```
+
+### get_chat
+
+Get details about an existing chat.
+
+| Parameter | Type   | Required | Description    |
+| --------- | ------ | -------- | -------------- |
+| `chatId`  | string | Yes      | The v0 chat ID |
+
+**Example:**
+
+```
+skill_mcp(skill_name="v0", tool_name="get_chat", arguments='{"chatId": "abc123"}')
+```
+
+### find_chats
+
+Search through your v0 chats.
+
+| Parameter | Type   | Required | Description  |
+| --------- | ------ | -------- | ------------ |
+| `query`   | string | No       | Search query |
+
+**Example:**
+
+```
+skill_mcp(skill_name="v0", tool_name="find_chats", arguments='{"query": "React components"}')
+```
+
+### send_message
+
+Continue a conversation in an existing chat.
+
+| Parameter | Type   | Required | Description     |
+| --------- | ------ | -------- | --------------- |
+| `chatId`  | string | Yes      | The v0 chat ID  |
+| `message` | string | Yes      | Message to send |
+
+**Example:**
+
+```
+skill_mcp(skill_name="v0", tool_name="send_message", arguments='{"chatId": "abc123", "message": "Add dark mode support"}')
+```
+
+## Workflow
+
+### 1. Generate a New Component
+
+```
+# Create a new chat with your requirements
+skill_mcp(skill_name="v0", tool_name="create_chat", arguments='{"prompt": "Create a modern pricing table with 3 tiers using Tailwind CSS"}')
+
+# The response includes a chat ID and generated code
+```
+
+### 2. Iterate on Design
+
+```
+# Send follow-up messages to refine
+skill_mcp(skill_name="v0", tool_name="send_message", arguments='{"chatId": "chat-id-here", "message": "Make the recommended tier more prominent with a gradient border"}')
+```
+
+### 3. Search Previous Work
+
+```
+# Find relevant previous chats
+skill_mcp(skill_name="v0", tool_name="find_chats", arguments='{"query": "dashboard"}')
+```
+
+## Use Cases
+
+- **Component Generation**: Create React/Next.js components from descriptions
+- **UI Prototyping**: Rapidly prototype UI ideas
+- **Design Iteration**: Refine designs through conversation
+- **Code Assistance**: Get help with Tailwind CSS, responsive design, etc.
+
+## Tips
+
+- **Be specific** in prompts - include framework (React, Next.js), styling (Tailwind, CSS), and functionality details
+- **Iterate** using `send_message` rather than creating new chats for refinements
+- **Search first** with `find_chats` to reuse previous work
+- **Include context** about your existing design system or component patterns
+
+## Troubleshooting
+
+**"Invalid API key"**: Ensure `V0_API_KEY` environment variable is set correctly.
+
+**"Rate limit exceeded"**: v0 has usage limits. Wait a few minutes or check your plan.
+
+**"Chat not found"**: Verify the chat ID is correct. Use `find_chats` to list available chats.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "opencodekit",
-	"version": "0.9.2",
+	"version": "0.11.0",
 	"description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
 	"type": "module",
 	"repository": {