civitai / quick-mockups
Install for your project team
Run this command in your project directory to install the skill for your entire team:
mkdir -p .claude/skills/quick-mockups && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/874" && unzip -o skill.zip -d .claude/skills/quick-mockups && rm skill.zipProject Skills
This skill will be saved in .claude/skills/quick-mockups/ and checked into git. All team members will have access to it automatically.
Important: Please verify the skill by reviewing its instructions before using it.
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.
6 views
1 installs
Skill Content
---
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`