task

Step 1: Install Workflow Plugin

#### Option A: Via Plugin Marketplace (Recommended)

Add the marketplace to Claude Code and install the workflow plugin:

```bash

# In Claude Code, run:

/plugin

# Then select:

# 1. "Marketplaces" tab

# 2. "Add Marketplace"

# 3. Enter: eljun/claude-skills

# 4. Go to "Plugins" tab

# 5. Enable "workflow"

```

#### Option B: Via npx skills CLI (Alternative)

If you're having issues with the plugin marketplace, use the CLI:

```bash

# Install globally

npx skills add eljun/claude-skills -y -g

# Or install to project only

npx skills add eljun/claude-skills -y

```

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 |

| /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:

1. Install to → Select specific agents
2. Select skills → Choose the skills you want (e.g., vercel-react-best-practices, supabase-postgres-best-practices)
3. Select agents to install to → Claude Code
4. Installation scope → Project
5. Installation method → Symlink (Recommended)

| Skill | Source | Purpose |

|-------|--------|---------|

| /vercel-react-best-practices | [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) | React/Next.js performance optimization |

| /supabase-postgres-best-practices | [supabase/agent-skills](https://github.com/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 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 |

| tests/e2e/ | E2E test scripts created by /test --ci |

| TASKS.md | Task tracker (created automatically by /task) |

```bash

# Get help for any skill

/task --help # or -h

/implement --help

/test -v # Show version

# Manual Mode - You control each step

/task # Creates task #1 → docs/task/001-feature-name.md

/implement 1 # Implement task #1 (or use full name: 001-feature-name)

/test 1 # Test task #1

/document 1 # Document task #1

/ship 1 # Ship task #1

# Multi-task Mode - Parallel implementation

/implement -m 1 2 3 # Spawn parallel agents for tasks 1, 2, and 3

# Auto Mode - Full automation after plan approval

/task auto

# → After you approve, runs: implement → test → document → ship automatically

# Auto Mode - Skip planning, auto-chain from implement

/implement auto 1

# → Task doc must exist. Runs: implement → test → document → ship automatically

```

Task IDs

Tasks are assigned simple numeric IDs (1, 2, 3...) for easy reference:

```bash

# These are equivalent:

/implement 1

/implement 001-auth-jwt

```

Task files are named with zero-padded IDs for sorting: 001-auth-jwt.md, 002-fix-login.md

---

Manual Mode (`/task`)

```

┌────────┐ ┌────────────┐ ┌────────┐ ┌──────────┐ ┌────────┐ ┌──────────┐

│ /task │ → │ /implement │ → │ /test │ → │/document │ → │ /ship │ → │ /release │

└────────┘ └────────────┘ └────────┘ └──────────┘ └────────┘ └──────────┘

│ │ │ │ │ │

↓ ↓ ↓ ↓ ↓ ↓

docs/task/ In Progress Testing Approved Ready to Shipped

*.md Ship + Changelog

```

Manual Checkpoints:

• After /test → You approve before /document
• After /document → You decide when to /ship
• After /ship → You decide when to /release

Auto Mode (`/task auto` or `/implement auto`)

```

/task auto → User approves plan /implement auto {task}

↓ ↓

/implement Implement code

↓ ↓

/test (Playwright E2E) ←─────────────── /test (Playwright E2E)

│

PASS → /document

FAIL → /implement (with test report)

│

▼

/ship → PR created

```

Auto Mode Features:

• Two entry points: Start from /task auto (full pipeline) or /implement auto (skip planning)
• Full automation: Runs through the remaining pipeline automatically
• Test failures: Auto-retries by sending test report back to implement
• PR creation: Creates PR and notifies you - you decide when to merge

Model Configuration

Each skill uses an optimized model for its task complexity:

| Skill | Model | Reason |

|-------|-------|--------|

| /task | opus | Complex planning requires advanced reasoning |

| /implement | opus | Complex coding requires advanced reason