Does this skill require external tools?

Yes, it integrates with the mermaid-collab MCP server to provide real-time visual previews and document management capabilities.

How does this skill help with UI design?

It automatically generates wireframe diagrams using Mermaid syntax, allowing you to visualize and iterate on layouts in real-time within your browser before writing code.

What is the benefit of the 200-300 word section limit?

Breaking design into small sections ensures that every specific detail is reviewed and validated individually, preventing misunderstandings and ensuring high-quality documentation.

What types of diagrams can I create?

The skill supports flowcharts for system logic, sequence diagrams for data flow, state diagrams for behavior, and wireframes for user interfaces.

How do I approve a proposed design section?

Claude presents a section with a [PROPOSED] marker and a preview link. You can respond with 'Accept' to finalize it, 'Reject' to revise, or 'Edit' to make changes yourself.

Brainstorming & Designing Collab

Name: Brainstorming & Designing Collab
Author: ben-mad-jlp

byben-mad-jlp

•

Collaboration Tools

Facilitates structured architectural design and UI wireframing through incremental validation and real-time Mermaid diagramming.

This skill manages the transition from abstract ideas to concrete technical specifications by breaking the design process into small, manageable sections for better clarity. It leverages the Mermaid Collab MCP to provide visual context through real-time diagrams, wireframes, and flowcharts. By requiring explicit user validation for every 200-300 word design block and enforcing a visuals-first approach for system architecture and user interfaces, it ensures that technical designs are thoroughly vetted, documented, and aligned with user expectations before any code is written.

Key Features

01Real-time Mermaid diagram generation for architecture, state machines, and data flows.

02Incremental design validation using 200-300 word sections to prevent scope creep.

03Integrated design document management with automated patching and versioned checkpoints.

04Multi-approach exploration with comparative trade-off analysis and expert recommendations.

051 GitHub stars

06Automated UI wireframing for rapid interface prototyping and layout design.

Use Cases

01Rapidly prototyping UI/UX layouts through collaborative wireframing and iterative feedback.

02Documenting technical specifications with step-by-step stakeholder approval gates.

03Planning complex microservices architecture with visual data flow and sequence diagrams.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ben-mad-jlp/claude-mermaid-collab brainstorming-designing

For use in Claude.ai and ChatGPT

Download Skill