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 MartinOlivero/saas-builder --skill ui-designgit clone --depth 1 https://github.com/MartinOlivero/saas-builderWrote 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/martinolivero/saas-builder/ui-design)<a href="https://agentmods.dev/skills/martinolivero/saas-builder/ui-design"><img src="https://agentmods.dev/badge/skills/martinolivero/saas-builder/ui-design/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/martinolivero/saas-builder/ui-design"><img src="https://agentmods.dev/badge/skills/martinolivero/saas-builder/ui-design.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.00098 | $0.01532 |
| Opus 5 | $0.00049 | $0.00766 |
| Sonnet 5 | $0.00020 | $0.00306 |
| Haiku 4.5 | $0.00010 | $0.00153 |
Grade A, and why
ui-design 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 9d 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 — 92 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Design
This skill produces distinctive, production-grade interfaces. It orchestrates a UI/UX-pro approach with deliberate taste: decide the design system first, then write code that expresses it.
Analogy: an architect does not start laying bricks. They draw the blueprint — materials, proportions, palette — and only then build. The design system is the blueprint.
Dependencies
This skill works standalone, but it is significantly stronger when the original design skills are installed. Before generating a design system, check what is available and delegate in this order:
ui-ux-pro-maxavailable → invoke it to generate the full design system (palettes, styles, typography). It has the richest design database.taste-skillavailable → apply it as a style layer on top of the system from step 1 (or on top of the embedded fallback).- Neither installed → use the embedded design principles in this skill as the fallback. They are kept below precisely for this case.
Always prefer the originals when present; fall back gracefully and silently when they are not. Never block on a missing dependency.
Workflow
Step 1 — Identify the product type
The product type drives the entire visual language. Classify first: fintech, edtech, e-commerce, SaaS, health, dev tool, social, creative, internal/dashboard, etc. A health app and a crypto exchange should never look the same.
Step 2 — Generate the design system BEFORE writing code
First, resolve the design system per the Dependencies order above:
- If
ui-ux-pro-maxis installed, let it produce the system, then optionally refine withtaste-skill. - If neither is installed, apply the embedded fallback below.
Embedded fallback — define and state these explicitly:
- Visual style — pick one with intent: glassmorphism, minimalism, brutalism, bento grid, neo-retro, editorial, etc. Justify it against the product type.
- Color palette — primary, secondary, neutrals, and semantic colors (success / warning / error / info). Defined as tokens, not ad-hoc hex.
- Typography — a heading font, a body font, and a mono font (for code/numbers). Avoid defaulting to Inter for everything.
- Spacing and border radius — a consistent scale (e.g. 4/8/12/16/24) and a radius decision (sharp, soft, or pill).
- Dark mode — decide yes or no up front; if yes, define the dark tokens now, not later.
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.
- 9d ago First seen · 92 lines · 98 tokens per session scan A 228d864de352
ui-design is a skill published in the GitHub repository MartinOlivero/saas-builder (2 stars, last pushed 21d ago), licensed MIT. It adds 98 tokens to every session and 1,532 once invoked, about $0.0005 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
cinematic-scroll-landing
Build dark, cinematic, awwwards-style landing pages with seamless scroll choreography — endless/infinite scroll loops, pinned image-morph galleries, book page-flip feature sections, full-page book sites, cross-dissolve scene transitions, unified AI-generated imagery, film-slate section markers. Use when the user asks…
modern-frontend-design
How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a…
hps-true-blueprint
OpenDesign's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org.
deck-open-slide-canvas
OpenDesign's architecture review: the local daemon + agent-runtime design, the tradeoffs, and the decision to lock. Built as a decision-grade product management deck for staff eng, tech leads, security.
frontend-design-landing-page
Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds…
frontend-design-saas
S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal/customer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens…