LaunchKit · 2026
Back to Skills

contract-diagram

Diagram as contract for agreed-upon AI development.

0
376 downloads
by @nonlinear

Setup & Installation

openclaw skills install @nonlinear/contract-diagram

Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:

npx clawhub install contract-diagram

Version History

v1.0.1Feb 23, 2026 - Version note by skill developer:

- Added mermaid.min.js for diagram rendering. - Added marked.min.js for Markdown parsing.

What This Skill Does

A contract-based workflow system for AI-assisted development. Teams embed a Mermaid diagram in a markdown file and use status badges to track each component through design approval, implementation, and sign-off. The diagram acts as the single source of truth for what was agreed, what is built, and what is blocked.

Keeps AI development scope and status visible in the same file as the spec, avoiding drift between what was agreed and what gets built.

When to use it

  • Tracking stakeholder approval on AI-generated feature designs before coding starts
  • Flagging implementation blockers that require a human decision or permission
  • Auditing which parts of a feature were decided by the AI vs explicitly approved
  • Reviewing the live state of a feature contract in a local browser during development
  • Documenting developer decisions made mid-implementation with numbered notes

Example Workflow

Here's how your AI assistant might use this skill in practice.

INPUT

User asks: "lets diagram epic-notes/webhook-contract.md"

AGENT
  1. 1Check that the file at the given path contains exactly one Mermaid diagram
  2. 2Start a localhost server on port 8080 from the skill engine directory
  3. 3Open the browser pointing to the contract file via query parameter
  4. 4Enable hot reload to reflect badge status changes every 2 seconds
OUTPUT

A live browser view of the contract diagram with current phase and status badges, updating automatically as the file changes