Agent skill

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.

View SKILL.md on GitHub Repository
Stars 7,065
Forks 713

Install this agent skill to your Project

npx add-skill https://github.com/civitai/civitai/tree/main/.claude/skills/quick-mockups

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

civitai/civitai

clickhouse-query

Run ClickHouse queries for analytics, metrics analysis, and event data exploration. Use when you need to query ClickHouse directly, analyze metrics, check event tracking data, or test query performance. Read-only by default.

7,065 713
Explore
civitai/civitai

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.

7,065 713
Explore
civitai/civitai

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.

7,065 713
Explore
civitai/civitai

bitdex-test

7,065 713
Explore
civitai/civitai

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.

7,065 713
Explore
civitai/civitai

agent-review

Get external agent review and feedback. Routes Anthropic models through Claude Agent SDK (uses local subscription) and other models through OpenRouter API. Use for code review, architecture feedback, or any external consultation.

7,065 713
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results