SECURITY REVIEW
Not yet assessed
Review the original instructions and requested permissions before installing.
No security review is available for this catalog entry yet.
Design · Frontend · Tailwind Css / AGENT SKILL
quick-mockups
0
Create multiple UI mockups and wireframes as HTML using Mantine v7, Tailwind, and Civitai's design system.
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.
Understand the trade-offs.
SKILL QUALITY
Not yet assessed
How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.
No quality assessment is available for this catalog entry yet.
The full skill.
Original instructions from the publisher’s SKILL.md
# 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`