quick-mockups — Claude Code skill: what it does, how to install

---
name: quick-mockups
description: Create multiple UI design mockups in parallel. Use when asked to create mockups, wireframes, or design variations for a feature. Creates HTML files using Mantine v7 + Tailwind following Civitai's design system.
allowed-tools: Read, Write, Glob, Task
---

# Quick Mockups

Create multiple design mockups in parallel using the `design-mockup` agent.

## Usage

When asked to create mockups for a feature:

1. **Create the output directory** if it doesn't exist:
   ```
   docs/working/mockups/<feature-name>/
   ```

2. **Launch 3-5 parallel mockup agents** using the Task tool with `subagent_type: design-mockup`

3. **Each agent creates a unique variation** with different:
   - Layout approaches (grid, list, masonry, cards)
   - Information hierarchy
   - Visual emphasis
   - Interaction patterns

## Directory Structure

```
docs/working/mockups/
├── crucible-discovery/
│   ├── v1-grid-cards.html
│   ├── v2-featured-hero.html
│   ├── v3-compact-list.html
│   └── v4-masonry.html
├── crucible-rating/
│   ├── v1-side-by-side.html
│   ├── v2-stacked.html
│   └── v3-swipe.html
└── [feature-name]/
    └── [variation].html
```

## Prompting Agents

When launching mockup agents, provide:
1. **Feature name** - What page/component to design
2. **Key requirements** - What must be included
3. **Variation focus** - What makes this variation unique
4. **Reference context** - Link to existing similar pages if helpful

Example prompt for agent:
```
Create a mockup for the Crucible Discovery page.

Requirements:
- List of active crucibles as cards
- Show: name, prize pool, time remaining, entry count
- Filter/sort controls (by prize, ending soon, newest)
- "Create Crucible" button

Variation: Grid layout with large hero card for featured crucible

Output to: docs/working/mockups/crucible-discovery/v1-featured-hero.html
```

## After Creating Mockups

1. List all created mockup files
2. Summarize each variation's approach
3. Ask user which direction to pursue or if they want more variations

## Tips

- Create variations that are meaningfully different, not just minor tweaks
- Consider mobile layouts in at least one variation
- Show realistic content (names, numbers, times)
- Include empty states where relevant
- Use the Civitai design patterns from `.claude/agents/design-mockup.md`