quick-mockups
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.
Best use case
quick-mockups is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using quick-mockups should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/quick-mockups/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How quick-mockups Compares
| Feature / Agent | quick-mockups | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
AI Agents for Startups
Explore AI agent skills for startup validation, product research, growth experiments, documentation, and fast execution with small teams.
SKILL.md Source
# 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`Related Skills
worktree
Create and manage git worktrees with automatic environment setup. Creates worktrees at ../model-share-<branch>, copies .env, and runs pnpm install.
ux-design
UX design methodology and external consultation. Use when creating user flows, wireframes, interaction patterns, or getting UX feedback. Provides structured frameworks for user-centered design.
retool-query
Run queries against the Retool PostgreSQL database for moderation notes, user notes, and other Retool-managed data. Read-only by default. Use when you need to query the Retool database directly.
redis-inspect
Inspect Redis cache keys, values, and TTLs for debugging. Supports both main cache and system cache. Use for debugging cache issues, checking cached values, and monitoring cache state. Read-only by default.
ralph
Autonomous agent for tackling big projects. Create PRDs with user stories, then run them via the CLI. Sessions persist across restarts with pause/resume and real-time monitoring.
postgres-query
Run PostgreSQL queries for testing, debugging, and performance analysis. Use when you need to query the database directly, run EXPLAIN ANALYZE, compare query results, or test SQL optimizations. Always uses read-only connections unless explicitly directed otherwise.
opensearch-admin
Inspect and debug OpenSearch clusters — health, index stats, search performance, query profiling, mappings, shards, and thread pools. Read-only admin operations for monitoring and troubleshooting.
mod-actions
Take moderator actions on users - ban, mute, remove content, manage leaderboard eligibility, send DMs. Use when you need to ban a user, mute them, send direct messages, or take other moderation actions.
metabase
Create and manage Metabase questions, dashboards, and public links. Use when the user wants to build metrics dashboards, create saved questions with SQL queries, or share analytics publicly.
meilisearch-admin
Check Meilisearch index status, tasks, health, and settings. Use for debugging search issues, monitoring indexing tasks, and inspecting index configuration. Read-only admin operations.
freshdesk
Interact with Freshdesk support platform - search/view/update tickets, reply to customers, add notes, look up contacts, and manage Knowledge Base articles. Use when you need to manage support tickets, look up customer information, or work with KB content.
flipt
Manage Flipt feature flags - list, create, enable/disable, and configure rollout rules. Use when you need to control feature flag state or set up segmented rollouts.