Draftingboard — Design skill for Claude Code
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 inlocalStorageand is sent only toapi.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
Related Skills
Unity Mockup
Produces a visual mockup for a GitHub issue using the design canvas skill, matching the project's existing vis
Contract Checker Skill
contract-checker Skill - Contract analysis, task & schedule extraction, execution tracking, and visual Gantt a
AnythingButLaw
法外功夫 — Non-legal business skills for lawyers. 9 analytical frameworks (decision analysis, game theory, contrac
Solveit With Notebooks
A teachable, SolveIt-style learning environment for Jupyter notebooks — Pólya's loop, dialogue not prompting,
Next Feature
Pick the next unblocked feature from the backlog and write its technical design for human approval.
PR Review Agent
LangGraph.js PR-review agent on Claude: per-file analysis via MCP, coverage and risk checks, structured review
Related Agents
Local Review
Starts the local dev server, opens the browser, takes a screenshot, and waits for human approval before the ch
Visual Planner
Renders a plan suite into visual.html — the human review-and-approval surface. Spawned by /blueprint after pla
LinkedIn Publishing Package
Assembles a complete LinkedIn publishing package for review while preserving the mandatory human approval gate