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/andresharpe/dotbot/design-systemnpx skills add andresharpe/dotbot --skill design-systemgit clone --depth 1 https://github.com/andresharpe/dotbotWhat 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.00030 | $0.03253 |
| Opus 5 | $0.00015 | $0.01626 |
| Sonnet 5 | $0.00006 | $0.00651 |
| Haiku 4.5 | $0.00003 | $0.00325 |
Grade A, and why
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.
How it starts
The opening of the file, as written. The whole thing — 256 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Dotbot Design System
Design system for dotbot's retro-futuristic CRT control panel UI. Use this alongside the global frontend-design skill, which provides creative principles. This skill provides the project-specific constraints.
Identity
The UI is a vintage hardware control panel with phosphor CRT displays. Signature elements:
- Phosphor glow — text-shadow on key values and status indicators
- Scanline overlay — 2px repeating gradient on body::after, always present
- Grid backgrounds — dual-scale (10px + 50px) on module screens
- LED indicators — 8px glowing circles for status
- Deep blacks — backgrounds from rgb(5,5,8) to rgb(13,14,20)
- Amber phosphor — default primary color with warm glow
Architecture
CSS load order (each file has a specific responsibility):
theme.css— Color system source of truth (CSS custom properties, RGB components, opacity variants, semantic data attributes)base.css— Font imports, reset, body, scrollbar, toast notifications, loading stateslayout.css— Page grid, header/footer, tabs, LED indicatorssidebar.css— Left/right sidebar panels, navigationmodules.css— Reusable components (stat cards, task lists, module panels, buttons)views.css— Tab-specific styles (pipeline, product, workflow)modal.css— Dialogs, task detail, formscrt.css— CRT effects, oscilloscope, panic buttonprocesses.css— Process/decision rows, interview UIresponsive.css— Breakpoint overrides
Source of truth: src/ui/static/
Runtime copy: .bot/src/ui/static/ (generated by dotbot init)
Theme system: theme-config.json defines 6 presets as RGB arrays. theme.js reads the config and sets CSS custom properties at runtime. theme.css provides defaults and computes opacity variants.
Design Tokens
Colors
Reference: src/ui/static/css/theme.css
Semantic roles (all via CSS custom properties, never raw values):
| Role | Variable | Default RGB | Purpose |
|---|---|---|---|
| Primary | --color-primary |
232 160 48 | Main text, actions, focus |
| Primary dim | --color-primary-dim |
184 120 32 | Secondary text, muted primary |
| Secondary | --color-secondary |
95 179 179 | Interactions, highlights, links |
| Tertiary | --color-tertiary |
170 136 255 | Tags, metadata, decorative |
| Success | --color-success |
0 255 136 | Completion, positive states |
| Error | --color-error |
209 105 105 | Danger, failures |
| Warning | --color-warning |
232 160 48 | Caution, attention |
| Info | --color-info |
68 136 255 | Information, utility |
| Muted | --color-muted |
136 136 153 | Labels, tertiary text |
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 · 256 lines · 30 tokens per session scan A 1e3f39c9571e
design-system is a skill published in the GitHub repository andresharpe/dotbot (54 stars, last pushed 6d ago), licensed MIT. It adds 30 tokens to every session and 3,253 once invoked, about $0.0002 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
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.
ima2-front
Frontend implementation skill for ima2 users. Use for any frontend, web UI, or visual implementation work — building, styling, or redesigning pages/components, responsive layouts, motion, component architecture, and production-surface polish. Pairs with ima2-uiux: load it first when design direction is vague; this…
ss-build
Build a screen with StyleSeed's composed design method — choose or compile an output grammar, apply a brand recipe plus domain/page/profile/lock constraints, then run the code and pixel gates before presenting.
ss-tokens
Generate an accessible semantic palette from a key color, or view, add, and modify StyleSeed design tokens. Use when a user supplies a brand color, asks which colors combine well, needs light/dark theme roles, or needs token files for implementation.
documentation-server
Use when you need to store, retrieve, search, or manage documents in a local knowledge base with semantic search and hybrid (vector + full-text) retrieval. Also use when interacting with the documentation server web interface, managing uploads, or performing AI-powered document analysis. Use this instead of MCP-native…
gemini-skill
通过 Gemini 官网（gemini.google.com）执行生图、对话等操作。用户提到"生图/画图/绘图/nano banana/nanobanana/生成图片"等关键词时触发。操作方式分三级优先级：首选 MCP 工具 → 次选 Skill 脚本 → 最次连接 Skill 浏览器手动操作（需用户授权）。禁止自行启动外部浏览器访问 Gemini。.