npx skills add smithery/glittercowboy --skill ui-mockup
yugasun/aiops · Archived
ui-mockup
Generate HTML/CSS mockups for UI design. Produces browser-previewable mockup files with placeholder data. Use when the user says ui-mockup, mockup, design UI, wireframe, or needs visual reference for a feature.
Installation
$
npx skills add yugasun/aiops --skill ui-mockup
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
prune
Same source · more installs
yugasun/aiops
Review diffs for over-engineering only. One line per finding: location, what to cut, what repla…
4 installs
lean
Same source · more installs
yugasun/aiops
Minimal solution discipline: YAGNI ladder, stdlib and native first, shortest working diff. Use …
4 installs
improve-codebase-architecture
Same source · more installs
yugasun/aiops
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill t…
4 installs
triage
Same source
yugasun/aiops
Move issues and external PRs through triage roles — categorise, verify, grill if needed, write …
3 installsSimilar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
frontend-design
Same topic
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installs
agent-browser
Same topic
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installs
vercel-react-best-practices
Same topic
vercel-labs/agent-skills
697.8K installs
web-design-guidelines
Same topic
vercel-labs/agent-skills
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installs
microsoft-foundry
Same topic
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installs
azure-diagnostics
Same topic
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsAlso in this package
Other skills from yugasun/aiops · top by installs.
npx skills add yugasun/aiops
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Also listed on
Alternate registries and mirrors of this skill.
Repository health
Stars
4
License
LICENSE
Default branch
main
Open issues
0
Status
Archived
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md3,459 B -
docs
SUMMARY.md227 B
History
- First seen on skills.sh
- First recorded snapshot · 3 installs
SKILL.md
UI Mockup
Generate static HTML mockups as visual reference for Builder implementation.
Output structure
.scratch/<feature>/mockups/
├── index.html # Entry page linking to all mockups
├── <page-name>.html # One HTML per page/state
└── design-notes.md # Design decisions and interactionsMockup rules
HTML
- Self-contained: open directly in browser, no build step
- Inline CSS via
<style>or CDN frameworks (Tailwind CDN preferred) - Semantic HTML structure
- Placeholder data marked with
[placeholder]
CSS
- 8px grid spacing system
- CSS variables for colors and spacing
- Responsive: Desktop (>1024px), Tablet (768-1024px), Mobile (<768px)
- Use media queries for responsive breakpoints
States
Show key states as separate files or CSS classes:
- Default
- Hover / Active
- Error / Validation
- Loading / Empty
- Success
No JavaScript logic
- No event handlers
- No dynamic data fetching
- Interactions described in
design-notes.md - CSS
:hover,:active,:focusallowed for visual states
Template
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Page Name] — Mockup</title>
<style>
:root {
--color-primary: #1a73e8;
--color-error: #d93025;
--color-success: #188038;
--spacing-unit: 8px;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); padding: calc(var(--spacing-unit) * 3); }
/* page-specific styles */
</style>
</head>
<body>
<!-- mockup content -->
</body>
</html>index.html
Entry page with links to all mockup files:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Mockups — [Feature Name]</title>
<style>
body { font-family: sans-serif; padding: 32px; max-width: 600px; }
h1 { margin-bottom: 16px; }
ul { list-style: none; }
li { margin: 8px 0; }
a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<h1>[Feature Name] Mockups</h1>
<ul>
<li><a href="page-name.html">Page Name</a> — description</li>
</ul>
</body>
</html>Design notes format
Write design-notes.md with:
- Pages — table of all mockup files and their purpose
- Design Decisions — colors, fonts, spacing rationale
- Interactions — describe hover, click, transitions in words
- Responsive — breakpoint behavior for each page
- Components — table of UI components used and their variants
Flow
- Read
.scratch/<feature>/NOTES.mdandtech-spec.mdfor context - Identify pages and states needed
- Generate
index.htmlfirst - Generate each page HTML
- Write
design-notes.md - Report: list of generated files + open browser command
Integration with design systems
If the target project has a design system:
- Use its color tokens as CSS variables
- Match its component patterns
- Reference its component names in design-notes.md