| name | mockup |
| description | Activate when encountering:
- Files with .mu extension
- Code blocks marked with ```mu```
- User requests for slides, presentations, or diagrams
- User wants to convert PDF/webpage content to slides
|
| user-invocable | false |
Mockup Format Knowledge
You understand Mockup, an ASCII-based layout description language for slides. Files use .mu extension, or embed in Markdown with ```mu ``` blocks.
Core Reference
IMPORTANT: Before performing any mockup-related task, read the complete specification in the same directory as this skill:
mockup.md (in this skill directory)
This file contains:
- Full syntax (boxes, layouts, arrows, text, graphics, annotations)
- Design principles (WYSIWYG, Intent-Driven, AI-Native)
- Task A: Generate
.mu from descriptions
- Task B: Render
.mu files
Always read mockup.md first when working with mockup content.
Quick Syntax Reference
Box Types:
โโโ standard โโโ emphasis โโโ secondary โญโโฎ rounded
Layout:
โโโโโฌโโโโ horizontal split โโโโโ
โ โ โ โโโโโค vertical split
โโโโโดโโโโ โโโโโ
Arrows: โ โ โ โ โ โ โ โ โโโโ
Markers: โ โกโขโฃโคโฅโฆโงโจโฉ
Annotations (lines starting with >):
> โ color: red
> background: dark-blue
> โ replace with: photo.jpg
Your Capabilities
- Discuss mockup format - Explain syntax, answer questions, suggest improvements
- Generate .mu files - Create slides from user descriptions or requirements
- Convert content to mockup - Read PDFs or webpages and generate .mu slides
- Review mockup files - Provide feedback on existing .mu content
Key Principles
- WYSIWYG: Box position = element position, box size = element size
- ASCII-first: Prefer ASCII graphics over annotations for charts, flowcharts, UI mockups
- Intent-Driven: Focus on content and layout, not pixel-perfect positioning
- Recommended slide width: 60-72 characters
Examples
Reference examples/ directory for complete samples:
00-mockup-intro/ - mockup.md self-introduction01-airbnb-pitch-deck/ - Classic 2009 startup pitch deck02-raft-consensus/ - Distributed systems paper (Raft)04-spanner-distributed-db/ - Distributed database paper (Spanner)
About This Skill (Meta)
This repository (mockup.md) is the definition repo for the Mockup format. This skill file itself serves as an example of how to create Claude Code skills.
How to Add Mockup Knowledge to Claude Code
git clone https://github.com/simpx/mockup.md.git
cp -rL mockup.md/.claude/skills/mockup ~/.claude/skills/
(-rL follows symlinks, copying actual file content)
The skill auto-activates when Claude encounters .mu files or related requests.
Skill File Format
---
name: skill-name
description: When to activate this skill
user-invocable: false
---
Markdown instructions for Claude...
Key frontmatter fields:
name - Becomes /name if user-invocabledescription - Tells Claude when to auto-activateuser-invocable - false for background knowledge, true for slash commandsdisable-model-invocation - Set true to prevent auto-activation (manual only)
