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