blueprint

Sketch proposed code changes visually with Mermaid diagrams before implementation.

9|Updated Jul 17, 2026
One-click install
npx skills add https://github.com/Yassimba/loom --skill blueprint-yassimba
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: blueprint
Source: https://github.com/Yassimba/loom/tree/main/skills/blueprint
Command: npx skills add https://github.com/Yassimba/loom --skill blueprint-yassimba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Jumping straight into code without a shared visual design leads to misaligned implementations and costly rework. This Skill produces a Mermaid-based design blueprint of a proposed change so teams can decide whether and how to build it before writing code. ## Core Features & Use Cases - Visual Change Design: Renders the goal, current versus proposed behavior, affected code, and trade-offs as fenced Mermaid diagrams with color-coded markers (:::red removed, :::green added, :::orange changed). - Code Contract Integration: Runs the code-contracts skill's obligation sweep during design and materializes approved contracts into target declarations or CONTRACTS files, validated with cc-check format and cc-check list. - Reuse-First Planning: Loads the ponytail skill when available and prioritizes reusing existing code and interfaces before adding abstractions or dependencies. - Use Case: Before refactoring a payment module, generate a blueprint showing structure, input/output flow, interface dependencies, and contract status so reviewers can approve the direction before implementation begins. ## Quick Start Use the blueprint skill to sketch the proposed caching layer change with Mermaid diagrams before we start implementing it.

Frequently Asked Questions about blueprint

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize a proposed code change before implementing it?

Use Mermaid diagrams to show the goal, current versus proposed behavior, affected code, and key trade-offs. This Skill generates fenced mermaid blocks covering structure, input/output flow, interface dependencies, and a snippet of the main interfaces.

How do I document code contracts during the design phase?

Run the code-contracts skill's obligation sweep while designing, then write each approved contract into its target declaration or CONTRACTS file. Validate contract-only edits with cc-check format and cc-check list before implementation.

Can Mermaid diagrams show which code is added or removed?

Yes, Mermaid supports class-based styling for change marking. This Skill uses :::red for removed elements, :::green for added elements, and :::orange for changed elements so reviewers can see the delta at a glance.

When should a contract stay in the blueprint instead of the code?

Leave a contract in the blueprint when the target code does not exist yet or an assumption still needs approval. The blueprint lists unmaterialized proposals with their intended path, exact @cc text, and blocker.

What are the limitations of diagram-based design reviews?

Diagrams communicate structure and flow but cannot verify runtime behavior or catch implementation bugs. They must be grounded in actual source code, and proposals must be clearly distinguished from verified facts to remain trustworthy.