Use when creating UI mockups and wireframes with rough hand-drawn styling for design collaboration and prototyping
View on GitHubskills/using-roughjs-wireframes/SKILL.md
February 3, 2026
Select agents to install to:
npx add-skill https://github.com/ben-mad-jlp/claude-mermaid-collab/blob/main/skills/using-roughjs-wireframes/SKILL.md -a claude-code --skill using-roughjs-wireframesInstallation paths:
.claude/skills/using-roughjs-wireframes/# Using Rough.js Wireframes
## Overview
**Rough.js wireframes create hand-drawn style UI mockups** that feel informal and invite collaboration. Unlike polished mockups, rough wireframes signal "this is not final" and encourage feedback early in design.
The mermaid-collab system uses **JSON component syntax** (not traditional wireframe markup) to define wireframes that render with rough.js styling. This skill teaches the syntax, patterns, and best practices for creating effective wireframes.
## When to Use
Use this skill when:
- Creating UI prototypes to show to stakeholders early
- Designing interaction flows visually before implementation
- Rapidly iterating on layouts without worrying about polish
- Collaborating on interface design with non-designers
- Building sketches to validate UX concepts
**NOT for:**
- Final production UI (use proper CSS/components)
- Complex animations or interactions
- High-fidelity designs (use Figma/Adobe tools)
- Data visualization requiring precision
## Quick Reference
### Wireframe Root Structure
Every wireframe requires this root structure:
```json
{
"viewport": "mobile",
"direction": "LR",
"screens": [
{
"id": "screen-1",
"type": "screen",
"name": "Screen Name",
"bounds": { "x": 0, "y": 0, "width": 0, "height": 0 },
"children": [...]
}
]
}
```
**Required root fields:**
- `viewport`: `"mobile"` (375px), `"tablet"` (768px), or `"desktop"` (1200px)
- `direction`: `"LR"` (screens left-to-right) or `"TD"` (screens top-down)
- `screens`: Array of screen components
### Basic Component Structure
All components follow this pattern:
```json
{
"id": "unique-id",
"type": "componentType",
"bounds": { "x": 0, "y": 0, "width": 0, "height": 0 },
...type-specific properties
}
```
**Required for all components:**
- `id`: Unique identifier string
- `type`: Component type (lowercase)
- `bounds`: Position/size object (see "How Bounds Work" section)
### Available Component Types
| Co