Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add yugasun/aiops --skill ui-mockupgit clone --depth 1 https://github.com/yugasun/aiopsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yugasun/aiops/ui-mockup)<a href="https://agentmods.dev/skills/yugasun/aiops/ui-mockup"><img src="https://agentmods.dev/badge/skills/yugasun/aiops/ui-mockup/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/yugasun/aiops/ui-mockup"><img src="https://agentmods.dev/badge/skills/yugasun/aiops/ui-mockup.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00054 | $0.00925 |
| Opus 5 | $0.00027 | $0.00463 |
| Sonnet 5 | $0.00011 | $0.00185 |
| Haiku 4.5 | $0.00005 | $0.00093 |
Grade A, and why
ui-mockup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 135 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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 interactions
Mockup 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>
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 135 lines · 54 tokens per session scan A 00b78cbac3d4
ui-mockup is a skill published in the GitHub repository yugasun/aiops (4 stars, last pushed 19d ago), licensed Apache-2.0. It adds 54 tokens to every session and 925 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
webflow-mcp:interactions
Create, update, list, and delete Webflow IX3 interactions (GSAP animations) through Webflow MCP. Use when the user wants click/hover/load/scroll/mouse-move animations, interaction timelines, or datainteractionstool / createinteraction payloads. Requires beta MCP + ff-ix3-interaction-apis during dogfood.
webflow-mcp:flowkit-naming
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Runs headlessly against a page ID — no Designer connection required, except for the…
ardot-style-guide
A design-system workflow for choosing and applying colors, fonts, spacing, and page layouts in Ardot projects.
cf-design
UI design workflow — scan patterns, design new UI, or modify UI consistently. Use to redesign a component/page, change colors/typography/style, or extract the design system. Triggers: "make it look like", "update the styling", "redesign this", "match the existing style", "add a dark mode", "make it more minimal".
gpt-taste
High-motion Awwwards-style frontend direction using GSAP, editorial typography, dense bento composition, and cinematic section choreography. Use only when the user explicitly wants an experimental marketing page or portfolio; do not use for routine product UI, dashboards, or accessibility-critical services.