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/connerkward/ckw-design-skill/design-systemnpx skills add connerkward/ckw-design-skill --skill design-systemgit clone --depth 1 https://github.com/connerkward/ckw-design-skillWrote 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/connerkward/ckw-design-skill/design-system)<a href="https://agentmods.dev/skills/connerkward/ckw-design-skill/design-system"><img src="https://agentmods.dev/badge/skills/connerkward/ckw-design-skill/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.1 | $0.00067 | $0.03368 |
| Opus 5 | $0.00034 | $0.01684 |
| Sonnet 5 | $0.00013 | $0.00674 |
| Haiku 4.5 | $0.00007 | $0.00337 |
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 5d 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 — 124 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design system
Apply with design when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules.
Token architecture
All colors map to a small set of primitives. No random hex values.
- Foreground: Text hierarchy (primary, secondary, muted).
- Background: Surface elevation (base, raised, overlay).
- Border: Separation hierarchy (subtle, default, emphasis).
- Brand: Identity and primary accent.
- Semantic: Destructive, warning, success (and optional info).
Use tokens in code (CSS variables, theme objects); never hardcode hex for UI.
Typography
- Hierarchy: Headlines — heavier weight, tighter letter-spacing for presence. Body — comfortable weight for readability. Labels/UI — medium weight, works at smaller sizes. Data — monospace,
tabular-numsfor alignment. - Combine size, weight, and letter-spacing so hierarchy is clear at a glance. If you squint and can't tell headline from body, hierarchy is too weak.
- Fonts: pair a display font with a body font; keep hierarchy legible at a glance. Which fonts is direction, not mechanics — pick from the domain and push off your first/default instinct (the mean); see design-spatial §2.
- Data (functional only): real aligned numbers, IDs, timestamps in monospace with
tabular-nums— mono earns its place when values line up in a column. Do NOT sprinkle mono on decorative eyebrow/metadata microtext ("35MM · DEVELOP · SCAN", fake spec captions) for a "technical" look — that's the current trend-slop, not data. See design-spatial §2.
Loading order — first seen, first loaded
The first viewport must paint complete and correct, fast. Order every resource by whether the user sees it first; the rest waits.
- Prioritize only the above-the-fold set (hero text, hero image/video, brand mark). Preloading everything is the same as preloading nothing — the true criticals lose the bandwidth race. Pick the few things in the first screenful and prioritize those.
- Fonts: self-host WOFF2. Convert OTF/TTF → WOFF2 (Brotli; ~half the bytes, identical glyphs) and
<link rel="preload" as="font" type="font/woff2" crossorigin>the weights used in the first viewport. Never a render-blocking third-party font stylesheet — a Google Fonts<link>adds a CSS round-trip plus extra DNS/TLS before the font even starts downloading; self-host instead. - LCP image/video:
fetchpriority="high"on the hero image (or the video poster);<link rel="preload" as="image">it when it's CSS-referenced (the parser can't see CSSurl()s early). The hero box must never be empty — ship a poster/low-res placeholder so there's no blank frame. - Below the fold:
loading="lazy" decoding="async"on images;preload="none"(or"metadata") on video;defernon-critical JS. Always reserve space (aspect-ratio, orwidth+height) so deferred media can't shift layout (CLS). - Keep the render-blocking head minimal: inline critical CSS, defer the rest.
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.
- 5d ago First seen · 124 lines · 67 tokens per session scan A 9cbb385c9214
design-system is a skill published in the GitHub repository connerkward/ckw-design-skill (6 stars, last pushed 2mo ago), licensed MIT. It adds 67 tokens to every session and 3,368 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
design-spatial
Spatial composition and layout for frontend design. Load with design when composing pages/dashboards/components, or whenever generated UI looks off — overlapping/colliding elements, weak hierarchy, or generic ("looks like every startup site"). The core idea: a model can't trust its own layout, so render it, critique…
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
llm-wiki
Build and maintain an LLM-curated personal knowledge base — the "LLM Wiki" pattern from Andrej Karpathy's April 2026 gist. Use this skill whenever the user wants to ingest a source (paper, article, transcript, PDF, notes) into a persistent compounding knowledge base, ask a question against accumulated notes, lint or…
tailwind-css
Tailwind CSS v4 patterns: CSS-first config, utility classes, component variants, v3 migration. Use when styling with Tailwind, configuring @theme tokens, using tailwind-variants/CVA, migrating v3 to v4, or fixing Tailwind styles and dark mode.
frontend-design
Use when user asks to build a web component, page, or application, or when the task involves frontend design, HTML/CSS generation, or UI layout. Applies specific rules for typography, OKLCH color, layout, motion, interaction, and UX writing to produce distinctive, production-grade interfaces that avoid generic AI…
tools-unity-ugui
Unity UI patterns including Canvas optimization, list virtualization, and mobile-friendly UI.