buildanything 1.7.1 → 2.0.0

package/skills/web/docker-patterns/SKILL.md

@@ -0,0 +1,364 @@
+---
+name: docker-patterns
+description: Docker and Docker Compose patterns for local development, container security, networking, volume strategies, and multi-service orchestration.
+origin: ECC
+---
+
+# Docker Patterns
+
+Docker and Docker Compose best practices for containerized development.
+
+## When to Activate
+
+- Setting up Docker Compose for local development
+- Designing multi-container architectures
+- Troubleshooting container networking or volume issues
+- Reviewing Dockerfiles for security and size
+- Migrating from local dev to containerized workflow
+
+## Docker Compose for Local Development
+
+### Standard Web App Stack
+
+```yaml
+# docker-compose.yml
+services:
+  app:
+    build:
+      context: .
+      target: dev                     # Use dev stage of multi-stage Dockerfile
+    ports:
+      - "3000:3000"
+    volumes:
+      - .:/app                        # Bind mount for hot reload
+      - /app/node_modules             # Anonymous volume -- preserves container deps
+    environment:
+      - DATABASE_URL=postgres://postgres:postgres@db:5432/app_dev
+      - REDIS_URL=redis://redis:6379/0
+      - NODE_ENV=development
+    depends_on:
+      db:
+        condition: service_healthy
+      redis:
+        condition: service_started
+    command: npm run dev
+
+  db:
+    image: postgres:16-alpine
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: app_dev
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+      - ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init.sql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+
+  redis:
+    image: redis:7-alpine
+    ports:
+      - "6379:6379"
+    volumes:
+      - redisdata:/data
+
+  mailpit:                            # Local email testing
+    image: axllent/mailpit
+    ports:
+      - "8025:8025"                   # Web UI
+      - "1025:1025"                   # SMTP
+
+volumes:
+  pgdata:
+  redisdata:
+```
+
+### Development vs Production Dockerfile
+
+```dockerfile
+# Stage: dependencies
+FROM node:22-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Stage: dev (hot reload, debug tools)
+FROM node:22-alpine AS dev
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+EXPOSE 3000
+CMD ["npm", "run", "dev"]
+
+# Stage: build
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build && npm prune --production
+
+# Stage: production (minimal image)
+FROM node:22-alpine AS production
+WORKDIR /app
+RUN addgroup -g 1001 -S appgroup && adduser -S appuser -u 1001
+USER appuser
+COPY --from=build --chown=appuser:appgroup /app/dist ./dist
+COPY --from=build --chown=appuser:appgroup /app/node_modules ./node_modules
+COPY --from=build --chown=appuser:appgroup /app/package.json ./
+ENV NODE_ENV=production
+EXPOSE 3000
+HEALTHCHECK --interval=30s --timeout=3s CMD wget -qO- http://localhost:3000/health || exit 1
+CMD ["node", "dist/server.js"]
+```
+
+### Override Files
+
+```yaml
+# docker-compose.override.yml (auto-loaded, dev-only settings)
+services:
+  app:
+    environment:
+      - DEBUG=app:*
+      - LOG_LEVEL=debug
+    ports:
+      - "9229:9229"                   # Node.js debugger
+
+# docker-compose.prod.yml (explicit for production)
+services:
+  app:
+    build:
+      target: production
+    restart: always
+    deploy:
+      resources:
+        limits:
+          cpus: "1.0"
+          memory: 512M
+```
+
+```bash
+# Development (auto-loads override)
+docker compose up
+
+# Production
+docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d
+```
+
+## Networking
+
+### Service Discovery
+
+Services in the same Compose network resolve by service name:
+```
+# From "app" container:
+postgres://postgres:postgres@db:5432/app_dev    # "db" resolves to the db container
+redis://redis:6379/0                             # "redis" resolves to the redis container
+```
+
+### Custom Networks
+
+```yaml
+services:
+  frontend:
+    networks:
+      - frontend-net
+
+  api:
+    networks:
+      - frontend-net
+      - backend-net
+
+  db:
+    networks:
+      - backend-net              # Only reachable from api, not frontend
+
+networks:
+  frontend-net:
+  backend-net:
+```
+
+### Exposing Only What's Needed
+
+```yaml
+services:
+  db:
+    ports:
+      - "127.0.0.1:5432:5432"   # Only accessible from host, not network
+    # Omit ports entirely in production -- accessible only within Docker network
+```
+
+## Volume Strategies
+
+```yaml
+volumes:
+  # Named volume: persists across container restarts, managed by Docker
+  pgdata:
+
+  # Bind mount: maps host directory into container (for development)
+  # - ./src:/app/src
+
+  # Anonymous volume: preserves container-generated content from bind mount override
+  # - /app/node_modules
+```
+
+### Common Patterns
+
+```yaml
+services:
+  app:
+    volumes:
+      - .:/app                   # Source code (bind mount for hot reload)
+      - /app/node_modules        # Protect container's node_modules from host
+      - /app/.next               # Protect build cache
+
+  db:
+    volumes:
+      - pgdata:/var/lib/postgresql/data          # Persistent data
+      - ./scripts/init.sql:/docker-entrypoint-initdb.d/init.sql  # Init scripts
+```
+
+## Container Security
+
+### Dockerfile Hardening
+
+```dockerfile
+# 1. Use specific tags (never :latest)
+FROM node:22.12-alpine3.20
+
+# 2. Run as non-root
+RUN addgroup -g 1001 -S app && adduser -S app -u 1001
+USER app
+
+# 3. Drop capabilities (in compose)
+# 4. Read-only root filesystem where possible
+# 5. No secrets in image layers
+```
+
+### Compose Security
+
+```yaml
+services:
+  app:
+    security_opt:
+      - no-new-privileges:true
+    read_only: true
+    tmpfs:
+      - /tmp
+      - /app/.cache
+    cap_drop:
+      - ALL
+    cap_add:
+      - NET_BIND_SERVICE          # Only if binding to ports < 1024
+```
+
+### Secret Management
+
+```yaml
+# GOOD: Use environment variables (injected at runtime)
+services:
+  app:
+    env_file:
+      - .env                     # Never commit .env to git
+    environment:
+      - API_KEY                  # Inherits from host environment
+
+# GOOD: Docker secrets (Swarm mode)
+secrets:
+  db_password:
+    file: ./secrets/db_password.txt
+
+services:
+  db:
+    secrets:
+      - db_password
+
+# BAD: Hardcoded in image
+# ENV API_KEY=sk-proj-xxxxx      # NEVER DO THIS
+```
+
+## .dockerignore
+
+```
+node_modules
+.git
+.env
+.env.*
+dist
+coverage
+*.log
+.next
+.cache
+docker-compose*.yml
+Dockerfile*
+README.md
+tests/
+```
+
+## Debugging
+
+### Common Commands
+
+```bash
+# View logs
+docker compose logs -f app           # Follow app logs
+docker compose logs --tail=50 db     # Last 50 lines from db
+
+# Execute commands in running container
+docker compose exec app sh           # Shell into app
+docker compose exec db psql -U postgres  # Connect to postgres
+
+# Inspect
+docker compose ps                     # Running services
+docker compose top                    # Processes in each container
+docker stats                          # Resource usage
+
+# Rebuild
+docker compose up --build             # Rebuild images
+docker compose build --no-cache app   # Force full rebuild
+
+# Clean up
+docker compose down                   # Stop and remove containers
+docker compose down -v                # Also remove volumes (DESTRUCTIVE)
+docker system prune                   # Remove unused images/containers
+```
+
+### Debugging Network Issues
+
+```bash
+# Check DNS resolution inside container
+docker compose exec app nslookup db
+
+# Check connectivity
+docker compose exec app wget -qO- http://api:3000/health
+
+# Inspect network
+docker network ls
+docker network inspect <project>_default
+```
+
+## Anti-Patterns
+
+```
+# BAD: Using docker compose in production without orchestration
+# Use Kubernetes, ECS, or Docker Swarm for production multi-container workloads
+
+# BAD: Storing data in containers without volumes
+# Containers are ephemeral -- all data lost on restart without volumes
+
+# BAD: Running as root
+# Always create and use a non-root user
+
+# BAD: Using :latest tag
+# Pin to specific versions for reproducible builds
+
+# BAD: One giant container with all services
+# Separate concerns: one process per container
+
+# BAD: Putting secrets in docker-compose.yml
+# Use .env files (gitignored) or Docker secrets
+```

package/skills/web/e2e-testing/SKILL.md

@@ -0,0 +1,326 @@
+---
+name: e2e-testing
+description: Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies.
+origin: ECC
+---
+
+# E2E Testing Patterns
+
+Comprehensive Playwright patterns for building stable, fast, and maintainable E2E test suites.
+
+## Test File Organization
+
+```
+tests/
+├── e2e/
+│   ├── auth/
+│   │   ├── login.spec.ts
+│   │   ├── logout.spec.ts
+│   │   └── register.spec.ts
+│   ├── features/
+│   │   ├── browse.spec.ts
+│   │   ├── search.spec.ts
+│   │   └── create.spec.ts
+│   └── api/
+│       └── endpoints.spec.ts
+├── fixtures/
+│   ├── auth.ts
+│   └── data.ts
+└── playwright.config.ts
+```
+
+## Page Object Model (POM)
+
+```typescript
+import { Page, Locator } from '@playwright/test'
+
+export class ItemsPage {
+  readonly page: Page
+  readonly searchInput: Locator
+  readonly itemCards: Locator
+  readonly createButton: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.searchInput = page.locator('[data-testid="search-input"]')
+    this.itemCards = page.locator('[data-testid="item-card"]')
+    this.createButton = page.locator('[data-testid="create-btn"]')
+  }
+
+  async goto() {
+    await this.page.goto('/items')
+    await this.page.waitForLoadState('networkidle')
+  }
+
+  async search(query: string) {
+    await this.searchInput.fill(query)
+    await this.page.waitForResponse(resp => resp.url().includes('/api/search'))
+    await this.page.waitForLoadState('networkidle')
+  }
+
+  async getItemCount() {
+    return await this.itemCards.count()
+  }
+}
+```
+
+## Test Structure
+
+```typescript
+import { test, expect } from '@playwright/test'
+import { ItemsPage } from '../../pages/ItemsPage'
+
+test.describe('Item Search', () => {
+  let itemsPage: ItemsPage
+
+  test.beforeEach(async ({ page }) => {
+    itemsPage = new ItemsPage(page)
+    await itemsPage.goto()
+  })
+
+  test('should search by keyword', async ({ page }) => {
+    await itemsPage.search('test')
+
+    const count = await itemsPage.getItemCount()
+    expect(count).toBeGreaterThan(0)
+
+    await expect(itemsPage.itemCards.first()).toContainText(/test/i)
+    await page.screenshot({ path: 'artifacts/search-results.png' })
+  })
+
+  test('should handle no results', async ({ page }) => {
+    await itemsPage.search('xyznonexistent123')
+
+    await expect(page.locator('[data-testid="no-results"]')).toBeVisible()
+    expect(await itemsPage.getItemCount()).toBe(0)
+  })
+})
+```
+
+## Playwright Configuration
+
+```typescript
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['html', { outputFolder: 'playwright-report' }],
+    ['junit', { outputFile: 'playwright-results.xml' }],
+    ['json', { outputFile: 'playwright-results.json' }]
+  ],
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    actionTimeout: 10000,
+    navigationTimeout: 30000,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+})
+```
+
+## Flaky Test Patterns
+
+### Quarantine
+
+```typescript
+test('flaky: complex search', async ({ page }) => {
+  test.fixme(true, 'Flaky - Issue #123')
+  // test code...
+})
+
+test('conditional skip', async ({ page }) => {
+  test.skip(process.env.CI, 'Flaky in CI - Issue #123')
+  // test code...
+})
+```
+
+### Identify Flakiness
+
+```bash
+npx playwright test tests/search.spec.ts --repeat-each=10
+npx playwright test tests/search.spec.ts --retries=3
+```
+
+### Common Causes & Fixes
+
+**Race conditions:**
+```typescript
+// Bad: assumes element is ready
+await page.click('[data-testid="button"]')
+
+// Good: auto-wait locator
+await page.locator('[data-testid="button"]').click()
+```
+
+**Network timing:**
+```typescript
+// Bad: arbitrary timeout
+await page.waitForTimeout(5000)
+
+// Good: wait for specific condition
+await page.waitForResponse(resp => resp.url().includes('/api/data'))
+```
+
+**Animation timing:**
+```typescript
+// Bad: click during animation
+await page.click('[data-testid="menu-item"]')
+
+// Good: wait for stability
+await page.locator('[data-testid="menu-item"]').waitFor({ state: 'visible' })
+await page.waitForLoadState('networkidle')
+await page.locator('[data-testid="menu-item"]').click()
+```
+
+## Artifact Management
+
+### Screenshots
+
+```typescript
+await page.screenshot({ path: 'artifacts/after-login.png' })
+await page.screenshot({ path: 'artifacts/full-page.png', fullPage: true })
+await page.locator('[data-testid="chart"]').screenshot({ path: 'artifacts/chart.png' })
+```
+
+### Traces
+
+```typescript
+await browser.startTracing(page, {
+  path: 'artifacts/trace.json',
+  screenshots: true,
+  snapshots: true,
+})
+// ... test actions ...
+await browser.stopTracing()
+```
+
+### Video
+
+```typescript
+// In playwright.config.ts
+use: {
+  video: 'retain-on-failure',
+  videosPath: 'artifacts/videos/'
+}
+```
+
+## CI/CD Integration
+
+```yaml
+# .github/workflows/e2e.yml
+name: E2E Tests
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npx playwright test
+        env:
+          BASE_URL: ${{ vars.STAGING_URL }}
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+```
+
+## Test Report Template
+
+```markdown
+# E2E Test Report
+
+**Date:** YYYY-MM-DD HH:MM
+**Duration:** Xm Ys
+**Status:** PASSING / FAILING
+
+## Summary
+- Total: X | Passed: Y (Z%) | Failed: A | Flaky: B | Skipped: C
+
+## Failed Tests
+
+### test-name
+**File:** `tests/e2e/feature.spec.ts:45`
+**Error:** Expected element to be visible
+**Screenshot:** artifacts/failed.png
+**Recommended Fix:** [description]
+
+## Artifacts
+- HTML Report: playwright-report/index.html
+- Screenshots: artifacts/*.png
+- Videos: artifacts/videos/*.webm
+- Traces: artifacts/*.zip
+```
+
+## Wallet / Web3 Testing
+
+```typescript
+test('wallet connection', async ({ page, context }) => {
+  // Mock wallet provider
+  await context.addInitScript(() => {
+    window.ethereum = {
+      isMetaMask: true,
+      request: async ({ method }) => {
+        if (method === 'eth_requestAccounts')
+          return ['0x1234567890123456789012345678901234567890']
+        if (method === 'eth_chainId') return '0x1'
+      }
+    }
+  })
+
+  await page.goto('/')
+  await page.locator('[data-testid="connect-wallet"]').click()
+  await expect(page.locator('[data-testid="wallet-address"]')).toContainText('0x1234')
+})
+```
+
+## Financial / Critical Flow Testing
+
+```typescript
+test('trade execution', async ({ page }) => {
+  // Skip on production — real money
+  test.skip(process.env.NODE_ENV === 'production', 'Skip on production')
+
+  await page.goto('/markets/test-market')
+  await page.locator('[data-testid="position-yes"]').click()
+  await page.locator('[data-testid="trade-amount"]').fill('1.0')
+
+  // Verify preview
+  const preview = page.locator('[data-testid="trade-preview"]')
+  await expect(preview).toContainText('1.0')
+
+  // Confirm and wait for blockchain
+  await page.locator('[data-testid="confirm-trade"]').click()
+  await page.waitForResponse(
+    resp => resp.url().includes('/api/trade') && resp.status() === 200,
+    { timeout: 30000 }
+  )
+
+  await expect(page.locator('[data-testid="trade-success"]')).toBeVisible()
+})
+```