/mockup

Generate UI mockups as HTML files with inline CSS for rapid visual prototyping.

Boost this command

rohitg00@rohitg00

GitHub

From plugin

rohitg00-claude-code-toolkit

2.6k199 skills138 agents199 commands

Install

$ npx -y skills add rohitg00/awesome-claude-code-toolkit --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/mockup

Context preview

What this command does when you run it.

Generate UI mockups as HTML files with inline CSS for rapid visual prototyping.

Command definition

mockup.md

Generate UI mockups as HTML files with inline CSS for rapid visual prototyping.

Steps

1. Gather the mockup requirements: 2. Create a single HTML file per screen with inline styles: 3. Add realistic placeholder content: 4. Make interactive elements functional with minimal JS: 5. Add annotations explaining design decisions. 6. Test that the mockup renders correctly in a browser.

Format

Mockup: <screen name>
File: <path to HTML file>
Screens: <list of views created>
Interactions: <what is clickable/interactive>

Rules

Single HTML file per screen with zero external dependencies.
Use CSS custom properties for colors so they are easy to change.
Include mobile and desktop layouts using media queries.

Read it on GitHub ↗

Ships withrohitg00-claude-code-toolkit

The most comprehensive toolkit for Claude Code -- 135 agents, 35 curated skills (+400,000 via SkillKit), 42 commands, 176+ plugins, 20 hooks, 15 rules, 7 templates, 15 MCP configs, 26 companion apps, 53 ecosystem entries, and more.

Get the whole plugin

Stats

Python JavaScript React CSS Kubernetes

+7 tags

AWS Git GitHub CI/CD Anthropic MCP Flutter

2,612

Stars

955

Forks

Maintained

Maintenance

JavaScript