AgentToolHub
Skill

test

test — a Claude Code skill from eljun/workflow-skills

Features

  • ✓Integrated task planning and documentation
  • ✓Step-by-step implementation guidance
  • ✓Automated quality checks with coding standards
  • ✓End-to-end testing with Playwright
  • ✓Customizable for React/Next.js and Supabase/PostgreSQL projects
  • ✓Visit GitHub for more tools and installation instructions

Installation Guide

Step 1: Install Workflow Plugin

bash
# Install globally (Claude Code only)
npx skills add eljun/workflow-skills -y -g -a claude-code

# Or install to project only
npx skills add eljun/workflow-skills -y -a claude-code

Flags:
| Flag | Description |
|------|-------------|
| -y | Skip confirmation prompts |
| -g | Install globally (available in all projects) |

This installs the core workflow skills:

| Skill | Purpose |
|-------|---------|
| /task | Plan features and create task documents |
| /implement | Implement tasks step by step |
| /simplify | Quality gate — coding standards + deviation check |
| /test | Run E2E tests via Playwright |
| /document | Generate feature docs and guides |
| /ship | Create PRs and prepare deployment |
| /release | Create versioned releases with changelogs |

Step 2: Install Companion Skills (Recommended)

The workflow skills reference these specialized skills for React/Next.js and Supabase/PostgreSQL projects. Installation is optional but recommended. Once installed, the workflow skills will always invoke them — they are not skippable.

Run these commands in your project directory:

bash
# React/Next.js best practices (from Vercel)
npx skills add vercel-labs/agent-skills

# Supabase/PostgreSQL best practices (from Supabase)
npx skills add supabase/agent-skills

For each command, follow the prompts:

  • Install to → Select specific agents

  • Select skills → Choose the skills you want (e.g., vercel-react-best-practices, supabase-postgres-best-practices)

  • Select agents to install to → Claude Code

  • Installation scope → Project

  • Installation method → Symlink (Recommended)

    • | Skill | Source | Purpose |
    |-------|--------|---------|
    | /vercel-react-best-practices | vercel-labs/agent-skills | React/Next.js performance optimization |
    | /supabase-postgres-best-practices | supabase/agent-skills | Database queries, RLS, schema design |

    When installed, the workflow skills (/task, /implement, etc.) will automatically reference these during relevant tasks.

    Step 3: Configure Playwright for /test

    The /test skill supports two modes with different requirements:

    #### Option A: Interactive Mode (Default)

    For visual browser testing where you see each step in real-time.

    Requires Playwright MCP. Add this to your project's .mcp.json:

    json
    {
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

    Usage: /test {task-name}

    #### Option B: CI Mode (Headless)

    For headless testing with generated test scripts. Faster, supports parallel execution.

    Requires Playwright package (no MCP needed):

    bash
    # Install Playwright
npm install -D @playwright/test

# Install browsers (first time only)
npx playwright install

    Usage:

  • /test --ci {task-name} - keeps test scripts (default)

  • /test --ci --cleanup {task-name} - deletes test scripts after

    • #### Comparison

    | Feature | Interactive | CI Mode |
    |---------|-------------|---------|
    | Setup | Playwright MCP | @playwright/test package |
    | Visibility | See browser in real-time | Headless (background) |
    | Speed | Sequential | Parallel execution |
    | Test scripts | Not created | Kept by default for regression |
    | Best for | Debugging, demos | Large test suites, automation |

    #### CI Mode Flags

    | Command | Behavior |
    |---------|----------|
    | /test --ci {task} | Run tests, keep scripts for regression (default) |
    | /test --ci --cleanup {task} | Run tests, delete scripts after (one-time verification) |

    Tip: Use --ci (default) for core features to build regression test suite. Use --ci --cleanup for minor changes that don't need long-term testing.

    Step 4: Project Setup

    Create the required folders in your project:

    bash
    mkdir -p docs/task docs/testing docs/features docs/guides docs/changelogs docs/learnings tests/e2e

    | Folder | Purpose |
    |--------|---------|
    | docs/task/ | Task documents created by /task |
    | docs/testing/ | Test reports created by /test |
    | docs/features/ | Feature documentation created by /document |
    | docs/guides/ | User guides created by /document |
    | docs/changelogs/ | Changelog created by /release |
    | docs/learnings/ | Per-task retrospectives created by /document |
    | tests/e2e/ | E2E test scripts created by /test --ci |
    | TASKS.md | Task tracker (created automatically by /task) |
    | LEARNINGS.md | Project knowledge base — read by /task and /implement on every run |

    Reviews