Menu
Interact with the running VSCode extension via Playwright. Use when automating, testing, or debugging the OpenCode webview UI.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
SolidJS framework development skill for building reactive web applications with fine-grained reactivity. Use when working with SolidJS projects including: (1) Creating components with signals, stores, and effects, (2) Implementing reactive state management, (3) Using control flow components (Show, For, Switch/Match), (4) Setting up routing with Solid Router, (5) Building full-stack apps with SolidStart, (6) Data fetching with createResource, (7) Context API for shared state, (8) SSR/SSG configuration. Triggers: solid, solidjs, solid-js, solid start, solidstart, createSignal, createStore, createEffect.
Create a spec sheet for the given feature/fix request in specs/ directory. Use when planning a significant new feature or complex fix.
Browser automation CLI using Playwright. Use when automating browser workflows, filling forms, clicking elements, scraping pages, or debugging web issues.
Review a spec for under-specified areas, bugs, and adherence to the generate-spec skill. Use when asked to review, critique, or check a spec.
Update AGENTS.md files based on session learnings about a topic. Use when documenting patterns, commands, or conventions discovered during development.
Stage all changes and commit with appropriate message, showing changed files and edits. Use when you need to create a git commit.
| name | dev-command |
| description | Interact with the running VSCode extension via Playwright. Use when automating, testing, or debugging the OpenCode webview UI. |
Launch and interact with the VSCode extension using pnpm dev.
pnpm dev # Launch VSCode in background tmux session
pnpm dev exec "<code>" # Execute JS in the webview (frame/page/browser available)
pnpm dev snapshot # Screenshot the VSCode window
pnpm dev stop # Stop the session
The exec command provides three objects:
frame — the webview active-frame (SolidJS UI). Use this for most interactions.page — the top-level VSCode Electron page. Use for screenshots or VSCode-level actions.browser — the Playwright Browser instance.All selectors below target elements inside frame.
# Type a message
pnpm dev exec "await frame.locator('[contenteditable]').pressSequentially('hello world')"
# Submit (Cmd+Enter)
pnpm dev exec "await frame.locator('[contenteditable]').press('Meta+Enter')"
# Clear and retype
pnpm dev exec "await frame.locator('[contenteditable]').fill(''); await frame.locator('[contenteditable]').pressSequentially('new text')"
# Stop generation
pnpm dev exec "await frame.locator('.shortcut-button--stop').click()"
# Submit button
pnpm dev exec "await frame.locator('.shortcut-button--secondary').click()"
# New session
pnpm dev exec "await frame.locator('.new-session-button').click()"
# Session switcher
pnpm dev exec "await frame.locator('.session-switcher-button').click()"
# Allow once
pnpm dev exec "await frame.locator('.permission-button--primary').click()"
# Allow always
pnpm dev exec "await frame.locator('button[aria-label=\"Allow always\"]').click()"
# Reject
pnpm dev exec "await frame.locator('button[aria-label=\"Reject\"]').click()"
# Allow all visible permissions
pnpm dev exec "const btns = await frame.locator('.permission-button--primary').all(); for (const b of btns) await b.click()"
# Get all message texts
pnpm dev exec "const msgs = await frame.locator('.message-text').allTextContents(); return msgs"
# Get last assistant message
pnpm dev exec "const msgs = await frame.locator('.message--assistant .message-text').allTextContents(); return msgs[msgs.length - 1]"
# Wait for assistant response
pnpm dev exec "await frame.locator('.message--assistant').last().waitFor()"
# Check if thinking
pnpm dev exec "return await frame.locator('.loading-indicator').isVisible()"
# Get input text
pnpm dev exec "return await frame.locator('[contenteditable]').textContent()"
# Count messages
pnpm dev exec "return await frame.locator('.message').count()"
# Get session error
pnpm dev exec "return await frame.locator('.session-error').textContent()"
undefined as a second argument to frame.evaluate(() => ...) — it causes "Too many arguments" errors. Just call with one arg.page, not frame — CDP screenshot only works on top-level targets.exec command handles this automatically.pressSequentially instead of fill for realistic typing. fill works for clearing.