sboghossian

Draftingboard — Design skill for Claude Code

Design community

A visual legal matter canvas — artifacts orbit a contract and run as agentic workflow steps behind human approval gates.

How to install Draftingboard

This entry records only its repository, not the path inside it, so there is no exact command to give. Open sboghossian/draftingboard and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Draftingboard does

A visual legal matter canvas — artifacts orbit a contract and run as agentic workflow steps behind human approval gates.

Alternatives in Design

  • Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
  • Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
  • Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★

README

Drafting Board

An experimental legal-AI playground: a **visual matter canvas** where a contract sits at the centre and its artifacts — precedents, the term sheet, the opposing redline, client comments, a jurisdiction memo — orbit it as draggable nodes. Each artifact is also a **runnable workflow step**: run it and the agent reasons, calls a tool, and proposes a contract edit behind a **pre-execution approval gate** that a human must clear before anything changes.

Live at **https://draftingboard.dashable.dev**.

Where it came from

A fusion of two prior pieces of work:

  • HAQQ legal-AI prototype — the matter-canvas surface: contract node with per-section state, artifact nodes, SVG links, the unified timeline rail, and the approval-gate concept.
  • Louis (HAQQ Legal AI) — the runnable-node state machine (idle → running → needs_approval → done / rejected), the "Run board" sequential runner that pauses at gates, and the BYO-key live-agent pattern. The design system (warm cream comfort-UI, muted gold accent, Inter + EB Garamond) is Louis's.

This package is fully standalone — no backend, no build step, vanilla JS.

Agent modes

  • Simulated (default) — the agent's reasoning, tool calls and gate proposals are pattern-matched in the browser. The agent itself is fully offline and simulated, but the page loads web fonts (Inter and EB Garamond) from Google Fonts, so a cold offline load falls back to system fonts.
  • Live — paste an Anthropic API key in Settings and flip Live agent on. Node runs and composer prompts then call Claude directly from the browser (anthropic-dangerous-direct-browser-access). The key is stored only in localStorage and is sent only to api.anthropic.com. Any failure falls back to the simulated agent.

What you can do

  • Drag nodes around the canvas; layout persists to localStorage.
  • Run step on any artifact node — produces timeline events and, usually, an approval gate targeting