Borrowing it
Nothing to install: this file belongs to tt-11-dd/tether-ai. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/tt-11-dd/tether-ai/main/.agents/skills/tether-ui/SKILL.mdgit clone --depth 1 https://github.com/tt-11-dd/tether-aiWrote 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/tt-11-dd/tether-ai/tether-ui)<a href="https://agentmods.dev/skills/tt-11-dd/tether-ai/tether-ui"><img src="https://agentmods.dev/badge/skills/tt-11-dd/tether-ai/tether-ui/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/tt-11-dd/tether-ai/tether-ui"><img src="https://agentmods.dev/badge/skills/tt-11-dd/tether-ai/tether-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector 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.00055 | $0.01099 |
| Opus 5.5 | $0.00022 | $0.00440 |
| Sonnet 5.5 | $0.00011 | $0.00220 |
| Haiku 4.5 | $0.00006 | $0.00110 |
Grade A, and why
tether-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 1mo 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
Tether UI
浅色纸面 + 墨色字。桌面工作台和营销站共用这一套，不要做成 IDE、深色终端或 Discord。
先读 tokens.md 里的色板和组件，再动最少 CSS。新界面必须看起来像同一张纸上多了一块。
配色（先抄这里）
产品与网站的纸和墨必须一致。强调色就是墨，不要另起蓝/紫。
| 角色 | 色 | 用在 |
|---|---|---|
| 纸底 | #f6f4f0 |
页面、侧栏、页脚底 |
| 卡片 | #fffcf8 |
浮卡、气泡、面板 |
| 凹槽 | #f3f0eb / #efece7 |
代码块、输入、内嵌 |
| 墨 | #1c1917 |
正文、主按钮、焦点 |
| 次墨 | #5c574f / #9a948b |
说明、时间戳 |
| 线 | #e8e4dc / #ddd8ce |
发丝边 |
| 绿 / 红 | #2f7d4a / #c4473a |
成功、危险、diff |
营销站可以把 Logo / 链接做成皮革棕 #8a6f5a（--brand）。桌面壳不要用它当按钮色，桌面强调仍是墨。
桌面 CSS 变量：--page --surface --ink --accent（= ink）。站点现用 --bg-page --bg-card --ink-primary，语义对齐上表，新代码优先用桌面这套名字，或加一层 alias，不要第三套 hex。
阴影只用发丝和一层轻抬：--shadow-hairline 卡片/输入，--shadow-overlay 弹层。不要大投影、彩条顶栏、霓虹边。
字
- Inter Variable + 中文系统黑体。等宽只用
--mono。 - 工作台正文
14px / 1.5，tracking-0.011em。站点长文可以15px / 1.6。 - Markdown / 预览标题压到 16 / 15 / 14，不要浏览器默认大标题。
- Hero 产品名可以更大（站点、空态）。
- 用户可见文案走 i18n，简体中文 + English；代码、路径、命令、模型名保持原文。
组件
圆角：控件 7–10px，卡片 12–16px，用户气泡 16px。
全圆可以用在：发送键、建议胶囊、权限 tag、计数徽章。不要把普通 .ghost / .primary 做成胶囊。
| 组件 | 做法 |
|---|---|
| 页面 | --page 底，无深色 mode（除非明确要求） |
| 卡片 | --surface + --shadow-hairline |
主按钮 .primary |
墨底、纸色字 |
次按钮 .ghost |
纸底 + 发丝 |
| 发送键 | 30px 墨色圆钮 |
| 链接 chip | 插在光标处，和文字同一顺序；发送时还原完整 URL |
| Composer | 底部浮卡，不要贴底通栏 IDE 输入条 |
| 审批 | 人话标题；命令收到「查看命令」；不要 window.confirm |
| 弹层 | 墨 40% 罩 + .panel 纸卡 |
| 图标 | 24 视口描边 SVG，strokeWidth 1.75，currentColor |
| Logo | 开口绳子 path；站点可用 --brand，桌面跟顶栏墨色 |
工作台壳（侧栏 252、对话贴底、权限四档）只约束 tether-ai。营销站用 section / card / header，不要硬抄 Electron 壳。
克隆同气质产品：抄色板和上表组件，不要抄 Tether 商标与绳子 Logo。
桌面改 UI 时
src/renderer/styles.css、ui.tsx、App.tsx、src/shared/i18n.ts。站点：tether-site/src/styles.css 与 src/components/。
What ships with it
1 file 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.
- 1mo ago First seen · 67 lines · 55 tokens per session scan A 7075199795cb
tether-ui is a skill published in the GitHub repository tt-11-dd/tether-ai (95 stars, last pushed 19d ago), licensed MIT. It adds 55 tokens to every session and 1,099 once invoked, about $0.0002 per session on Opus 5.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
web-design
Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.
spherse-create-agent-chat-theme
Use when creating or editing an agent-level Spherse chat window theme.css for custom chat backgrounds, headers, message bubbles, avatars, composer inputs, markdown blocks, or placeholder text.
design-iterator
Iteratively refines UI design through N screenshot-analyze-improve cycles. Use PROACTIVELY when design changes aren't coming together after 1-2 attempts, or when user requests iterative refinement.
figma-design-sync
Detects and fixes visual differences between a web implementation and its Figma design. Use iteratively when syncing implementation to match Figma specs.
popular-web-designs
54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
design-implementation-reviewer
Visually compares live UI implementation against Figma designs and provides detailed feedback on discrepancies. Use after writing or modifying HTML/CSS/React components to verify design fidelity.