opencodekit 0.16.18 → 0.16.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +8 -18
  2. package/dist/template/.opencode/opencode.json +160 -59
  3. package/dist/template/.opencode/skill/context-management/SKILL.md +47 -60
  4. package/dist/template/.opencode/skill/pdf-extract/SKILL.md +428 -0
  5. package/dist/template/.opencode/skill/playwright/SKILL.md +263 -65
  6. package/package.json +3 -13
package/dist/template/.opencode/skill/playwright/SKILL.md CHANGED
@@ -1,112 +1,310 @@
1
1
  ---
2
2
  name: playwright
3
- description: Browser automation with Playwright MCP. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows. Use when user wants to test websites or automate browser interactions.
3
+ description: Browser automation for testing, screenshots, form validation, and UX verification. Uses Playwright CLI for token-efficient automation, with MCP fallback for complex exploratory workflows.
4
4
  ---
5
5
 
6
- # Playwright Browser Automation (MCP)
6
+ # Playwright Browser Automation
7
7
 
8
- Browser automation via Playwright MCP server for testing and automation.
8
+ Browser automation via **Playwright CLI** (primary) and **Playwright MCP** (fallback for complex workflows).
9
9
 
10
- ## Available Tools
10
+ ## Quick Decision
11
11
 
12
- - `browser_navigate` - Navigate to URL
13
- - `browser_snapshot` - Get page accessibility snapshot with element refs
14
- - `browser_take_screenshot` - Capture screenshot
15
- - `browser_click` - Click element by ref
16
- - `browser_type` - Type text (appends to existing)
17
- - `browser_fill` - Fill input (clears first, then types)
18
- - `browser_wait_for` - Wait for text or selector
19
- - `browser_resize` - Resize viewport or emulate device
12
+ | Scenario | Use |
13
+ | --------------------------------------------------- | ------- |
14
+ | Quick screenshots, simple forms, token efficiency | **CLI** |
15
+ | Complex exploratory testing, self-healing workflows | **MCP** |
16
+
17
+ ---
20
18
 
21
- ## Workflow
19
+ ## CLI Mode (Recommended)
22
20
 
23
- 1. **Navigate** to the target URL using `browser_navigate`
24
- 2. **Snapshot** to see page structure and element refs using `browser_snapshot`
25
- 3. **Interact** using element refs from snapshot (`browser_click`, `browser_fill`)
26
- 4. **Screenshot** to capture results using `browser_take_screenshot`
21
+ The CLI approach is **token-efficient** - no large schemas or verbose accessibility trees in context. Best for most automation tasks.
27
22
 
28
- ## Quick Start
23
+ ### Installation
29
24
 
25
+ ```bash
26
+ npm install -g @playwright/cli@latest
27
+ playwright-cli install --skills # Optional: install for Claude/Copilot
30
28
  ```
31
- # Navigate to page
32
- skill_mcp(skill_name="playwright", tool_name="browser_navigate", arguments='{"url": "https://example.com"}')
33
29
 
34
- # Get page structure with element refs
35
- skill_mcp(skill_name="playwright", tool_name="browser_snapshot")
30
+ ### Core Workflow
36
31
 
37
- # Click element (use ref from snapshot)
38
- skill_mcp(skill_name="playwright", tool_name="browser_click", arguments='{"element": "Submit button", "ref": "e123"}')
32
+ ```
33
+ # 1. Open browser and navigate
34
+ bash({ command: "playwright-cli open https://example.com" })
35
+
36
+ # 2. Get element refs (snapshot)
37
+ bash({ command: "playwright-cli snapshot" })
39
38
 
40
- # Fill input field
41
- skill_mcp(skill_name="playwright", tool_name="browser_fill", arguments='{"element": "Email", "ref": "e456", "text": "test@example.com"}')
39
+ # 3. Interact using refs
40
+ bash({ command: "playwright-cli fill e12 'test@example.com'" })
41
+ bash({ command: "playwright-cli click e34" })
42
42
 
43
- # Take screenshot
44
- skill_mcp(skill_name="playwright", tool_name="browser_take_screenshot", arguments='{"filename": "/tmp/result.png"}')
43
+ # 4. Screenshot
44
+ bash({ command: "playwright-cli screenshot --filename=/tmp/result.png" })
45
45
  ```
46
46
 
47
- ## Examples
47
+ ### Commands Reference
48
+
49
+ #### Navigation
50
+
51
+ | Command | Description |
52
+ | ------------ | ---------------------------------------- |
53
+ | `open [url]` | Open browser, optionally navigate to URL |
54
+ | `goto <url>` | Navigate to URL |
55
+ | `close` | Close the page/browser |
56
+ | `go-back` | Go back to previous page |
57
+ | `go-forward` | Go forward to next page |
58
+ | `reload` | Reload current page |
59
+
60
+ #### Interaction
61
+
62
+ | Command | Description |
63
+ | -------------------------- | ----------------------------------------- |
64
+ | `snapshot` | Capture page snapshot to get element refs |
65
+ | `type <text>` | Type text into focused element |
66
+ | `fill <ref> <text>` | Fill text into specific element |
67
+ | `click <ref> [button]` | Click element (left/right/middle) |
68
+ | `dblclick <ref>` | Double-click element |
69
+ | `hover <ref>` | Hover over element |
70
+ | `drag <startRef> <endRef>` | Drag and drop |
71
+ | `select <ref> <value>` | Select dropdown option |
72
+ | `check <ref>` | Check checkbox/radio |
73
+ | `uncheck <ref>` | Uncheck checkbox |
74
+ | `upload <file>` | Upload file(s) |
75
+
76
+ #### Keyboard
77
+
78
+ | Command | Description |
79
+ | --------------- | -------------------------------------- |
80
+ | `press <key>` | Press key (e.g., `Enter`, `ArrowLeft`) |
81
+ | `keydown <key>` | Hold key down |
82
+ | `keyup <key>` | Release key |
48
83
 
49
- ### Test Responsive Design
84
+ #### Screenshots & PDF
50
85
 
86
+ | Command | Description |
87
+ | ------------------------------------ | -------------------------- |
88
+ | `screenshot [ref]` | Screenshot page or element |
89
+ | `screenshot --filename=/tmp/out.png` | Save to specific path |
90
+ | `pdf` | Save page as PDF |
91
+ | `pdf --filename=page.pdf` | Save PDF to specific path |
92
+
93
+ #### Tabs
94
+
95
+ | Command | Description |
96
+ | -------------------- | -------------- |
97
+ | `tab-list` | List all tabs |
98
+ | `tab-new [url]` | Create new tab |
99
+ | `tab-close [index]` | Close tab |
100
+ | `tab-select <index>` | Switch to tab |
101
+
102
+ #### Storage
103
+
104
+ | Command | Description |
105
+ | -------------------------------- | ------------------------------- |
106
+ | `cookie-list` | List cookies |
107
+ | `cookie-get <name>` | Get cookie value |
108
+ | `cookie-set <name> <value>` | Set cookie |
109
+ | `cookie-delete <name>` | Delete cookie |
110
+ | `cookie-clear` | Clear all cookies |
111
+ | `localstorage-list` | List localStorage |
112
+ | `localstorage-get <key>` | Get localStorage value |
113
+ | `localstorage-set <key> <value>` | Set localStorage |
114
+ | `sessionstorage-*` | Same pattern for sessionStorage |
115
+
116
+ #### Network
117
+
118
+ | Command | Description |
119
+ | ------------------- | --------------------- |
120
+ | `route <pattern>` | Mock network requests |
121
+ | `route-list` | List active routes |
122
+ | `unroute [pattern]` | Remove route(s) |
123
+
124
+ #### DevTools
125
+
126
+ | Command | Description |
127
+ | ----------------------- | ----------------------------------- |
128
+ | `console [min-level]` | List console messages |
129
+ | `network` | List network requests |
130
+ | `eval <func> [ref]` | Evaluate JavaScript on page/element |
131
+ | `run-code <code>` | Run Playwright code snippet |
132
+ | `tracing-start` | Start trace recording |
133
+ | `tracing-stop` | Stop trace recording |
134
+ | `video-start` | Start video recording |
135
+ | `video-stop [filename]` | Stop video recording |
136
+
137
+ ### CLI Options
138
+
139
+ ```bash
140
+ # Headless mode
141
+ playwright-cli open https://example.com --headless
142
+
143
+ # Choose browser
144
+ playwright-cli open https://example.com --browser=firefox
145
+
146
+ # Emulate device
147
+ playwright-cli open https://example.com --device="iPhone 14"
148
+
149
+ # Named session (isolated browser)
150
+ playwright-cli -s=project1 open https://example.com
151
+
152
+ # See all options
153
+ playwright-cli --help
51
154
  ```
52
- # Navigate
53
- skill_mcp(skill_name="playwright", tool_name="browser_navigate", arguments='{"url": "http://localhost:3000"}')
54
155
 
55
- # Desktop
56
- skill_mcp(skill_name="playwright", tool_name="browser_resize", arguments='{"width": 1920, "height": 1080}')
57
- skill_mcp(skill_name="playwright", tool_name="browser_take_screenshot", arguments='{"filename": "/tmp/desktop.png"}')
156
+ ### CLI Examples
157
+
158
+ #### Test Responsive Design
58
159
 
59
- # Mobile
60
- skill_mcp(skill_name="playwright", tool_name="browser_resize", arguments='{"device": "iPhone 13"}')
61
- skill_mcp(skill_name="playwright", tool_name="browser_take_screenshot", arguments='{"filename": "/tmp/mobile.png"}')
160
+ ```typescript
161
+ // Desktop
162
+ bash({ command: "playwright-cli open http://localhost:3000" });
163
+ bash({ command: "playwright-cli resize 1920 1080" });
164
+ bash({ command: "playwright-cli screenshot --filename=/tmp/desktop.png" });
165
+
166
+ // Mobile
167
+ bash({ command: "playwright-cli resize 390 844" }); // iPhone 14
168
+ bash({ command: "playwright-cli screenshot --filename=/tmp/mobile.png" });
62
169
  ```
63
170
 
64
- ### Fill a Form
171
+ #### Fill a Form
172
+
173
+ ```typescript
174
+ bash({ command: "playwright-cli open http://localhost:3000/contact" });
175
+
176
+ // Get snapshot to see element refs
177
+ bash({ command: "playwright-cli snapshot" });
178
+
179
+ // Fill using refs from snapshot output
180
+ bash({ command: "playwright-cli fill e12 'John Doe'" });
181
+ bash({ command: "playwright-cli fill e34 'john@example.com'" });
182
+ bash({ command: "playwright-cli click e56" }); // Submit button
65
183
 
184
+ // Wait for confirmation
185
+ bash({ command: "playwright-cli eval 'document.body.innerText.includes(\"Thank you\")'" });
66
186
  ```
67
- # Navigate to form
68
- skill_mcp(skill_name="playwright", tool_name="browser_navigate", arguments='{"url": "http://localhost:3000/contact"}')
69
187
 
70
- # Get element refs
71
- skill_mcp(skill_name="playwright", tool_name="browser_snapshot")
188
+ #### Multi-Step Login Flow
72
189
 
73
- # Fill fields (use refs from snapshot)
74
- skill_mcp(skill_name="playwright", tool_name="browser_fill", arguments='{"element": "Name", "ref": "e12", "text": "John Doe"}')
75
- skill_mcp(skill_name="playwright", tool_name="browser_fill", arguments='{"element": "Email", "ref": "e34", "text": "john@example.com"}')
190
+ ```typescript
191
+ bash({ command: "playwright-cli open https://app.example.com/login" });
192
+ bash({ command: "playwright-cli snapshot" });
76
193
 
77
- # Submit
78
- skill_mcp(skill_name="playwright", tool_name="browser_click", arguments='{"element": "Submit", "ref": "e56"}')
194
+ bash({ command: "playwright-cli fill e10 'username'" });
195
+ bash({ command: "playwright-cli fill e12 'password'" });
196
+ bash({ command: "playwright-cli click e15" });
79
197
 
80
- # Wait for confirmation
81
- skill_mcp(skill_name="playwright", tool_name="browser_wait_for", arguments='{"text": "Thank you", "timeout": 5000}')
198
+ // Verify logged in
199
+ bash({ command: "playwright-cli eval 'document.querySelector(\".dashboard\") !== null'" });
200
+ bash({ command: "playwright-cli screenshot --filename=/tmp/logged-in.png" });
82
201
  ```
83
202
 
84
- ## Tips
203
+ #### Session Management
204
+
205
+ ```typescript
206
+ // List all browser sessions
207
+ bash({ command: "playwright-cli list" });
208
+
209
+ // Use named session
210
+ bash({ command: "playwright-cli -s=project1 open https://example.com" });
211
+
212
+ // Close specific session
213
+ bash({ command: "playwright-cli -s=project1 close" });
214
+
215
+ // Close all browsers
216
+ bash({ command: "playwright-cli close-all" });
217
+ ```
218
+
219
+ ---
220
+
221
+ ## MCP Mode (Fallback)
222
+
223
+ Use MCP for complex exploratory workflows or when you need persistent browser state with rich introspection.
224
+
225
+ ### Tools (8 Essential)
226
+
227
+ - `browser_navigate` - Navigate to URL
228
+ - `browser_snapshot` - Get accessibility snapshot with element refs
229
+ - `browser_take_screenshot` - Capture screenshot
230
+ - `browser_click` - Click element by ref
231
+ - `browser_type` - Type text (appends)
232
+ - `browser_fill` - Fill input (clears first, then types)
233
+ - `browser_wait_for` - Wait for text or selector
234
+ - `browser_resize` - Resize viewport or emulate device
85
235
 
86
- - **Always snapshot first** to get element refs before interacting
87
- - **Use descriptive element names** in click/fill for clarity
88
- - **Save screenshots to /tmp** for easy access
89
- - **Use device presets** for accurate mobile emulation
90
- - **Chain wait_for** after navigation for dynamic pages
236
+ ### MCP Workflow
91
237
 
92
- ## Server Options
238
+ ```typescript
239
+ // Navigate
240
+ skill_mcp(
241
+ (skill_name = "playwright"),
242
+ (tool_name = "browser_navigate"),
243
+ (arguments = '{"url": "https://example.com"}'),
244
+ );
93
245
 
94
- For advanced usage, modify `mcp.json`:
246
+ // Get element refs
247
+ skill_mcp((skill_name = "playwright"), (tool_name = "browser_snapshot"));
248
+
249
+ // Interact
250
+ skill_mcp(
251
+ (skill_name = "playwright"),
252
+ (tool_name = "browser_click"),
253
+ (arguments = '{"element": "Submit", "ref": "e12"}'),
254
+ );
255
+
256
+ // Screenshot
257
+ skill_mcp(
258
+ (skill_name = "playwright"),
259
+ (tool_name = "browser_take_screenshot"),
260
+ (arguments = '{"filename": "/tmp/result.png"}'),
261
+ );
262
+ ```
263
+
264
+ ### MCP Configuration
95
265
 
96
266
  ```json
97
267
  {
98
268
  "playwright": {
99
269
  "command": "npx",
100
- "args": ["@playwright/mcp@latest", "--headless", "--browser=firefox"],
101
- "includeTools": ["browser_navigate", "browser_snapshot", "..."]
270
+ "args": ["@playwright/mcp@latest"],
271
+ "includeTools": [
272
+ "browser_navigate",
273
+ "browser_snapshot",
274
+ "browser_take_screenshot",
275
+ "browser_click",
276
+ "browser_type",
277
+ "browser_fill",
278
+ "browser_wait_for",
279
+ "browser_resize"
280
+ ]
102
281
  }
103
282
  }
104
283
  ```
105
284
 
106
- Common options:
285
+ ---
286
+
287
+ ## Best Practices
288
+
289
+ 1. **Default to CLI** for token efficiency
290
+ 2. **Snapshot before interact** - always get element refs first
291
+ 3. **Use named sessions** (`-s=`) for isolated browser contexts
292
+ 4. **Save outputs to /tmp** for easy access and cleanup
293
+ 5. **Check console/network** for debugging: `playwright-cli console error`
294
+ 6. **Use eval for custom checks** when built-in commands aren't enough
295
+
296
+ ## Troubleshooting
297
+
298
+ | Issue | Solution |
299
+ | ------------------- | ------------------------------------------------ |
300
+ | Element not found | Re-run snapshot to get fresh refs |
301
+ | Page not loading | Check network with `playwright-cli network` |
302
+ | Timing issues | Use `eval` to check conditions before proceeding |
303
+ | Session conflicts | Use named sessions (`-s=project1`) |
304
+ | Browser won't close | `playwright-cli kill-all` as last resort |
107
305
 
108
- - `--headless` - Run without visible browser
109
- - `--browser=chrome|firefox|webkit` - Choose browser
110
- - `--device="iPhone 13"` - Emulate device
306
+ ## References
111
307
 
112
- > **Note**: This skill loads 8 essential tools. For full 17+ tools (tabs, PDF, evaluate, drag), modify `mcp.json` to add more tools to `includeTools`.
308
+ - [Playwright CLI GitHub](https://github.com/microsoft/playwright-cli)
309
+ - [Playwright MCP GitHub](https://github.com/microsoft/playwright-mcp)
310
+ - [Playwright Docs](https://playwright.dev)
package/package.json CHANGED
@@ -1,15 +1,8 @@
1
1
  {
2
2
  "name": "opencodekit",
3
- "version": "0.16.18",
3
+ "version": "0.16.20",
4
4
  "description": "CLI tool for bootstrapping and managing OpenCodeKit projects",
5
- "keywords": [
6
- "agents",
7
- "cli",
8
- "mcp",
9
- "opencode",
10
- "opencodekit",
11
- "template"
12
- ],
5
+ "keywords": ["agents", "cli", "mcp", "opencode", "opencodekit", "template"],
13
6
  "license": "MIT",
14
7
  "author": "OpenCodeKit",
15
8
  "repository": {
@@ -19,10 +12,7 @@
19
12
  "bin": {
20
13
  "ock": "dist/index.js"
21
14
  },
22
- "files": [
23
- "dist",
24
- "README.md"
25
- ],
15
+ "files": ["dist", "README.md"],
26
16
  "type": "module",
27
17
  "publishConfig": {
28
18
  "access": "public",