---

name: ui-mockup display_name: UI Mockup description: Create high-fidelity UI mockups in HTML/CSS — dashboards, mobile screens, landing pages, and component previews. category: Creative & Design platforms: [claude.ai, api] version: 1.0.0 author: Claude Code tags: [ui-mockup]

UI Mockup

Overview

Create high-fidelity UI mockups in HTML/CSS — dashboards, mobile screens, landing pages, and component previews.

When to Use This Skill

Use UI Mockup when you need to:

• Work with ui mockup tasks in your project or workflow
• Automate ui mockup operations at scale
• Generate production-quality ui mockup output quickly

Instructions

When this skill is active, Claude will:

1. Understand the full context of your ui mockup request
2. Apply best practices and conventions for Creative & Design
3. Produce clean, well-structured, production-ready output
4. Explain key decisions and offer alternatives where relevant

Examples

Example 1 — Basic Usage

User: Help me get started with ui mockup.

Claude: I'll walk you through the essential steps for ui mockup in your context...

Example 2 — Advanced Usage

User: I need a production-ready ui mockup setup with full error handling.

Claude: Here's a complete, production-hardened ui mockup implementation...

Guidelines

• Always validate inputs before processing
• Follow the conventions of the target platform or language
• Prefer explicit over implicit — clarity beats cleverness
• Include comments for non-obvious logic
• Suggest tests or validation steps where appropriate

Dependencies

Required: html, css

Platforms

Available on: claude.ai, api

---

Part of the claude-skills collection — 183+ skills for Claude.