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 agentmods add skills/dean0x/devflow/ui-designnpx skills add dean0x/devflow --skill ui-designgit clone --depth 1 https://github.com/dean0x/devflowWhat 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 | $0.00067 | $0.01464 |
| Opus 5 | $0.00034 | $0.00732 |
| Sonnet 5 | $0.00013 | $0.00293 |
| Haiku 4.5 | $0.00007 | $0.00146 |
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 2d 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 — 145 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Design Patterns
Reference for intentional visual design. Every choice must be justified. Sources in references/sources.md.
Iron Law
AESTHETICS MUST HAVE INTENT [4][11]
Every visual choice must be justified. Default styles, copied gradients, and "looks modern" are not justifications. If you cannot explain why a specific font, color, or animation exists, it's design debt. Good design is invisible because it serves purpose — it satisfies mental models, not trends. — Don Norman, The Design of Everyday Things [11]; Laws of UX [4]
When This Skill Activates
- Creating/styling UI components; reviewing CSS, Tailwind, or styled-components
- Discussing typography, color schemes, layouts, or design systems
1. Typography [6][7][10][19]
Font choice must match product personality: developer tools → monospace (precision), documentation → serif (readability), marketing → distinctive display. [6][7][27]
Use a mathematical type scale (1.25 major third ratio). All sizes relate harmonically. [10] Line length: 45–75 characters for body text; line-height: 1.7 for prose, 1.2 for headings. [6][7]
Heading levels must differ in weight, tracking, and size — not size alone. [7][15] See references/patterns.md for scale values, font pairs, and heading styles.
2. Color System [1][9][12][14]
Three-layer token architecture (Material Design 3 [1] + W3C Design Tokens spec [9]):
:root {
--blue-600: #2563eb; /* Layer 1: Primitive */
--color-primary: var(--blue-600); /* Layer 2: Semantic */
--button-primary-bg: var(--color-primary);/* Layer 3: Component */
}
Dark mode: swap semantic tokens only — never invert or filter. [23] Elevation in dark mode is expressed via lightness, not shadows. [1][12]
Contrast: 4.5:1 for normal text, 3:1 for large text and UI components. [14][26]
See references/patterns.md for dark surface hierarchy and accessible contrast examples.
3. Spacing [1][13][15]
What ships with it
4 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.
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.
- 2d ago First seen · 145 lines · 67 tokens per session scan A ede7da6904ef
ui-design is a skill published in the GitHub repository dean0x/devflow (19 stars, last pushed 2d ago), licensed MIT. It adds 67 tokens to every session and 1,464 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-30.
Other skills, from other repositories
data-engineering
Skill "data-engineering" from fengshao1227/ccg-workflow, covering 数据工程域 · data engineering, 域概览, 数据管道编排, 框架对比 and airflow 核心模式.
verify-change
变更校验关卡。分析代码变更，检测文档同步状态，评估变更影响范围。当用户提到变更检查、文档同步、代码审查、提交前检查、diff分析时使用。在设计级变更、重构完成时自动触发。.
verify-security
安全校验关卡。自动扫描代码安全漏洞，检测危险模式，确保安全决策有文档记录。当用户提到安全扫描、漏洞检测、安全审计、代码安全、OWASP、注入检测、敏感信息泄露时使用。在新建模块、安全相关变更、攻防任务、重构完成时自动触发。.
liquid-glass
Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
gen-docs
文档生成器。自动分析模块结构，生成 README.md 和 DESIGN.md 骨架。当用户提到生成文档、创建README、创建DESIGN、文档骨架、文档模板时使用。在新建模块开始时自动触发。.
verify-module
模块完整性校验关卡。扫描目录结构、检测缺失文档、验证代码与文档同步。当用户提到模块校验、文档检查、结构完整性、README检查、DESIGN检查时使用。在新建模块完成时自动触发。.