collabdraft

CollabDraft

A Claude Code skill system that turns planning sessions into bidirectional, visually-grounded design conversations.

CollabDraft solves the invisible mental model problem in AI-assisted planning: Claude's evolving understanding of your design is hidden until it materializes as a finished artifact — by which point misalignment is expensive to correct. This project builds infrastructure for continuous, bidirectional mental model synchronization between developer and agent during planning.

When a planning session starts, CollabDraft launches a collaborative workspace:

• A live whiteboard (tldraw) where both you and Claude are first-class multiplayer participants
• A continuously-updated spec artifact that surfaces Claude's current mental model in real time
• A conversation agent (main Claude Code session) that orchestrates everything and reads your cursor context
• A working-draft agent (Agent Teams teammate) that maintains the live spec document

Getting Started

Read the roadmap for the implementation sequence. Implement phases in order — each phase delivers standalone value.

Read the architecture overview before writing code. The decision records explain why specific technology choices were made.

Documentation

Document	Purpose
Product Brief	Problem statement, vision, goals, non-goals
Architecture	System overview, tech stack, links to decision records
Requirements	Authoritative list of what to build (P0/P1/P2 by phase)
Roadmap	Phased implementation plan with acceptance criteria
Conventions	Coding standards, testing standards, common pitfalls
Documentation Philosophy	How to write and organize docs in this project
Decision Records	Architecture decision log
Implementation Guides	Component-specific implementation details

Installation

# From local clone (development)
claude plugin add ./path/to/collabdraft

# From GitHub
claude plugin add github:jeremygiberson/collabdraft

Once installed, use /brainstorm "topic" in any Claude Code session to start a planning session.

Project Structure

This repository is a Claude Code plugin. The plugin structure follows the standard layout:

.claude-plugin/
  plugin.json           Plugin manifest
agents/
  working-draft.md      Agent Teams teammate definition
skills/
  brainstorm/
    SKILL.md            /brainstorm slash command skill
hooks/
  hooks.json            Hook configuration (Phase 2+)
scripts/
  session-start.sh      Session lifecycle: start
  session-stop.sh       Session lifecycle: stop
  session-status.sh     Session lifecycle: status check
packages/               (Phase 2+)
  canvas-server/        Node.js + Express + tldraw sync server
  canvas-harness/       Python + Click CLI harness (canvas-ctl binary)
  draft-renderer/       Node.js file-watching markdown renderer