Use when creating or editing UI mockups, screen layouts, or interface designs. Use INSTEAD of ASCII art for any visual UI representation.
Generates visual UI mockups using mermaid wireframe syntax for screens and layouts.
/plugin marketplace add ben-mad-jlp/claude-mermaid-collab/plugin install ben-mad-jlp-mermaid-collab@ben-mad-jlp/claude-mermaid-collabThis skill inherits all available tools. When active, it can use any tool Claude has access to.
ALWAYS use mermaid wireframe syntax for UI mockups. Never use ASCII art boxes, tables, or text representations for UI layouts.
Use wireframe syntax when:
NEVER use ASCII art for UI. Wireframe syntax renders as actual visual diagrams.
wireframe [viewport] [direction]
[component] ["label"] [modifiers]
Viewports: mobile (375×600), tablet (768×1024), desktop (1200×800)
Direction: LR (horizontal screens), TD (vertical screens)
Containers:
| Component | Purpose |
|---|---|
col | Stack children vertically |
row | Place children horizontally |
Card | Bordered container |
screen "label" | Separate viewport (for flows) |
Components:
| Component | Example |
|---|---|
AppBar "title" | Top navigation bar |
Title "text" | Large heading |
Text "text" | Body text |
Input "placeholder" | Text field |
Button "label" | Clickable button |
Checkbox "label" | Checkbox |
Switch "label" | Toggle |
Dropdown "label" | Select menu |
Avatar | User avatar |
Image | Image placeholder |
spacer | Flexible space |
divider | Horizontal line |
Modifiers: primary, secondary, danger, disabled, flex=N, width=N, height=N, padding=N
Button "Submit" not Button SubmitButton "Save" primary not primary Button "Save"header "Col1 | Col2" and row "Val1 | Val2"Mobile form:
wireframe mobile
col
AppBar "Form Title"
col padding=24
Input "Field 1"
Input "Field 2"
spacer
Button "Submit" primary
Multi-screen flow:
wireframe mobile LR
screen "Login"
col
AppBar "Sign In"
col padding=24
Input "Email"
Button "Login" primary
screen "Home"
col
AppBar "Dashboard"
Title "Welcome"
Desktop sidebar layout:
wireframe desktop
col
AppBar "App"
row flex
col width=200
List "Nav 1"
List "Nav 2"
col flex
Title "Content"
| Mistake | Fix |
|---|---|
Using ASCII boxes [Button] | Use Button "label" |
| Missing quotes on labels | Title "Hello" not Title Hello |
| Wrong indentation | Exactly 2 spaces per level |
| Tabs instead of spaces | Use spaces only |
| Modifier before label | Button "X" primary not primary Button "X" |
If you find yourself:
+----+ boxes → Use wireframe syntax| Button | → Use Button "label"Grid with header/rowThese all mean: Use wireframe syntax instead.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.