wireframe
SKILL.md
UI Wireframe & Mockup Generator
Quick Start: Choose platform (Web/iOS/Android) → Add UI components from stencil library → Arrange in screen layout → Add navigation flows → Wrap in ```drawio fence.
⚠️ IMPORTANT: Always use
```drawiocode fence. NEVER use```xml— it will NOT render as a diagram.
Critical Rules
🔗 This is a drawio-derived skill. All structure, layout, and edge routing rules inherit from drawio SKILL.md. Read the base rules first.
Wireframe-specific additions:
- Check stencils/README.md for exact UI stencil names
- Use consistent spacing: 10px for tight, 20px for normal, 40px for sections
- Mobile screens: iPhone 375×812, Android 360×800 (logical pixels)
- Web wireframes: 1200px or 1440px width for desktop
Wireframe Types
| Type | Purpose | Stencil Library | Example |
|---|---|---|---|
| Web Wireframe | Desktop/responsive web layouts | mxgraph.mockup.* (104 components) |
web-landing-page.md |
| iOS Mockup | iPhone/iPad app screens | mxgraph.ios7.* (168 icons) |
ios-app-login.md |
| Android Mockup | Android phone/tablet screens | mxgraph.android.* (49 components) |
android-app-list.md |
| Dashboard | Admin panels, data dashboards | mxgraph.mockup.* |
dashboard-admin.md |
Weekly Installs
144
Repository
markdown-viewer/skillsGitHub Stars
4
First Seen
Feb 6, 2026
Security Audits
Installed on
gemini-cli139
opencode138
github-copilot135
codex135
kimi-cli131
amp129