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 kok-o/koko-contextos-agents --skill ui-designgit clone --depth 1 https://github.com/kok-o/koko-contextos-agentsWrote 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/kok-o/koko-contextos-agents/ui-design)<a href="https://agentmods.dev/skills/kok-o/koko-contextos-agents/ui-design"><img src="https://agentmods.dev/badge/skills/kok-o/koko-contextos-agents/ui-design/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/kok-o/koko-contextos-agents/ui-design"><img src="https://agentmods.dev/badge/skills/kok-o/koko-contextos-agents/ui-design.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00010 | $0.00993 |
| Opus 5.5 | $0.00004 | $0.00397 |
| Sonnet 5.5 | $0.00002 | $0.00199 |
| Haiku 4.5 | $0.00001 | $0.00099 |
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 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.
This is a copy
95% identical to UI Design — 48 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 125 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Design
Overview
A brief summary of what the skill does and its core philosophy.
When to Use
Context for when this skill is applicable.
Rules & Patterns
UI Design — Best Practices
Design System Foundations
Color
- Never use generic colors — curate a harmonious palette
- Always tint — no pure black (#000), no pure gray. Add a subtle warm or cool tint
- Color roles: primary (action), secondary (accent), neutral (text, borders), semantic (error, success, warning, info)
- Dark mode: design intentionally, not just invert. Surface hierarchy: background < surface < elevated
- Contrast: 4.5:1 minimum for body text, 3:1 for large text
Typography
- Never use browser defaults — choose a curated font (Inter, Outfit, Geist, Sora)
- Type scale: use a modular scale (1.25 ratio) — 12, 14, 16, 20, 24, 32, 40, 48
- Font weights: Regular (400), Medium (500), Semibold (600), Bold (700). Don't use all of them — pick 2-3
- Line height: 1.5 for body, 1.2 for headings, 1.6 for long-form text
- Max line width: 65-75 characters for readability
Spacing
- Use a 4px grid — all spacing should be multiples of 4
- Spacing scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
- Consistency — same spacing between similar elements
- Whitespace is design — don't fill every pixel
Layout
- Grid system: 12-column grid for desktop, 4-column for mobile
- Visual hierarchy: size, weight, color, spacing, position
- F-pattern/Z-pattern — for content-heavy pages
- Group related items — use proximity and boundaries
Component Patterns
Buttons
- Clear hierarchy: Primary > Secondary > Ghost/Text
- Consistent sizing: sm (32px), md (40px), lg (48px)
- States: default, hover, active, disabled, loading
- Always accessible: sufficient contrast, focus indicator
Forms
- Labels above inputs (not floating labels for critical forms)
- Clear error states with inline messages
- Logical tab order
- Progressive disclosure — don't show all fields at once
What ships with it
5 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.
- 1mo ago First seen · 125 lines · 10 tokens per session scan A aad79c8f77cd
UI Design is a skill published in the GitHub repository kok-o/koko-contextos-agents (2 stars, last pushed 1mo ago), licensed MIT. It adds 10 tokens to every session and 993 once invoked, about $0.0000 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 95% identical to UI Design, differing in 48 lines, and is treated as a copy.
Other skills, from other repositories
write-zot-themes
Help the user create, install, or package zot themes, including theme-only extensions.
code-quality-principles
Applies KISS, YAGNI, and SOLID principles for clean code with reduced complexity. Use when refactoring or reviewing code for over-engineering.
align-grid
Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red palette) AND the hard-won front-end engineering to make the grid…
extract-design
Extract a Google DESIGN.md file from an HTML prototype (claude.ai/design or any styled page) using Puppeteer, producing machine-readable tokens and AI-generated prose. Use when the user has an HTML prototype and wants a DESIGN.md to anchor their project's visual identity, or when seed-conventions has just scaffolded a…
design-interface
Generate multiple radically different interface designs for a module using parallel sub-agents, then compare trade-offs. Based on "Design It Twice" from A Philosophy of Software Design. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
visual-dashboard
Start a browser-based dashboard that visualizes architecture, implementation plans, and project status. Persists artifacts in .bigpowers/dashboard/. Reads specs/state.yaml, release-plan.yaml, epics, and planning-status via HTTP API or opencode panel.