wireframe

Create UI wireframes and mockups using drawio XML format with platform-specific UI component libraries. Best for web page layouts, iOS/Android mobile app mockups, and Bootstrap-based designs. Built on drawio with mockup-specific stencils. NOT for simple flowcharts (use mermaid) or data visualization (use vega).

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "wireframe" with this command: npx skills add markdown-viewer/skills/markdown-viewer-skills-wireframe

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 ```drawio code 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

TypePurposeStencil LibraryExample
Web WireframeDesktop/responsive web layoutsmxgraph.mockup.* (104 components)web-landing-page.md
iOS MockupiPhone/iPad app screensmxgraph.ios7.* (168 icons)ios-app-login.md
Android MockupAndroid phone/tablet screensmxgraph.android.* (49 components)android-app-list.md
DashboardAdmin panels, data dashboardsmxgraph.mockup.*dashboard-admin.md

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

General

drawio

No summary provided by upstream source.

Repository SourceNeeds Review
133-markdown-viewer
General

floor-plan

No summary provided by upstream source.

Repository SourceNeeds Review
105-markdown-viewer
General

mermaid

No summary provided by upstream source.

Repository SourceNeeds Review
104-markdown-viewer
General

architecture

No summary provided by upstream source.

Repository SourceNeeds Review
96-markdown-viewer