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 TN0123/one-shot-ui --skill skillgit clone --depth 1 https://github.com/TN0123/one-shot-uiWrote 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/tn0123/one-shot-ui/skill)<a href="https://agentmods.dev/skills/tn0123/one-shot-ui/skill"><img src="https://agentmods.dev/badge/skills/tn0123/one-shot-ui/skill.svg" alt="Measured on agentmods" 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.00028 | $0.02702 |
| Opus 5 | $0.00014 | $0.01351 |
| Sonnet 5 | $0.00006 | $0.00540 |
| Haiku 4.5 | $0.00003 | $0.00270 |
Grade A, and why
one-shot-ui 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 7d 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 — 195 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You have access to the one-shot-ui CLI tool. Use it to analyze reference
screenshots and compare your implementations against them.
When to Use
- The user provides a screenshot or mockup and asks you to build it
- The user wants to compare their implementation against a design
- The user wants to iteratively refine a UI to match a reference
- The user wants a different UI that copies the style/aesthetic of a screenshot (same design language, different content) — see "Style transfer" below
Workflow
Step 1: Extract the design
Run one-shot-ui extract <reference.png> --json --overlay to get:
- Layout nodes with positions, sizes, colors, gradients, shadows, border radii
- Text blocks with content, font size, weight, color, and
monospace - Design tokens (spacing scale, color palette, radius scale)
- Component clusters (repeated visual patterns)
- Implementation plan (suggested CSS strategy: grid/flex/absolute)
Pass --dpr for Retina/Mac screenshots. A 2x screenshot reports every pixel at
double its CSS value (a 35px heading measures 70px), which throws off fonts, spacing
and sizing. If you know the screenshot is from a Retina/Mac display, pass --dpr 2 so
sizes and bounds come back in CSS pixels. Otherwise check the report's scale block:
units: "css-px" means values are normalized; a scale.scaleHint means it might be
Retina and you should re-run with --dpr 2. Build to the reported CSS pixels.
Step 2: Build the UI
Use the extracted data to write the implementation directly. Set exact:
- Colors (hex values from extraction)
- Spacing (px values from spacing measurements)
- Typography (font sizes, weights from text blocks)
- Border radii, shadows, gradients (from style extraction)
Build to the rulers block — this is the single biggest lever for sizing/spacing.
extract reports deterministic pixel-projection "rulers" so you don't have to eyeball or
hand-measure geometry:
rulers.bands— background-zone heights down the page (e.g. a top header/nav bar's exact height in CSS px, with its background hex). Set those container heights/paddings exactly.rulers.columns— content column left edges and widths (sidebar width, main column, card columns). Drive your container widths / grid tracks from these.rulers.gutters— the exact gaps between columns. Use them forcolumn-gap, margins, padding. These are CSS px (DPR already applied). Matching them up front avoids the slow "off by ~16px, shifted right" iteration loop.
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.
- 7d ago First seen · 195 lines · 28 tokens per session scan A 82650590cecb
one-shot-ui is a skill published in the GitHub repository TN0123/one-shot-ui (4 stars, last pushed 1mo ago), licensed MIT. It adds 28 tokens to every session and 2,702 once invoked, about $0.0001 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
desktop-brand-builder
Generate a branded Qwen Code desktop package from the Tauri desktop shell using a minimal brandId and logo. Use when the user wants a custom, white-label, or rebranded desktop client, installer, DMG/EXE/AppImage/deb, or one-click brand build on top of packages/desktop-shell.
dataviz
Design guidance for charts, graphs, dashboards, maps, and data visualizations, including a local palette validator.
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
write-zot-themes
Help the user create, install, or package zot themes, including theme-only extensions.
anycap-human-interaction
Collect structured visual feedback from humans using AnyCap's annotation tool, or create and iterate on diagrams using the interactive whiteboard (Excalidraw). Covers image annotation, URL/web page review with screen recording, video review, audio feedback, and collaborative diagramming with Mermaid input. Use when…
frontend-ux-engineer
Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.