From cc3f124824fe6dbe8887707e75f4e5f70f5aa34a Mon Sep 17 00:00:00 2001 From: Mike Ramirez Date: Sun, 18 Jan 2026 01:24:51 -0700 Subject: [PATCH 1/3] docs: add playwright example skill for quick start - Add working playwright-example skill in .opencode/skill/ - Add Quick Start section to README with immediate test instructions - Add Example Skill section with full code snippet - Users can now test the plugin immediately after cloning --- .opencode/skill/playwright-example/SKILL.md | 54 +++++++++++++++++++++ README.md | 48 ++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 .opencode/skill/playwright-example/SKILL.md diff --git a/.opencode/skill/playwright-example/SKILL.md b/.opencode/skill/playwright-example/SKILL.md new file mode 100644 index 0000000..6ef0a32 --- /dev/null +++ b/.opencode/skill/playwright-example/SKILL.md @@ -0,0 +1,54 @@ +--- +name: playwright-example +description: Browser automation skill for web testing, scraping, and interaction. Use for end-to-end testing, screenshots, and browser automation tasks. +argument-hint: describe what you want to do (e.g., "take a screenshot of homepage", "test login flow", "fill out a form") +mcp: + playwright: + command: ["npx", "-y", "@playwright/mcp@latest"] +--- + +# Playwright Browser Automation + +This skill provides browser automation capabilities via the Playwright MCP server. + +## Available Operations + +The Playwright MCP provides tools for: + +- **Navigation**: Navigate to URLs, go back/forward, reload pages +- **Screenshots**: Capture full page or element screenshots +- **Interactions**: Click, type, select, hover, and other user interactions +- **Forms**: Fill out forms, submit data, handle file uploads +- **Assertions**: Wait for elements, check visibility, verify content +- **Scraping**: Extract text, attributes, and data from pages + +## Usage Guidelines + +1. **End-to-End Testing**: + - Automate user flows and verify functionality + - Test authentication flows + - Validate form submissions + +2. **Screenshots & Visual Testing**: + - Capture screenshots for documentation + - Compare visual states before/after changes + - Debug UI issues + +3. **Web Scraping**: + - Extract data from web pages + - Navigate through paginated content + - Handle dynamic content loading + +4. **Form Automation**: + - Fill and submit forms + - Handle multi-step wizards + - Test validation behavior + +## Example Tasks + +- "Navigate to the login page and take a screenshot" +- "Fill out the registration form with test data" +- "Click the submit button and wait for the success message" +- "Extract all product names from the catalog page" +- "Test the checkout flow from cart to confirmation" +- "Take a screenshot of the dashboard after logging in" diff --git a/README.md b/README.md index bfcf5c1..494915b 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,22 @@ Or install it locally: } ``` +## Quick Start + +This repo includes a working example skill. After installing the plugin, try: + +``` +skill(name="playwright-example") +``` + +Then use the embedded MCP: + +``` +skill_mcp(mcp_name="playwright", tool_name="browser_navigate", arguments='{"url": "https://example.com"}') +``` + +See [`.opencode/skill/playwright-example/SKILL.md`](.opencode/skill/playwright-example/SKILL.md) for the full example. + ## Usage ### 1. Create a Skill with Embedded MCP @@ -136,6 +152,38 @@ interface McpServerConfig { } ``` +## Example Skill + +Here's a complete example of a skill with an embedded MCP server (from [`.opencode/skill/playwright-example/SKILL.md`](.opencode/skill/playwright-example/SKILL.md)): + +```markdown +--- +name: playwright-example +description: Browser automation skill for web testing, scraping, and interaction. +argument-hint: describe what you want to do (e.g., "take a screenshot of homepage") +mcp: + playwright: + command: ["npx", "-y", "@playwright/mcp@latest"] +--- + +# Playwright Browser Automation + +This skill provides browser automation capabilities via the Playwright MCP server. + +## Available Operations + +- **Navigation**: Navigate to URLs, go back/forward, reload pages +- **Screenshots**: Capture full page or element screenshots +- **Interactions**: Click, type, select, hover, and other user interactions +- **Forms**: Fill out forms, submit data, handle file uploads + +## Example Tasks + +- "Navigate to the login page and take a screenshot" +- "Fill out the registration form with test data" +- "Extract all product names from the catalog page" +``` + ## License MIT From 5b68c51ad4c0a1a06e3f2037186a57e3e9810df7 Mon Sep 17 00:00:00 2001 From: Mike Ramirez Date: Sun, 18 Jan 2026 01:52:02 -0700 Subject: [PATCH 2/3] docs: align example metadata with skill --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 494915b..581e69c 100644 --- a/README.md +++ b/README.md @@ -159,8 +159,8 @@ Here's a complete example of a skill with an embedded MCP server (from [`.openco ```markdown --- name: playwright-example -description: Browser automation skill for web testing, scraping, and interaction. -argument-hint: describe what you want to do (e.g., "take a screenshot of homepage") +description: Browser automation skill for web testing, scraping, and interaction. Use for end-to-end testing, screenshots, and browser automation tasks. +argument-hint: describe what you want to do (e.g., "take a screenshot of homepage", "test login flow", "fill out a form") mcp: playwright: command: ["npx", "-y", "@playwright/mcp@latest"] From 4821d252f114d606b61e7397ec23508878eefed6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 18 Jan 2026 09:23:48 +0000 Subject: [PATCH 3/3] Initial plan