@phuetz/code-buddy 0.3.0 → 1.0.0-rc.8

package/.codebuddy/skills/bundled/playwright/SKILL.md

@@ -1,520 +0,0 @@
----
-name: playwright
-version: 1.0.0
-description: Browser automation, end-to-end testing, web scraping, form filling, screenshots, and PDF generation
-author: Code Buddy
-tags: browser, automation, testing, scraping, e2e, screenshots, pdf
-env:
-  PLAYWRIGHT_BROWSERS_PATH: ""
-  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: ""
----
-
-# Playwright Browser Automation
-
-Playwright is a powerful browser automation framework that supports Chromium, Firefox, and WebKit. It enables reliable end-to-end testing, web scraping, form automation, screenshot capture, and PDF generation with a modern async API.
-
-## Direct Control (CLI / API / Scripting)
-
-### Installation
-
-```bash
-# Install Playwright
-npm install -D @playwright/test playwright
-
-# Install browsers (Chromium, Firefox, WebKit)
-npx playwright install
-
-# Install specific browser only
-npx playwright install chromium
-
-# Install with system dependencies
-npx playwright install --with-deps
-```
-
-### Node.js API Examples
-
-```javascript
-const { chromium, firefox, webkit } = require('playwright');
-
-// Basic page navigation and scraping
-async function scrapePage(url) {
-  const browser = await chromium.launch({ headless: true });
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  await page.goto(url);
-  await page.waitForLoadState('networkidle');
-
-  // Extract data
-  const title = await page.title();
-  const content = await page.textContent('body');
-  const links = await page.$$eval('a', anchors =>
-    anchors.map(a => ({ text: a.textContent, href: a.href }))
-  );
-
-  await browser.close();
-  return { title, content, links };
-}
-
-// Form filling and submission
-async function fillForm(url, formData) {
-  const browser = await chromium.launch({ headless: false });
-  const page = await browser.newPage();
-
-  await page.goto(url);
-
-  // Fill form fields
-  await page.fill('input[name="username"]', formData.username);
-  await page.fill('input[name="email"]', formData.email);
-  await page.fill('textarea[name="message"]', formData.message);
-
-  // Select dropdown
-  await page.selectOption('select[name="country"]', formData.country);
-
-  // Check checkbox
-  await page.check('input[type="checkbox"][name="terms"]');
-
-  // Click submit and wait for navigation
-  await Promise.all([
-    page.waitForNavigation(),
-    page.click('button[type="submit"]')
-  ]);
-
-  // Verify success
-  const successMessage = await page.textContent('.success-message');
-  await browser.close();
-  return successMessage;
-}
-
-// Screenshot capture
-async function captureScreenshot(url, outputPath, options = {}) {
-  const browser = await chromium.launch();
-  const page = await browser.newPage({
-    viewport: { width: 1920, height: 1080 }
-  });
-
-  await page.goto(url);
-  await page.waitForLoadState('networkidle');
-
-  // Full page screenshot
-  await page.screenshot({
-    path: outputPath,
-    fullPage: options.fullPage || false,
-    type: options.type || 'png'
-  });
-
-  // Element screenshot
-  if (options.selector) {
-    const element = await page.$(options.selector);
-    await element.screenshot({ path: outputPath });
-  }
-
-  await browser.close();
-}
-
-// PDF generation
-async function generatePDF(url, outputPath, options = {}) {
-  const browser = await chromium.launch();
-  const page = await browser.newPage();
-
-  await page.goto(url);
-  await page.waitForLoadState('networkidle');
-
-  await page.pdf({
-    path: outputPath,
-    format: options.format || 'A4',
-    printBackground: true,
-    margin: options.margin || { top: '1cm', bottom: '1cm', left: '1cm', right: '1cm' }
-  });
-
-  await browser.close();
-}
-
-// Handle authentication
-async function loginAndNavigate(loginUrl, targetUrl, credentials) {
-  const browser = await chromium.launch();
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  // Login
-  await page.goto(loginUrl);
-  await page.fill('#username', credentials.username);
-  await page.fill('#password', credentials.password);
-  await page.click('button[type="submit"]');
-
-  // Wait for login to complete
-  await page.waitForURL(/dashboard|home/);
-
-  // Save authentication state
-  await context.storageState({ path: 'auth.json' });
-
-  // Navigate to target with auth
-  await page.goto(targetUrl);
-  const data = await page.evaluate(() => document.body.innerText);
-
-  await browser.close();
-  return data;
-}
-
-// Advanced: Intercept network requests
-async function interceptRequests(url) {
-  const browser = await chromium.launch();
-  const page = await browser.newPage();
-
-  // Block images and stylesheets for faster loading
-  await page.route('**/*', route => {
-    const type = route.request().resourceType();
-    if (type === 'image' || type === 'stylesheet') {
-      route.abort();
-    } else {
-      route.continue();
-    }
-  });
-
-  // Listen to API responses
-  const apiData = [];
-  page.on('response', async response => {
-    if (response.url().includes('/api/')) {
-      apiData.push({
-        url: response.url(),
-        status: response.status(),
-        body: await response.json().catch(() => null)
-      });
-    }
-  });
-
-  await page.goto(url);
-  await page.waitForTimeout(3000);
-
-  await browser.close();
-  return apiData;
-}
-
-// Multi-browser testing
-async function testAcrossBrowsers(url, testFn) {
-  const browsers = [chromium, firefox, webkit];
-  const results = {};
-
-  for (const browserType of browsers) {
-    const browser = await browserType.launch();
-    const page = await browser.newPage();
-
-    try {
-      await page.goto(url);
-      results[browserType.name()] = await testFn(page);
-    } catch (error) {
-      results[browserType.name()] = { error: error.message };
-    }
-
-    await browser.close();
-  }
-
-  return results;
-}
-```
-
-### Python API Examples
-
-```python
-from playwright.sync_api import sync_playwright
-import json
-
-# Basic scraping
-def scrape_page(url):
-    with sync_playwright() as p:
-        browser = p.chromium.launch(headless=True)
-        page = browser.new_page()
-        page.goto(url)
-
-        title = page.title()
-        content = page.inner_text('body')
-
-        browser.close()
-        return {'title': title, 'content': content}
-
-# Form automation
-def automate_form(url, form_data):
-    with sync_playwright() as p:
-        browser = p.chromium.launch(headless=False)
-        page = browser.new_page()
-        page.goto(url)
-
-        page.fill('input[name="email"]', form_data['email'])
-        page.fill('input[name="password"]', form_data['password'])
-        page.click('button[type="submit"]')
-
-        page.wait_for_load_state('networkidle')
-        result = page.text_content('.result')
-
-        browser.close()
-        return result
-
-# Screenshot with mobile viewport
-def mobile_screenshot(url, output):
-    with sync_playwright() as p:
-        browser = p.chromium.launch()
-        context = browser.new_context(
-            viewport={'width': 375, 'height': 667},
-            user_agent='Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'
-        )
-        page = context.new_page()
-        page.goto(url)
-        page.screenshot(path=output, full_page=True)
-        browser.close()
-```
-
-### CLI Commands
-
-```bash
-# Run Playwright tests
-npx playwright test
-
-# Run specific test file
-npx playwright test tests/login.spec.ts
-
-# Run tests in headed mode (see browser)
-npx playwright test --headed
-
-# Run tests in specific browser
-npx playwright test --project=firefox
-
-# Debug tests with Playwright Inspector
-npx playwright test --debug
-
-# Generate code from browser interactions (codegen)
-npx playwright codegen https://example.com
-
-# Generate code with custom viewport
-npx playwright codegen --viewport-size=1280,720 https://example.com
-
-# Show trace viewer
-npx playwright show-trace trace.zip
-
-# Show HTML report
-npx playwright show-report
-
-# Install system dependencies
-npx playwright install-deps
-
-# Clear browser cache
-rm -rf ~/.cache/ms-playwright
-```
-
-## MCP Server Integration
-
-Add to `.codebuddy/mcp.json`:
-
-```json
-{
-  "mcpServers": {
-    "playwright": {
-      "command": "npx",
-      "args": [
-        "-y",
-        "@executeautomation/playwright-mcp-server"
-      ],
-      "env": {
-        "PLAYWRIGHT_BROWSERS_PATH": "~/.cache/ms-playwright"
-      }
-    }
-  }
-}
-```
-
-### Available MCP Tools
-
-**From microsoft/playwright-mcp:**
-- `playwright_navigate` - Navigate to URL
-- `playwright_click` - Click element by selector
-- `playwright_fill` - Fill input field
-- `playwright_screenshot` - Capture screenshot
-- `playwright_evaluate` - Execute JavaScript in page context
-- `playwright_close` - Close browser/page
-
-**From executeautomation/playwright-mcp-server:**
-- `playwright_launch_browser` - Launch browser instance
-- `playwright_goto` - Navigate to URL
-- `playwright_click_element` - Click element with wait
-- `playwright_fill_form` - Fill form fields
-- `playwright_get_text` - Extract text content
-- `playwright_wait_for_selector` - Wait for element
-- `playwright_screenshot_element` - Screenshot specific element
-- `playwright_pdf` - Generate PDF
-- `playwright_execute_script` - Run JavaScript
-
-## Common Workflows
-
-### 1. Web Scraping: Extract Product Information
-
-```javascript
-// Step 1: Launch browser and navigate
-const browser = await chromium.launch({ headless: true });
-const page = await browser.newPage();
-await page.goto('https://example-shop.com/products');
-
-// Step 2: Wait for products to load
-await page.waitForSelector('.product-card', { timeout: 10000 });
-
-// Step 3: Extract product data
-const products = await page.$$eval('.product-card', cards => {
-  return cards.map(card => ({
-    name: card.querySelector('.product-name')?.textContent,
-    price: card.querySelector('.product-price')?.textContent,
-    image: card.querySelector('img')?.src,
-    url: card.querySelector('a')?.href
-  }));
-});
-
-// Step 4: Paginate through results
-let allProducts = [...products];
-while (await page.$('.next-page')) {
-  await page.click('.next-page');
-  await page.waitForLoadState('networkidle');
-  const moreProducts = await page.$$eval('.product-card', /* ... */);
-  allProducts = [...allProducts, ...moreProducts];
-}
-
-// Step 5: Save results and cleanup
-await fs.writeFile('products.json', JSON.stringify(allProducts, null, 2));
-await browser.close();
-```
-
-### 2. E2E Testing: Login Flow Verification
-
-```javascript
-// Step 1: Setup test with authentication state
-const browser = await chromium.launch();
-const context = await browser.newContext();
-const page = await context.newPage();
-
-// Step 2: Navigate to login page
-await page.goto('https://app.example.com/login');
-await page.fill('#email', 'test@example.com');
-await page.fill('#password', 'SecurePassword123');
-
-// Step 3: Submit and verify redirect
-await Promise.all([
-  page.waitForNavigation({ url: /dashboard/ }),
-  page.click('button[type="submit"]')
-]);
-
-// Step 4: Verify authenticated state
-await expect(page.locator('.user-profile')).toBeVisible();
-const username = await page.textContent('.user-name');
-expect(username).toBe('Test User');
-
-// Step 5: Test logout
-await page.click('.logout-button');
-await page.waitForURL(/login/);
-await browser.close();
-```
-
-### 3. Form Automation: Multi-Step Checkout
-
-```javascript
-// Step 1: Navigate to checkout
-const browser = await chromium.launch({ headless: false });
-const page = await browser.newPage();
-await page.goto('https://shop.example.com/checkout');
-
-// Step 2: Fill shipping information
-await page.fill('#firstName', 'John');
-await page.fill('#lastName', 'Doe');
-await page.fill('#address', '123 Main St');
-await page.fill('#city', 'San Francisco');
-await page.selectOption('#state', 'CA');
-await page.fill('#zip', '94105');
-await page.click('button.continue-to-payment');
-
-// Step 3: Fill payment details
-await page.waitForSelector('#card-number');
-await page.fill('#card-number', '4111111111111111');
-await page.fill('#card-expiry', '12/25');
-await page.fill('#card-cvc', '123');
-
-// Step 4: Review and submit order
-await page.click('button.continue-to-review');
-await page.waitForSelector('.order-summary');
-const total = await page.textContent('.total-amount');
-console.log(`Order total: ${total}`);
-
-// Step 5: Complete purchase
-await page.click('button.place-order');
-await page.waitForSelector('.confirmation-number');
-const confirmationNumber = await page.textContent('.confirmation-number');
-await browser.close();
-return confirmationNumber;
-```
-
-### 4. Visual Testing: Screenshot Comparison
-
-```javascript
-// Step 1: Setup baseline screenshot
-const browser = await chromium.launch();
-const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
-await page.goto('https://example.com');
-await page.screenshot({ path: 'baseline.png', fullPage: true });
-
-// Step 2: Make changes (e.g., deploy new version)
-// ... deployment happens ...
-
-// Step 3: Capture new screenshot
-await page.goto('https://example.com');
-await page.screenshot({ path: 'current.png', fullPage: true });
-
-// Step 4: Compare screenshots (using pixelmatch or similar)
-const baseline = await fs.readFile('baseline.png');
-const current = await fs.readFile('current.png');
-const diff = compareImages(baseline, current);
-
-// Step 5: Report differences
-if (diff.pixelsDifferent > 100) {
-  console.error(`Visual regression detected: ${diff.pixelsDifferent} pixels differ`);
-  await fs.writeFile('diff.png', diff.image);
-}
-await browser.close();
-```
-
-### 5. Monitoring: Check Website Availability
-
-```javascript
-// Step 1: Setup monitoring function
-async function monitorWebsite(url, checks) {
-  const browser = await chromium.launch({ headless: true });
-  const page = await browser.newPage();
-  const results = { url, timestamp: new Date(), checks: {} };
-
-  // Step 2: Navigate and measure load time
-  const startTime = Date.now();
-  const response = await page.goto(url, { waitUntil: 'networkidle' });
-  results.loadTime = Date.now() - startTime;
-  results.statusCode = response.status();
-
-  // Step 3: Verify expected elements
-  for (const check of checks) {
-    const element = await page.$(check.selector);
-    results.checks[check.name] = {
-      found: !!element,
-      text: element ? await element.textContent() : null
-    };
-  }
-
-  // Step 4: Check for errors in console
-  const logs = [];
-  page.on('console', msg => logs.push({ type: msg.type(), text: msg.text() }));
-  await page.waitForTimeout(2000);
-  results.consoleLogs = logs.filter(l => l.type === 'error');
-
-  // Step 5: Cleanup and return results
-  await browser.close();
-  return results;
-}
-
-// Usage
-const checks = [
-  { name: 'header', selector: 'header.main-nav' },
-  { name: 'content', selector: 'main.content' },
-  { name: 'footer', selector: 'footer' }
-];
-const status = await monitorWebsite('https://example.com', checks);
-```

package/.codebuddy/skills/bundled/prepare-pr/SKILL.md

@@ -1,67 +0,0 @@
----
-name: prepare-pr
-version: 1.0.0
-description: Prepare a GitHub PR for merge by fixing review findings, running checks, and pushing updates. Use after review-pr. Never merge or push to main.
-author: Code Buddy
-tags: git, github, pr, prepare, fix
----
-
-# Prepare PR
-
-## Overview
-
-Prepare a PR branch for merge with review fixes, green CI, and an updated head branch.
-
-## Inputs
-
-- Ask for PR number or URL if not provided.
-- If review findings exist, use them to guide fixes.
-
-## Safety
-
-- **Never push to `main` or `origin/main`.** Push only to the PR head branch.
-- **Never run bare `git push`.** Always specify remote and branch explicitly.
-- **Do not run `git add -A` or `git add .`.** Stage only specific changed files.
-- Do not run `git clean -fdx`.
-
-## Workflow
-
-### 1. Checkout the PR branch
-```bash
-gh pr checkout <number>
-```
-
-### 2. Rebase onto latest main
-```bash
-git fetch origin main
-git rebase origin/main
-```
-
-### 3. Fix review findings
-Address BLOCKER and IMPORTANT issues from the review. For each fix:
-- Make the minimal change needed
-- Stage only the specific files changed
-- Commit with a descriptive message: `fix: address review — <description>`
-
-### 4. Run validation
-```bash
-npm run validate  # or the project's equivalent: lint + typecheck + test
-```
-
-### 5. Fix any validation errors
-If lint/typecheck/test fails, fix and commit.
-
-### 6. Push to PR branch
-```bash
-git push origin HEAD:<head-branch> --force-with-lease
-```
-
-### 7. Verify PR is up to date
-```bash
-gh pr checks <number>
-gh pr view <number> --json mergeable
-```
-
-## Output
-
-Confirm: "PR #<number> is prepared and ready for merge."

package/.codebuddy/skills/bundled/project-best-practices/SKILL.md

@@ -1,123 +0,0 @@
----
-name: project-best-practices
-version: 1.0.0
-description: Best practices for initializing and structuring software projects
-author: Code Buddy
-tags: project, init, architecture, best-practices
----
-
-# Project Best Practices
-
-When creating or scaffolding a new project, follow these guidelines.
-
-## Project Initialization
-
-1. **Always start with a package manager lockfile** — run `npm init -y` (or `pnpm init`) then install dependencies to generate a lockfile immediately.
-2. **Use TypeScript by default** — unless the user explicitly asks for JavaScript. Configure `strict: true` in `tsconfig.json`.
-3. **Add a `.gitignore`** from the start — include `node_modules/`, `dist/`, `.env`, coverage reports, OS files.
-4. **Initialize git** — `git init` with an initial commit after scaffolding.
-5. **Create a README.md** — with project name, description, setup instructions, and available scripts.
-
-## Directory Structure
-
-Follow a standard layout based on project type:
-
-### Node.js / Backend
-```
-src/
-  index.ts          # Entry point
-  routes/           # HTTP route handlers
-  services/         # Business logic
-  models/           # Data models / schemas
-  utils/            # Shared utilities
-  middleware/       # Express/Fastify middleware
-  types/            # TypeScript type definitions
-tests/              # Test files mirroring src/
-.env.example        # Environment variable template (never commit .env)
-```
-
-### Frontend (React/Vue/Svelte)
-```
-src/
-  components/       # Reusable UI components
-  pages/            # Route-level views
-  hooks/            # Custom hooks
-  services/         # API client / business logic
-  utils/            # Helpers
-  types/            # TypeScript types
-  assets/           # Static files (images, fonts)
-public/             # Public static assets
-```
-
-### Library / Package
-```
-src/
-  index.ts          # Public API exports
-  lib/              # Internal implementation
-  types/            # Type definitions
-tests/
-examples/           # Usage examples
-```
-
-## Code Quality
-
-1. **Linter** — Add ESLint with a flat config (`eslint.config.js`). Prefer `@typescript-eslint` rules.
-2. **Formatter** — Add Prettier with consistent config (single quotes, semicolons, 2-space indent).
-3. **Pre-commit hooks** — Use `husky` + `lint-staged` to run lint/format on commit.
-4. **EditorConfig** — Add `.editorconfig` for consistent formatting across editors.
-
-## Testing
-
-1. **Test framework** — Use Jest (with `ts-jest`) or Vitest. Configure in `package.json` or dedicated config file.
-2. **Test structure** — Mirror `src/` in `tests/`. Name files `*.test.ts` or `*.spec.ts`.
-3. **Coverage** — Configure coverage reporting. Aim for 80%+ on critical paths.
-4. **Scripts** — Add `npm test`, `npm run test:watch`, `npm run test:coverage`.
-
-## Dependencies
-
-1. **Pin versions** — Use exact versions or lockfiles for reproducibility.
-2. **Separate dev dependencies** — `devDependencies` for tools, `dependencies` for runtime.
-3. **Minimize dependencies** — Prefer built-in Node.js APIs (fs, path, crypto, http) over trivial packages.
-4. **Audit regularly** — Run `npm audit` to check for vulnerabilities.
-
-## Environment & Configuration
-
-1. **Use `.env` files** — with `dotenv` or framework-native support. Never commit secrets.
-2. **Provide `.env.example`** — document all required environment variables with descriptions.
-3. **Validate config at startup** — fail fast if required variables are missing.
-
-## Scripts (package.json)
-
-Always include these npm scripts:
-```json
-{
-  "dev": "tsx src/index.ts",
-  "build": "tsc",
-  "start": "node dist/index.js",
-  "test": "jest",
-  "test:watch": "jest --watch",
-  "test:coverage": "jest --coverage",
-  "lint": "eslint src/",
-  "lint:fix": "eslint src/ --fix",
-  "typecheck": "tsc --noEmit",
-  "validate": "npm run lint && npm run typecheck && npm test"
-}
-```
-
-## Security
-
-1. **Never hardcode secrets** — use environment variables.
-2. **Validate all user input** — at system boundaries (API endpoints, CLI args).
-3. **Use parameterized queries** — never concatenate SQL strings.
-4. **Set security headers** — `helmet` for Express, built-in for Fastify.
-5. **CORS** — configure explicitly, never use `*` in production.
-
-## Commit Conventions
-
-Use Conventional Commits:
-- `feat(scope): description` — new feature
-- `fix(scope): description` — bug fix
-- `docs: description` — documentation
-- `test: description` — adding tests
-- `refactor: description` — code restructure
-- `chore: description` — tooling, deps, config