codexkit 1.0.0

package/.codex/skills/playwright/SKILL.md

@@ -0,0 +1,320 @@
+---
+name: playwright
+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.
+version: 1.0.0
+tags: [automation, mcp, testing]
+dependencies: []
+---
+
+# Playwright Browser Automation
+
+## When to Use
+
+- When you need automated browser testing, screenshots, or form workflows via Playwright CLI/MCP.
+
+## When NOT to Use
+
+- When you specifically need to control your existing Chrome session (use playwriter instead).
+
+
+## Quick Decision
+
+| Scenario                                            | Use     |
+| --------------------------------------------------- | ------- |
+| Quick screenshots, simple forms, token efficiency   | **CLI** |
+| Complex exploratory testing, self-healing workflows | **MCP** |
+
+---
+
+## CLI Mode (Recommended)
+
+The CLI approach is **token-efficient** - no large schemas or verbose accessibility trees in context. Best for most automation tasks.
+
+### Installation
+
+```bash
+npm install -g @playwright/cli@latest
+playwright-cli install --skills  # Optional: install for Claude/Copilot
+```
+
+### Core Workflow
+
+```
+# 1. Open browser and navigate
+bash({ command: "playwright-cli open https://example.com" })
+
+# 2. Get element refs (snapshot)
+bash({ command: "playwright-cli snapshot" })
+
+# 3. Interact using refs
+bash({ command: "playwright-cli fill e12 'test@example.com'" })
+bash({ command: "playwright-cli click e34" })
+
+# 4. Screenshot
+bash({ command: "playwright-cli screenshot --filename=/tmp/result.png" })
+```
+
+### Commands Reference
+
+#### Navigation
+
+| Command      | Description                              |
+| ------------ | ---------------------------------------- |
+| `open [url]` | Open browser, optionally navigate to URL |
+| `goto <url>` | Navigate to URL                          |
+| `close`      | Close the page/browser                   |
+| `go-back`    | Go back to previous page                 |
+| `go-forward` | Go forward to next page                  |
+| `reload`     | Reload current page                      |
+
+#### Interaction
+
+| Command                    | Description                               |
+| -------------------------- | ----------------------------------------- |
+| `snapshot`                 | Capture page snapshot to get element refs |
+| `type <text>`              | Type text into focused element            |
+| `fill <ref> <text>`        | Fill text into specific element           |
+| `click <ref> [button]`     | Click element (left/right/middle)         |
+| `dblclick <ref>`           | Double-click element                      |
+| `hover <ref>`              | Hover over element                        |
+| `drag <startRef> <endRef>` | Drag and drop                             |
+| `select <ref> <value>`     | Select dropdown option                    |
+| `check <ref>`              | Check checkbox/radio                      |
+| `uncheck <ref>`            | Uncheck checkbox                          |
+| `upload <file>`            | Upload file(s)                            |
+
+#### Keyboard
+
+| Command         | Description                            |
+| --------------- | -------------------------------------- |
+| `press <key>`   | Press key (e.g., `Enter`, `ArrowLeft`) |
+| `keydown <key>` | Hold key down                          |
+| `keyup <key>`   | Release key                            |
+
+#### Screenshots & PDF
+
+| Command                              | Description                |
+| ------------------------------------ | -------------------------- |
+| `screenshot [ref]`                   | Screenshot page or element |
+| `screenshot --filename=/tmp/out.png` | Save to specific path      |
+| `pdf`                                | Save page as PDF           |
+| `pdf --filename=page.pdf`            | Save PDF to specific path  |
+
+#### Tabs
+
+| Command              | Description    |
+| -------------------- | -------------- |
+| `tab-list`           | List all tabs  |
+| `tab-new [url]`      | Create new tab |
+| `tab-close [index]`  | Close tab      |
+| `tab-select <index>` | Switch to tab  |
+
+#### Storage
+
+| Command                          | Description                     |
+| -------------------------------- | ------------------------------- |
+| `cookie-list`                    | List cookies                    |
+| `cookie-get <name>`              | Get cookie value                |
+| `cookie-set <name> <value>`      | Set cookie                      |
+| `cookie-delete <name>`           | Delete cookie                   |
+| `cookie-clear`                   | Clear all cookies               |
+| `localstorage-list`              | List localStorage               |
+| `localstorage-get <key>`         | Get localStorage value          |
+| `localstorage-set <key> <value>` | Set localStorage                |
+| `sessionstorage-*`               | Same pattern for sessionStorage |
+
+#### Network
+
+| Command             | Description           |
+| ------------------- | --------------------- |
+| `route <pattern>`   | Mock network requests |
+| `route-list`        | List active routes    |
+| `unroute [pattern]` | Remove route(s)       |
+
+#### DevTools
+
+| Command                 | Description                         |
+| ----------------------- | ----------------------------------- |
+| `console [min-level]`   | List console messages               |
+| `network`               | List network requests               |
+| `eval <func> [ref]`     | Evaluate JavaScript on page/element |
+| `run-code <code>`       | Run Playwright code snippet         |
+| `tracing-start`         | Start trace recording               |
+| `tracing-stop`          | Stop trace recording                |
+| `video-start`           | Start video recording               |
+| `video-stop [filename]` | Stop video recording                |
+
+### CLI Options
+
+```bash
+# Headless mode
+playwright-cli open https://example.com --headless
+
+# Choose browser
+playwright-cli open https://example.com --browser=firefox
+
+# Emulate device
+playwright-cli open https://example.com --device="iPhone 14"
+
+# Named session (isolated browser)
+playwright-cli -s=project1 open https://example.com
+
+# See all options
+playwright-cli --help
+```
+
+### CLI Examples
+
+#### Test Responsive Design
+
+```typescript
+// Desktop
+bash({ command: "playwright-cli open http://localhost:3000" });
+bash({ command: "playwright-cli resize 1920 1080" });
+bash({ command: "playwright-cli screenshot --filename=/tmp/desktop.png" });
+
+// Mobile
+bash({ command: "playwright-cli resize 390 844" }); // iPhone 14
+bash({ command: "playwright-cli screenshot --filename=/tmp/mobile.png" });
+```
+
+#### Fill a Form
+
+```typescript
+bash({ command: "playwright-cli open http://localhost:3000/contact" });
+
+// Get snapshot to see element refs
+bash({ command: "playwright-cli snapshot" });
+
+// Fill using refs from snapshot output
+bash({ command: "playwright-cli fill e12 'John Doe'" });
+bash({ command: "playwright-cli fill e34 'john@example.com'" });
+bash({ command: "playwright-cli click e56" }); // Submit button
+
+// Wait for confirmation
+bash({ command: "playwright-cli eval 'document.body.innerText.includes(\"Thank you\")'" });
+```
+
+#### Multi-Step Login Flow
+
+```typescript
+bash({ command: "playwright-cli open https://app.example.com/login" });
+bash({ command: "playwright-cli snapshot" });
+
+bash({ command: "playwright-cli fill e10 'username'" });
+bash({ command: "playwright-cli fill e12 'password'" });
+bash({ command: "playwright-cli click e15" });
+
+// Verify logged in
+bash({ command: "playwright-cli eval 'document.querySelector(\".dashboard\") !== null'" });
+bash({ command: "playwright-cli screenshot --filename=/tmp/logged-in.png" });
+```
+
+#### Session Management
+
+```typescript
+// List all browser sessions
+bash({ command: "playwright-cli list" });
+
+// Use named session
+bash({ command: "playwright-cli -s=project1 open https://example.com" });
+
+// Close specific session
+bash({ command: "playwright-cli -s=project1 close" });
+
+// Close all browsers
+bash({ command: "playwright-cli close-all" });
+```
+
+---
+
+## MCP Mode (Fallback)
+
+Use MCP for complex exploratory workflows or when you need persistent browser state with rich introspection.
+
+### Tools (8 Essential)
+
+- `browser_navigate` - Navigate to URL
+- `browser_snapshot` - Get accessibility snapshot with element refs
+- `browser_take_screenshot` - Capture screenshot
+- `browser_click` - Click element by ref
+- `browser_type` - Type text (appends)
+- `browser_fill` - Fill input (clears first, then types)
+- `browser_wait_for` - Wait for text or selector
+- `browser_resize` - Resize viewport or emulate device
+
+### MCP Workflow
+
+```typescript
+// Navigate
+skill_mcp(
+  (skill_name = "playwright"),
+  (tool_name = "browser_navigate"),
+  (arguments = '{"url": "https://example.com"}'),
+);
+
+// Get element refs
+skill_mcp((skill_name = "playwright"), (tool_name = "browser_snapshot"));
+
+// Interact
+skill_mcp(
+  (skill_name = "playwright"),
+  (tool_name = "browser_click"),
+  (arguments = '{"element": "Submit", "ref": "e12"}'),
+);
+
+// Screenshot
+skill_mcp(
+  (skill_name = "playwright"),
+  (tool_name = "browser_take_screenshot"),
+  (arguments = '{"filename": "/tmp/result.png"}'),
+);
+```
+
+### MCP Configuration
+
+```json
+{
+  "playwright": {
+    "command": "npx",
+    "args": ["@playwright/mcp@latest"],
+    "includeTools": [
+      "browser_navigate",
+      "browser_snapshot",
+      "browser_take_screenshot",
+      "browser_click",
+      "browser_type",
+      "browser_fill",
+      "browser_wait_for",
+      "browser_resize"
+    ]
+  }
+}
+```
+
+---
+
+## Best Practices
+
+1. **Default to CLI** for token efficiency
+2. **Snapshot before interact** - always get element refs first
+3. **Use named sessions** (`-s=`) for isolated browser contexts
+4. **Save outputs to /tmp** for easy access and cleanup
+5. **Check console/network** for debugging: `playwright-cli console error`
+6. **Use eval for custom checks** when built-in commands aren't enough
+
+## Troubleshooting
+
+| Issue               | Solution                                         |
+| ------------------- | ------------------------------------------------ |
+| Element not found   | Re-run snapshot to get fresh refs                |
+| Page not loading    | Check network with `playwright-cli network`      |
+| Timing issues       | Use `eval` to check conditions before proceeding |
+| Session conflicts   | Use named sessions (`-s=project1`)               |
+| Browser won't close | `playwright-cli kill-all` as last resort         |
+
+## References
+
+- [Playwright CLI GitHub](https://github.com/microsoft/playwright-cli)
+- [Playwright MCP GitHub](https://github.com/microsoft/playwright-mcp)
+- [Playwright Docs](https://playwright.dev)

package/.codex/skills/playwright/mcp.json

@@ -0,0 +1,16 @@
+{
+  "playwright": {
+    "command": "npx",
+    "args": ["@playwright/mcp@latest"],
+    "includeTools": [
+      "browser_navigate",
+      "browser_snapshot",
+      "browser_take_screenshot",
+      "browser_click",
+      "browser_type",
+      "browser_fill",
+      "browser_wait_for",
+      "browser_resize"
+    ]
+  }
+}

package/.codex/skills/playwriter/SKILL.md

@@ -0,0 +1,158 @@
+---
+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"]
+version: 1.0.0
+tags: [automation, mcp]
+dependencies: []
+---
+
+# Playwriter Browser Automation (MCP)
+
+## When to Use
+
+- When you need to automate your existing Chrome browser session via the Playwriter extension.
+
+## When NOT to Use
+
+- When you need a fresh, isolated browser instance without your local extensions/cookies.
+
+
+- **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/.codex/skills/polar/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: polar
+description: Polar payment platform integration for monetization, subscriptions, and license keys. Use when implementing checkout, managing products, or building customer portals.
+version: 1.0.0
+tags: [integration, mcp]
+dependencies: []
+---
+
+# Polar Integration
+
+## When to Use
+
+- When implementing Polar checkout, subscriptions, or license key flows.
+
+## When NOT to Use
+
+- When payments are handled by a different platform.
+
+
+## What I Do
+
+- Guide implementation of Polar checkout and payments
+- Help with subscription management and billing
+- Assist with license key validation
+- Set up webhook handlers for payment events
+
+## When to Use Me
+
+- Implementing checkout flow for a product
+- Adding subscription billing to an app
+- Setting up license key validation
+- Building a customer portal
+- Handling payment webhooks
+
+## Quick Start
+
+```bash
+npm install @polar-sh/sdk
+```
+
+```typescript
+import { Polar } from "@polar-sh/sdk";
+
+const polar = new Polar({
+  accessToken: process.env.POLAR_ACCESS_TOKEN!,
+  server: "production", // or "sandbox"
+});
+```
+
+## Key APIs
+
+| API                     | Purpose                           |
+| ----------------------- | --------------------------------- |
+| `polar.products.*`      | Create/manage products and prices |
+| `polar.checkouts.*`     | Create checkout sessions          |
+| `polar.subscriptions.*` | Manage subscriptions              |
+| `polar.orders.*`        | View order history                |
+| `polar.customers.*`     | Customer management               |
+| `polar.licenseKeys.*`   | Issue and validate licenses       |
+
+## Environment Variables
+
+| Variable               | Description                     |
+| ---------------------- | ------------------------------- |
+| `POLAR_ACCESS_TOKEN`   | Organization Access Token (OAT) |
+| `POLAR_WEBHOOK_SECRET` | Webhook signing secret          |
+
+## Common Patterns
+
+### Create Checkout
+
+```typescript
+const checkout = await polar.checkouts.create({
+  productId: "prod_xxx",
+  successUrl: "https://myapp.com/success",
+});
+// Redirect to checkout.url
+```
+
+### Validate License Key
+
+```typescript
+const result = await polar.licenseKeys.validate({
+  key: "XXXX-XXXX-XXXX-XXXX",
+  organizationId: "org_xxx",
+});
+```
+
+### Handle Webhook
+
+```typescript
+import { validateEvent } from "@polar-sh/sdk/webhooks";
+
+const event = validateEvent(body, signature, process.env.POLAR_WEBHOOK_SECRET!);
+// event.type: "subscription.created", "order.created", etc.
+```
+
+## Links
+
+- [Dashboard](https://polar.sh)
+- [API Docs](https://docs.polar.sh/api-reference)
+- [SDK](https://www.npmjs.com/package/@polar-sh/sdk)