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 oil-oil/ui-ux-guide --skill oiloil-ui-ux-guidegit clone --depth 1 https://github.com/oil-oil/ui-ux-guideWrote 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/oil-oil/ui-ux-guide/oiloil-ui-ux-guide)<a href="https://agentmods.dev/skills/oil-oil/ui-ux-guide/oiloil-ui-ux-guide"><img src="https://agentmods.dev/badge/skills/oil-oil/ui-ux-guide/oiloil-ui-ux-guide/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/oil-oil/ui-ux-guide/oiloil-ui-ux-guide"><img src="https://agentmods.dev/badge/skills/oil-oil/ui-ux-guide/oiloil-ui-ux-guide.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
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.00081 | $0.03773 |
| Opus 5 | $0.00041 | $0.01886 |
| Sonnet 5 | $0.00016 | $0.00755 |
| Haiku 4.5 | $0.00008 | $0.00377 |
Grade A, and why
oiloil-ui-ux-guide 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 yesterday.
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 — 221 lines — stays where its author put it; the contents beside it link to each section on GitHub.
OilOil UI/UX Guide
A style-neutral UI/UX consultation skill. The skill operates as a patient interviewer: it listens before it recommends, treats the user's taste and constraints as primary input, and only opens its own opinions when the user explicitly invites them.
Default behavior
When triggered without an explicit mode, run design. Switch only when the user is explicit:
| User intent | Mode |
|---|---|
| Define / refine the design system itself; "let's pick colors and fonts" | design (default) |
| "Give me rules for a settings page" / "what's the do/don't list for a dashboard" | guide |
| "Review this screen" / pasted screenshot with no other instruction | review |
If intent is ambiguous, default to design and announce the mode in one short sentence so the user can correct you.
别一上来就问问题
进入 design 模式的第一件事不是问，是看。花 30 秒扫一遍项目：
tailwind.config/theme.ts/globals.css里有什么 tokenpackage.json里用了什么 UI 框架（shadcn / radix / chakra / ant / mui / 原生）- 挑两三个真实的 UI 文件看看实际的字号、圆角、间距是怎么写的
- 如果项目根目录已经有
design-spec.md/DESIGN.md/AGENT.md，直接读完
这一步不可省。不看代码就开口，你只是在凭空猜——而且经常会问出"项目里其实早就定了"的问题，让用户立刻觉得你没用心。
看完之后，先判断这个项目处在哪个阶段
不同阶段的项目，开口方向完全不一样。把项目放进下面五档之一：
| 档 | 信号 | 开口走向 |
|---|---|---|
| A. 空白 | Tailwind 默认配色，无自定义 token，没几个真组件 | 走完整流程：找意象 → 选 token → 业务设计稿 → 输出 spec |
| B. 半成品 | 有 token 但分散，组件风格不统一，圆角 4/8/16 散落 | 整理已有 + 补全，先问哪些是"想保留的决定"哪些是"凑合用的" |
| C. 成熟 | 完整 token + 清晰命名 + 视觉隐喻 + 注释里能看到对比度审计或迭代痕迹 | 一句话承认现状，直接列五个来意分支让用户挑 |
| D. 复杂遗留 | 多套 token 并存、新旧风格混用、看不出主线 | 建议先走 review 模式做审计，再讨论要不要重构 |
| E. 不确定 | 扫完心里没底 | 描述看到的，问用户这套是想稳定还是想换方向 |
开口的两条原则
1. 用事实描述代替自我说明。 描述项目现状（"你这套已经定得挺清楚了"、"用的是 Tailwind 默认配色"），而不是描述你自己（"我打算 X" / "我接下来 Y"）。用户关心项目，不关心你的工作方法。
2. 默认不堆砌看代码的细节。 开口里不要逐项罗列 5–8 个观察点（"用了 Next 15 + shadcn + Tailwind v3，HSL 变量 + 双模式 + 视觉隐喻 + WCAG 审计..."）。一句概括即可。如果用户问"你看到了什么"再展开。
五档开口范例
A 空白：
看了下，是新建的 Next + Tailwind 项目，用的是默认配色，组件还很少。在我开始问之前——你有没有什么已经定的，比如品牌色、字体、想致敬的产品？
B 半成品：
看了下。token 在 globals.css 里定了一部分，但圆角在不同组件里有 4 / 8 / 12 三种写法。是想把现有的整理统一好，还是借这次换个方向？
What ships with it
21 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/evals.json 13 KB
- references/business-mockup-contract.md 8.9 KB
- references/checklists.md 4.5 KB
- references/design-interview.md 21 KB
- references/design-preview-template.html 103 KB
- references/design-psych.md 3.6 KB
- references/design-spec-template.md 6.5 KB
- references/extended-dimensions.md 10 KB
- references/icons.md 1.6 KB
- references/interaction-psychology.md 7.6 KB
- references/review-template.md 1.8 KB
- references/style-families/brand-driven.md 3.8 KB
- references/style-families/brutal.md 2.4 KB
- references/style-families/editorial.md 2.3 KB
- references/style-families/index.md 3.1 KB
- references/style-families/modern-minimal.md 2.5 KB
- references/style-families/playful.md 2.6 KB
- references/style-families/premium-luxury.md 2.7 KB
- references/style-families/tech-cyberpunk.md 2.9 KB
- references/style-families/warm-content.md 2.3 KB
- references/system-principles.md 5.2 KB
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.
- yesterday Changed · -60 tokens per session 19a5435b9f1c
- 12d ago First seen · 221 lines · 141 tokens per session scan A f4db18a8adf0
oiloil-ui-ux-guide is a skill published in the GitHub repository oil-oil/ui-ux-guide (94 stars, last pushed 2d ago), licensed Apache-2.0. It adds 81 tokens to every session and 3,773 once invoked, about $0.0004 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-30.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
make-resume
A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.