⌘Squad

Visual layer for agentic coding

Squad is a VS Code extension that lets you orchestrate multiple AI agents working together on complex tasks. Define agent workflows as directed acyclic graphs (DAGs) in YAML, launch missions, and watch specialized agents — architect, frontend, backend, QA, UX — collaborate through a visual Mission Control panel. Each agent runs Claude CLI under the hood with its own tools, skills, and constraints.

Key Features

• DAG-Based Workflows — Define multi-agent pipelines as YAML graphs. Agents run in parallel where dependencies allow, powered by topological sort scheduling.

• Visual Mission Control — React Flow graph visualization with live status updates, animated edges, and automatic ELK.js layout.

• Pre-Built Agent Squad — Ships with 5 specialized agents out of the box:

  Agent	Model	Mode	Role
  Architect	Opus	Interactive	System design & technical specs
  UX Designer	Opus	Interactive	Visual design direction & UX specs
  Frontend Engineer	Opus	Autonomous	Client-side implementation
  Backend Engineer	Opus	Autonomous	Server-side implementation
  QA Engineer	Sonnet	Autonomous	Testing & validation

• YAML Configuration — Agents and workflows defined in simple YAML with JSON Schema validation. Customize tools, skills, models, and multi-step prompts.

• Interactive Decision Points — Agents pause for human input via MCP tools: approvals, single/multi-select, editable content, diagrams, and comparison tables.

• Constitution & Security — Built-in safety rules enforce dependency output isolation, credential redaction, file scope restrictions, and tool policy compliance.

• SQD Mission Files — Custom .sqd editor with activity feed, stats bar, keyboard navigation, and persistent mission state.

Installation

Prerequisites

• VS Code 1.105 or later
• Claude CLI installed and authenticated

From Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "⌘Squad - Visual layer for agentic coding"
4. Click Install

Or from the command line:

code --install-extension squad.squad

Build from Source

git clone https://github.com/cmdsquad/vscode-extension.git
cd vscode-extension
npm install
npm run compile
npm run package
# Then install the generated .vsix
code --install-extension squad-*.vsix

From VSIX

# Download the latest .vsix from the Releases page
code --install-extension squad-0.1.0.vsix

Quick Start

1. Open a project in VS Code.

2. Create a mission using the command palette (Ctrl+Shift+S / Cmd+Shift+S) or the Squad activity bar.

3. Select a workflow — choose web-app-squad from the Squad Selector dropdown.

4. Enter your mission brief:

   Build a todo app with React and Express
   

5. Watch the DAG execute — the pipeline flows through the agent graph.

6. Respond to prompts — interactive agents (architect, UX designer) will pause for your input on key decisions.

7. Review results — open the generated .sqd file to see the full activity feed, agent outputs, and mission stats.

More Examples

Agent YAML Reference

Create a YAML file in ~/.squad/agents/. All available fields:

# ~/.squad/agents/security-auditor.yaml

# --- Required fields ---
name: security-auditor              # Kebab-case identifier (^[a-z][a-z0-9-]{0,63}$)
mode: autonomous                    # interactive | autonomous | mixed
model: sonnet                       # opus | sonnet | haiku
prompt: >                           # Base system prompt — defines the agent's personality
  You are the Security Auditor agent. Your job is to review
  all code changes for vulnerabilities and ensure compliance
  with OWASP top 10 security standards.

# --- Optional fields ---
icon: shield                        # VS Code codicon name
color: "#ff5722"                    # Hex color for UI display
description: >                      # Human-readable description
  Audits code changes for security vulnerabilities, checks OWASP
  top 10, and validates input sanitization.

tools:                               # Claude Code tools available to this agent
  - Read
  - Grep
  - Glob
  - Bash

skills:                              # Skill names bound to this agent
  - security-checklist

steps:                               # Ordered steps the agent follows
  - name: scan                       # Step name (unique within agent)
    prompt: >                        # Step-specific instructions
      Scan the codebase for common vulnerability patterns
      including SQL injection, XSS, and insecure deserialization.

  - name: audit
    confirm_tool:                    # Tools requiring user confirmation at this step
      - mcp__squad__approval
      - mcp__squad__editable_content
    prompt: >
      Present a detailed security audit report. List each finding
      with severity, location, and recommended fix.

output:                              # Composable output component tree (Record<string, unknown>)
  summary:
    type: markdown
    content: "## Security Audit Results"

Workflow YAML Reference

Define a new DAG in ~/.squad/workflows/. All available fields:

# ~/.squad/workflows/code-review.yaml

# --- Required fields ---
name: code-review                    # Kebab-case identifier (^[a-z][a-z0-9-]{0,63}$)
nodes:                               # Map of node IDs to node definitions
  trigger:
    type: trigger                    # trigger | agent | approval-gate
    title: Review Start              # Display title in the DAG
    description: >                   # Node description
      Receives the review request and kicks off the pipeline.

  architect:
    type: agent
    after: [trigger]                 # Dependency node IDs — runs after these complete
    title: Design Review
    description: Reviews architecture and design decisions.

  security-auditor:
    type: agent
    after: [trigger]                 # Runs in parallel with architect (same dependency)
    title: Security Audit
    description: Scans for security vulnerabilities.

  review-gate:
    type: approval-gate              # Pauses the pipeline for human approval
    after: [architect, security-auditor]
    title: Review Approval
    description: User approves or rejects before QA proceeds.
    showOutputsFrom:                 # Agent IDs whose output to display at this gate
      - architect
      - security-auditor

  qa-engineer:
    type: agent
    after: [review-gate]
    title: Test Validation
    showOutputsFrom: [architect, security-auditor]

# --- Optional fields ---
icon: git-pull-request               # VS Code codicon name
description: >                       # Human-readable workflow description
  Code review pipeline — architect reviews design, security
  auditor checks vulnerabilities, QA validates tests.

Project-Level Overrides

Place agent or workflow YAML in .squad/ at your project root to override global defaults for that project only:

my-project/
├── .squad/
│   ├── agents/
│   │   └── frontend-engineer.yaml   # project-specific overrides
│   └── workflows/
│       └── web-app-squad.yaml       # customized pipeline
└── src/

Keyboard Shortcuts

Global

Decision Panel (active when a decision is pending in the SQD editor)

Troubleshooting

• Extension not activating? — Squad activates when a .squad/ folder exists in your workspace. Run Squad: Open Configuration from the command palette to initialize one.
• Claude CLI not found? — Ensure Claude CLI is installed and on your PATH. Run claude --version in your terminal to verify.
• Agents timing out? — Adjust squad.agentTimeoutMinutes in VS Code settings (default: 30 minutes).
• File an issue: github.com/cmdsquad/vscode-extension/issues

Contributing

# Clone and install
git clone https://github.com/cmdsquad/vscode-extension.git
cd vscode-extension
npm install

# Run tests
npm test

# Watch mode
npm run test:watch

# Build extension (host + webview)
npm run compile

# Dev webview with hot reload
npm run dev:webview

# Package for distribution
npm run package

License

CC BY-NC-SA 4.0