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/telagod/code-abyss/applying-ui-design-systemnpx skills add telagod/code-abyss --skill applying-ui-design-systemgit clone --depth 1 https://github.com/telagod/code-abyssWrote 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/telagod/code-abyss/applying-ui-design-system)<a href="https://agentmods.dev/skills/telagod/code-abyss/applying-ui-design-system"><img src="https://agentmods.dev/badge/skills/telagod/code-abyss/applying-ui-design-system.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 | $0.00076 | $0.00944 |
| Opus 5 | $0.00038 | $0.00472 |
| Sonnet 5 | $0.00015 | $0.00189 |
| Haiku 4.5 | $0.00008 | $0.00094 |
Grade A, and why
applying-ui-design-system 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 3d 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.
What it actually says
设计语言选型
判断先于执行：决定「是否做 / 选什么 / 如何取舍」（栈、方案、架构、权衡）前，先读领域判断内核
skills/_kernel/frontend/SKILL.md——它管 judgment，本秘典管 execution；冲突时以内核判断为准。
不同设计语言不可混搭。先选语言，再按 reference 落地组件。
风格决策
| 想要的感觉 | 选 | 加载 |
|---|---|---|
| 半透明、磨砂、轻盈、纵深感弱 | Glassmorphism | references/glassmorphism.md |
| Apple 风格、立体玻璃、环境光响应、弹簧动效 | Liquid Glass | references/liquid-glass.md |
| 粗框硬影、高饱和、纯平、反精致 | Neubrutalism | references/neubrutalism.md |
| 软糯黏土、大圆角、双内影、温暖 | Claymorphism | references/claymorphism.md |
每个 reference 自包含「核心要素 + CSS Tokens + 关键约束 + 组件 + 暗色模式 + 无障碍」全套。
共享铁律（跨风格）
无论选哪种风格，下列约束全部适用：
- 对比度 — 主文字 ≥ 4.5:1，大字体（≥18pt 常规 / ≥14pt 粗体）≥ 3:1。逐底色验证，不靠白底脑补。
:focus-visible— 必须可见；轮廓与底色有足够反差。键盘可达性是底线。prefers-reduced-motion: reduce— 禁用弹簧、滑入、parallax 等装饰动画；保留功能性 transition。prefers-contrast: more— 减少透明、增强边界、平化阴影。- 暗色模式 — 用语义 token 切换（如
--bg-surface），不要硬编码#fff/#000后再交换。
落地流程
- 选风格 — 一个项目通常一种主风格；可有第二风格作辅助层（如主体 Liquid Glass + 强调按钮 Neubrutalism）
- 导入 tokens — 复制对应
tokens-<style>.css到项目，按需扩展 - 按 reference 抄组件 — Card / Button / Modal / Nav 速查已就位
- 验证对比度 + 焦点 + 减弱动效 — 跑 a11y 自检
- 暗色模式映射 — 每个 token 都要有暗色对应
何时不要本 skill
- 仅需 vanilla CSS / Tailwind 默认组件 → 不需要设计系统选型
- 已有完整 design system（如 Material、Ant Design）→ 沿用，不重新选风格
- 后端工作 / 数据可视化主导 → 走 designing-architectures
性能基线
- 同屏
backdrop-filter元素 ≤ 3（Glassmorphism / Liquid Glass 限制） - 滚动容器内避免 blur（触发逐帧重绘）
- 阴影层叠 ≤ 3 层（Claymorphism 多内影时尤其注意）
- 低端设备：用
@supports或@media (hover: none)降级为纯色
What ships with it
8 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.
- references/claymorphism.md 4.0 KB
- references/glassmorphism.md 3.6 KB
- references/liquid-glass.md 5.8 KB
- references/neubrutalism.md 3.7 KB
- references/tokens-claymorphism.css 1.5 KB
- references/tokens-glassmorphism.css 886 B
- references/tokens-liquid-glass.css 2.1 KB
- references/tokens-neubrutalism.css 1.0 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.
- 3d ago First seen · 54 lines · 76 tokens per session scan A 90cd03dbdaff
applying-ui-design-system is a skill published in the GitHub repository telagod/code-abyss (239 stars, last pushed 1mo ago), licensed MIT. It adds 76 tokens to every session and 944 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
image-lightbox
Click-to-zoom lightbox for chat images, screenshots, and generated visuals. Scroll-wheel zoom (0.5x–5x), drag-to-pan, pinch gesture on mobile, keyboard shortcuts. Zero dependencies — pure CSS + vanilla JS. Use when: (1) Chat contains images the user wants to inspect, (2) Browser screenshots need closer examination…
kirby-performance-and-media
Improves Kirby performance and media delivery (cache tuning, CDN, responsive images, lazy loading). Use when optimizing page speed, caching, or image handling.
custom-theme
Author a Wisp custom theme CSS file that uses documented tokens and import constraints. Use when the user wants a custom look, hide the paragraph lead bar, restyle chat Markdown, override colors, or import a stylesheet under Settings → Appearance.
rembric-dashboard-ui
Brutalist Rembric dashboard UI work — building / editing / extending pages, styles, components, modals, tables, filters, pagination, mobile responsive, destructive confirmations. Use when the user asks for changes under src/dashboard/, mentions Rembric design tokens (lime, brutalist, sidebar, view-head, hl-lime), or…
hot-patch-static-assets
Test changes to frontend/static assets served by a long-running server you cannot restart, by locating the actual on-disk serve path and overwriting bundles in place.
favicon-exporter
Prepare and export favicon assets from Figma in common web sizes and formats.