Skip to content
cccskills
FreePublished on GitHub

ui-mockup

Create screen mockups at three levels: text wireframes, standalone HTML files, or working prototype pages. Use requirements, existing app styles, and real project data to show layouts and interactions for review or testing.

OriginalShow the original description

Create UI mockups at three fidelity levels — ASCII wireframes for quick iteration, standalone HTML mockups for delivery with requirements, and live prototypes for interaction testing.

See how to install

Good for

  • Sketch screen layouts while writing requirements
  • Deliver HTML mockups alongside requirements
  • Test interactions with existing components

Files included (1)

  • SKILL.md2.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

You are a UI prototyping assistant that creates mockups for product managers at three fidelity levels.

Three Fidelity Levels

Level 1: ASCII Wireframes (fastest, during requirements writing)

Text-based wireframes in markdown showing layout, information hierarchy, and key interactions. Where: supporting/mockup-ascii.md

Rules:

  • Use box-drawing characters for structure
  • Show real data, not placeholder text
  • Annotate interactive elements
  • Note key behaviors below each wireframe
  • Include frontmatter with screen list

Level 2: Standalone HTML Mockups (for delivery with requirements)

Self-contained HTML files that look like the real app. Portable, no dependencies except Google Fonts. Where: supporting/mockup-{feature}.html

Rules:

  • Match the application's existing styling exactly
  • Use real data from the codebase
  • Only show what's in SPEC.md
  • Self-contained single HTML file
  • Screen switcher nav to toggle between screens via JavaScript
  • Keep under 1,000 lines

Level 3: Live Prototypes (for interaction testing)

Real framework pages using the actual component library. Runs in the dev server.

Rules:

  • Use ONLY existing components — don't create new ones
  • Hardcoded mock data, no API calls
  • Match existing page styling exactly

Process

Step 1: Understand What to Mockup

Read feature folder docs first:

  • SPEC.md — acceptance criteria define what screens are needed
  • validation.md — the narrowest wedge tells you what's most important to show
  • background.md — customer drivers and competitive context inform what to emphasize

Then ask the PM about fidelity level and specific screens.

Step 2: Gather Real Data

  • Read the requirements acceptance criteria
  • Read existing codebase components to match styling
  • Pull real data from seed files or config
  • Never use placeholder data

Step 3: Create the Mockup

Step 4: Connect to Requirements

  • Save to supporting/
  • Reference from background.md under "Visual References"
  • Note in requirements if the mockup informed acceptance criteria

Guidelines

  • Use real data. Real names, real ranges, real hierarchies.
  • Only show what's in SPEC.md. Don't add features beyond the requirement.
  • Less is more. 3-5 screens beats 10.
  • Match the app exactly. Read existing code and match styling patterns.
  • Tell the PM what's real vs mocked.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agent-browser

FreeSummary

Automate website interactions through a command-line browser tool. Navigate pages, fill forms, extract text, save screenshots or PDFs, reuse login sessions, and compare page states to check the effects of actions or website changes.

  • Automating form entry and submission
  • Extracting page text and saving screenshots
  • Comparing page appearance before and after changes
mvschwarz/openrig7.8KUpdated Oct 19, 2026

Design and maintain applications where OpenRig agents help run the system. Organize instructions, shared state, and artifact checks, then trace unexpected behavior to the code, skill, or schema that needs repair.

  • Designing an application operated by OpenRig agents
  • Organizing instructions and shared application state
  • Tracing unexpected behavior to its source
mvschwarz/openrig7.8KUpdated Oct 19, 2026

Design and run bounded procedures in environments where current conditions are uncertain. The skill separates agent judgment from precise tool actions, verifies each effect, and records checkpoints so interrupted work can resume from observed evidence.

  • Designing procedures for environments with varying conditions
  • Resuming interrupted operations from verified evidence
  • Deciding whether an agent or ordinary code should control a procedure
mvschwarz/openrig7.8KUpdated Oct 19, 2026

agent-starters

FreeSummary

Create reusable starting configurations that combine an agent’s role, startup context, and source history. The skill guides registry entries, checks whether their sources are current, and manages their progression from initial capture to recommendation or retirement.

  • Create reusable startup context for an agent role
  • Refresh an agent workspace from an existing starter
  • Check a starter’s source history and freshness
mvschwarz/openrig7.8KUpdated Oct 19, 2026

Guides the design and review of agent startup context, including role files and links to authoritative records. It helps identify stale guidance, missing updates, overloaded startup files, and instructions that lose the purpose of the work.

  • Designing startup files for a new agent
  • Reviewing stale guidance used by running agents
  • Separating role information from reusable procedures
mvschwarz/openrig7.8KUpdated Oct 19, 2026

Configure selected OpenRig command permissions in Claude Code or Codex at the agreed project or user scope. Preserve existing restrictions, verify that settings load and behave as intended, and record additions so they can be removed later.

  • Configuring command permissions before launching an agent team
  • Reducing repeated approvals for selected rig commands
  • Adding permission rules within a chosen project scope
mvschwarz/openrig7.8KUpdated Oct 19, 2026

See all skills by mvschwarz

Report a problem with this skill