Design Skills

# Mockup Skill Create mockups and wireframes using SVG markup. Mockups are rendered automatically when you use a `mockup` code block. > **See also:** `output_reference` skill for general output formatting guidelines and when to use different visualization types. ## When to Use Use mockups to: - Visualize proposed UI layouts and screen designs - Create wireframes for new features or pages - Sketch visual concepts, icons, or illustrations - Illustrate page structure and component placement - Mock up mobile, tablet, and desktop screens - Show navigation flows with visual examples - Create simple diagrams or visual explanations that don't fit Mermaid's structured formats > **Not for diagrams.** For flowcharts, sequence diagrams, architecture diagrams, class diagrams, or any structured diagram, use ` ```mermaid ` instead — it is more concise, less error-prone, and handles layout automatically. ## Syntax Wrap your SVG mockup in a fenced code block with `mockup` as the language: ````...