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/annondeveloper/ui-kit/design-systemnpx skills add annondeveloper/ui-kit --skill design-systemgit clone --depth 1 https://github.com/annondeveloper/ui-kitWhat 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.00055 | $0.00652 |
| Opus 5 | $0.00028 | $0.00326 |
| Sonnet 5 | $0.00011 | $0.00130 |
| Haiku 4.5 | $0.00006 | $0.00065 |
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 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 — 70 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Aurora Fluid Design System
@annondeveloper/ui-kit uses the Aurora Fluid design identity. Here are the key principles:
OKLCH Color System
All colors use OKLCH — perceptually uniform, with relative color syntax for theming:
/* Base color */
--brand: oklch(65% 0.2 270);
/* Derived with relative syntax */
--brand-light: oklch(from var(--brand) calc(l + 0.15) c h);
--brand-dark: oklch(from var(--brand) calc(l - 0.15) c h);
--brand-subtle: oklch(from var(--brand) l c h / 0.1);
Never use hex or rgb. Always OKLCH.
Motion Levels (0-3)
| Level | Name | Behavior |
|---|---|---|
| 0 | None | Instant transitions, no animation |
| 1 | Subtle | CSS transitions only, no springs |
| 2 | Expressive | Conservative spring (no overshoot) |
| 3 | Cinematic | Full physics — spring, bounce, particles |
Cascade: OS prefers-reduced-motion > component motion prop > CSS --motion > UIProvider > default (3)
Weight Tiers
- Lite (~0.3-1.2 KB/component) — CSS-only, native HTML elements, no JS animation
- Standard (~2-5 KB/component) — Full features,
useStyles()CSS injection, motion engine - Premium (~3-6 KB/component) — Aurora glow, spring entrance, shimmer, particles
CSS Architecture
@layer componentsfor all component styles@scope (.ui-component)for isolation- Class prefix:
ui-(e.g.,.ui-button,.ui-card) - Logical properties only (
margin-inline-start, notmargin-left) text-wrap: balancefor headings,text-wrap: prettyfor body- Fluid sizing:
clamp()values,rem/emunits (neverpxfor font-size)
Theme Generation
import { generateTheme, applyTheme } from '@annondeveloper/ui-kit/theme'
// Generate from any brand color
const theme = generateTheme('#6366f1', 'dark')
applyTheme(theme) // Sets CSS custom properties on :root
Accessibility Requirements
- WCAG AA contrast (4.5:1 text, 3:1 UI)
- 44px minimum touch targets
- WAI-ARIA patterns for all composite widgets
@media (forced-colors: active)supportprefers-reduced-motionalways respected
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 · 70 lines · 55 tokens per session scan A fc3bd5289373
design-system is a skill published in the GitHub repository annondeveloper/ui-kit (0 stars, last pushed 2mo ago), licensed MIT. It adds 55 tokens to every session and 652 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-31.
Other skills, from other repositories
openclaw-color-palette
Design-grade color processing suite — generate harmonious palettes from any seed color, check WCAG 2.1 AA/AAA contrast accessibility, convert between hex/RGB/HSL/HSV/CMYK, simulate 8 color blindness types, and extract dominant colors from images. Use when: (1) user says 'generate a color palette' or 'give me a color…
frontend-design-saas
S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal/customer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens…
motion-craft
Design GPU-accelerated animations with Web Animations API (WAAPI), Scroll-Driven Animations (ScrollTimeline/ViewTimeline), FLIP technique, easing systems, and accessibility (prefers-reduced-motion). Use when user asks to create animations, transitions, scroll effects, page transitions, or interactive motion for web…
Aesthetic Web Design
Apply professional, premium UI/UX design standards when building or styling web interfaces. Use this skill when the user asks to create a website, landing page, web app, dashboard, UI component, or any visual interface — or when they ask to make something look better, more professional, or more beautiful. Covers…
emil-design-eng
Encode Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. From the creator of Sonner (13M+ weekly npm downloads), Vaul, animations.dev, and Linear's web team. Use when user wants to polish UI, audit animations, review component…
landing-craft
Build conversion-optimized landing pages with CRO frameworks (Conversion Research, LIFT Model), scroll effects, A/B testing, personalization, form optimization, and Core Web Vitals (INP, LCP, CLS). Use when user asks to create a landing page, sales page, lead generation page, or improve conversion rates. Do NOT use…