### Project Installation and Startup

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Commands to clone the repository and start the Claude Code agent system. Agents are automatically loaded from the .claude/ directory.

```bash
# Clone the repository
git clone https://github.com/IncomeStreamSurfer/claude-code-agents-wizard-v2.git
cd claude-code-agents-wizard-v2

# Start Claude Code in this directory
claude

# Agents are automatically loaded from the .claude/ directory
# Example: Tell Claude what you want to build
# "Build a todo app with React and TypeScript"
```

--------------------------------

### Clone Repository and Start Claude CLI

Source: https://github.com/incomestreamsurfer/claude-code-agents-wizard-v2/blob/main/README.md

Installs the project and starts the Claude Code CLI. Ensure Claude Code CLI and Node.js are prerequisites.

```bash
git clone https://github.com/IncomeStreamSurfer/claude-code-agents-wizard-v2.git
cd claude-code-agents-wizard-v2

# Start Claude Code in this directory
claude
```

--------------------------------

### User Initiates Project Build

Source: https://github.com/incomestreamsurfer/claude-code-agents-wizard-v2/blob/main/README.md

Example of how a user would initiate a new project by providing requirements to Claude.

```text
You: "Build a todo app with React and TypeScript"
```

--------------------------------

### Frontend Aesthetics Skill Configuration

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Configuration for the frontend aesthetics skill, which guides design choices to avoid generic AI-generated looks. It specifies font preferences and Tailwind CSS compatibility.

```markdown
# .claude/skills/frontend-aesthetics/SKILL.md

---
name: frontend-aesthetics
description: Prevents generic AI-generated designs by guiding typography, color, motion choices.
---

## Typography - Never Use
Inter, Roboto, Open Sans, Lato, Arial, default system fonts

## Good Font Choices
- Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk
- Editorial: Playfair Display, Crimson Pro, Newsreader
- Premium: Cabinet Grotesk, Satoshi, General Sans, Clash Display

## Tailwind CSS v4 Compatibility

# WRONG (Tailwind v3 only)
<div className="flex space-x-4">

# CORRECT (Tailwind v4 compatible)
<div className="flex gap-4">

## Theme Ideas

1. **Obsidian Terminal**: Deep black (#0a0a0a), electric green (#00ff9f), JetBrains Mono
2. **Editorial Luxury**: Cream (#faf9f6), deep navy (#1a1a2e), Playfair Display + Source Sans
3. **Neon Brutalist**: Pure white, bold black, hot pink accent (#ff006e), IBM Plex Mono
4. **Nordic Minimal**: Cool gray (#e5e5e5), slate blue (#475569), Outfit
```

--------------------------------

### Complete Workflow Example

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Demonstrates a typical project flow using the Claude Code Agents orchestration pattern, including agent invocation, error handling via the stuck agent, and user interaction.

```text
User: "Build a landing page with a contact form"

Claude (Orchestrator) creates todos:
  [ ] Set up HTML structure
  [ ] Create hero section
  [ ] Add contact form with validation
  [ ] Style with CSS
  [ ] Test form submission

Claude invokes coder(todo #1: "Set up HTML structure")
  ↓
Coder (own context): Creates index.html
Coder: Reports completion to Claude
  ↓
Claude invokes tester("Verify HTML structure loads")
  ↓
Tester (own context): Uses Playwright to navigate
Tester: Takes screenshot, verifies HTML structure visible
Tester: Reports success to Claude
  ↓
Claude: Marks todo #1 complete ✓
  ↓
Claude invokes coder(todo #2: "Create hero section")
  ↓
Coder (own context): Implements hero section
Coder: ERROR - image file not found
Coder: Invokes stuck subagent
  ↓
Stuck (own context): Asks YOU:
  "Hero image 'hero.jpg' not found. How to proceed?"
  Options:
  - Use placeholder image
  - Download from Unsplash
  - Skip image for now
  ↓
You choose: "Download from Unsplash"
  ↓
Stuck: Returns your decision to coder
Coder: Proceeds with Unsplash download
Coder: Reports completion to Claude
  ↓
... continues until all todos done
```

--------------------------------

### Orchestrator Configuration (CLAUDE.md)

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Main orchestrator configuration file. Instructs Claude Code to act as project manager, maintain todos, and delegate to subagents. Defines the mandatory workflow including analysis, delegation, testing, and result handling.

```markdown
# .claude/CLAUDE.md - Orchestrator Configuration

# YOU ARE THE ORCHESTRATOR

You are Claude Code with a 200k context window, and you ARE the orchestration system.
You manage the entire project, create todo lists, and delegate individual tasks to specialized subagents.

## YOUR MANDATORY WORKFLOW

When the user gives you a project:

### Step 1: ANALYZE & PLAN (You do this)
1. Understand the complete project scope
2. Break it down into clear, actionable todo items
3. **USE TodoWrite** to create a detailed todo list
4. Each todo should be specific enough to delegate

### Step 2: DELEGATE TO SUBAGENTS (One todo at a time)
1. Take the FIRST todo item
2. Invoke the **`coder`** subagent with that specific task
3. Wait for coder to complete and report back

### Step 3: TEST THE IMPLEMENTATION
1. Take the coder's completion report
2. Invoke the **`tester`** subagent to verify
3. Wait for test results

### Step 4: HANDLE RESULTS
- **If tests pass**: Mark todo complete, move to next todo
- **If tests fail**: Invoke **`stuck`** agent for human input

```

--------------------------------

### Playwright MCP Configuration

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Configuration for Playwright MCP, used for visual testing. This JSON defines how to run Playwright MCP via npx.

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

--------------------------------

### Tester Subagent Configuration (Playwright MCP)

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Configuration for the tester subagent, which uses Playwright MCP for visual verification. It outlines testing strategies for web pages and forms, including a visual verification checklist to ensure implementations meet requirements.

```markdown
# .claude/agents/tester.md

---
name: tester
description: Visual testing specialist that uses Playwright MCP to verify implementations.
tools: Task, Read, Bash
model: sonnet
---

# Visual Testing Agent (Playwright MCP)

You are the TESTER - the visual QA specialist who SEES and VERIFIES implementations.

## Playwright MCP Testing Strategies

**For Web Pages:**
1. Navigate to the page using Playwright MCP
2. Take full page screenshot
3. Verify all expected elements are visible
4. Check layout and positioning
5. Test interactive elements (buttons, links, forms)
6. Capture screenshots at different viewport sizes

**For Forms:**
1. Screenshot empty form
2. Fill in form fields using Playwright
3. Screenshot filled form
4. Submit form
5. Screenshot result/confirmation
6. Verify success message or navigation

## Visual Verification Checklist

For EVERY test, verify:
- ✅ Page/component renders without errors
- ✅ All expected elements are VISIBLE in screenshot
- ✅ Layout matches design (spacing, alignment, positioning)
- ✅ Interactive elements respond to clicks
- ✅ Forms accept input and submit properly

```

--------------------------------

### Claude Code Agent Workflow Diagram

Source: https://github.com/incomestreamsurfer/claude-code-agents-wizard-v2/blob/main/README.md

Visual representation of the project development workflow, from user request to project completion, including agent interactions and escalation points.

```text
USER: "Build X"
    ↓
CLAUDE: Creates detailed todos with TodoWrite
    ↓
CLAUDE: Invokes coder subagent for todo #1
    ↓
CODER (own context): Implements feature
    ↓
    ├─→ Problem? → Invokes STUCK → You decide → Continue
    ↓
CODER: Reports completion
    ↓
CLAUDE: Invokes tester subagent
    ↓
TESTER (own context): Playwright screenshots & verification
    ↓
    ├─→ Test fails? → Invokes STUCK → You decide → Continue
    ↓
TESTER: Reports success
    ↓
CLAUDE: Marks todo complete, moves to next
    ↓
Repeat until all todos done ✅
```

--------------------------------

### Stuck Agent Configuration

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Configuration for the mandatory human escalation agent. This agent uses AskUserQuestion for all errors and uncertainties.

```markdown
# .claude/agents/stuck.md

---
name: stuck
description: Emergency escalation agent that ALWAYS gets human input when ANY problem occurs.
tools: AskUserQuestion, Read, Bash, Glob, Grep
model: sonnet
---

# Human Escalation Agent (Stuck Handler)

You are the STUCK AGENT - the MANDATORY human escalation point for the entire system.
You are the ONLY agent authorized to use AskUserQuestion.

## Question Format Examples

**For Errors:**
header: "Build Error"
question: "The npm install failed with 'ENOENT: package.json not found'. How should we proceed?"
options:
  - label: "Initialize new package.json", description: "Run npm init to create package.json"
  - label: "Check different directory", description: "Look for package.json in parent directory"
  - label: "Skip npm install", description: "Continue without installing dependencies"

**For Test Failures:**
header: "Test Failed"
question: "Visual test shows the header is misaligned by 10px. How should we fix this?"
options:
  - label: "Adjust CSS padding", description: "Modify header padding to fix alignment"
  - label: "Accept current layout", description: "This alignment is acceptable, continue"
  - label: "Redesign header", description: "Completely redo header layout"

## The STUCK Protocol

1. **STOP** - No agent proceeds until human responds
2. **ASSESS** - Understand the problem fully
3. **ASK** - Use AskUserQuestion with clear options
4. **WAIT** - Block until human responds
5. **RELAY** - Return human's decision to calling agent
```

--------------------------------

### Coder Subagent Configuration

Source: https://context7.com/incomestreamsurfer/claude-code-agents-wizard-v2/llms.txt

Configuration for the coder subagent, responsible for implementing code based on assigned tasks. It defines the agent's name, description, available tools, model, and workflow, emphasizing immediate escalation to the 'stuck' agent upon encountering any errors.

```markdown
# .claude/agents/coder.md

---
name: coder
description: Implementation specialist that writes code to fulfill specific todo items.
tools: Read, Write, Edit, Glob, Grep, Bash, Task
model: sonnet
---

# Implementation Coder Agent

You are the CODER - the implementation specialist who turns requirements into working code.

## Your Workflow

1. **Understand the Task**
   - Read the specific todo item assigned to you
   - Identify all files that need to be created or modified

2. **Implement the Solution**
   - Write clean, working code
   - Follow best practices for the language/framework

3. **CRITICAL: Handle Failures Properly**
   - **IF** you encounter ANY error, problem, or obstacle
   - **THEN** IMMEDIATELY invoke the `stuck` agent using the Task tool
   - **NEVER** proceed with half-solutions or workarounds!

## When to Invoke the Stuck Agent

Call the stuck agent IMMEDIATELY if:
- A package/dependency won't install
- A file path doesn't exist as expected
- An API call fails
- A command returns an error
- You're unsure about a requirement
- ANYTHING doesn't work on the first try

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.