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 jxoesneon/Ciel --skill design-token-architecturegit clone --depth 1 https://github.com/jxoesneon/CielWrote 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/jxoesneon/ciel/design-token-architecture)<a href="https://agentmods.dev/skills/jxoesneon/ciel/design-token-architecture"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/design-token-architecture/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/jxoesneon/ciel/design-token-architecture"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/design-token-architecture.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.00032 | $0.01366 |
| Opus 5 | $0.00016 | $0.00683 |
| Sonnet 5 | $0.00006 | $0.00273 |
| Haiku 4.5 | $0.00003 | $0.00137 |
Grade A, and why
design-token-architecture 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 4d 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 — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CIEL ADAPTATION: Design Token Architecture
This skill formalizes the token layer of a design system — the ui-ux-design skill covers style selection and ciel-security-and-design mentions tokens only as an anti-pattern guardrail; this one defines how to actually structure them. It is advisory only: it emits token definitions and conventions, never executes them.
The Three-Layer Model
Component (--button-bg, --card-padding) per-component overrides
↑ refs
Semantic (--color-primary, --spacing-section) purpose-based aliases
↑ refs
Primitive (--color-blue-600, --space-4) raw design values
- Primitive: Raw values with no semantic meaning (colors, sizes, radii, shadows). Change rarely — foundational.
- Semantic: Purpose aliases referencing primitives (
--color-primary: var(--color-blue-600)). This is the layer you swap for theming. - Component: Component-specific tokens referencing semantic layer (
--button-bg: var(--color-primary)). Enables per-component customization without touching semantics.
Rule: Each layer references ONLY the layer below it. Never let a component token reach through to a raw value, and never let a semantic token hardcode a literal.
CSS Variable Patterns
- HSL channel triplets for colors (
--color-primary: 222 47% 11%) consumed viahsl(var(--color-primary) / <alpha>)— enables opacity control without redefining tokens. - Dark mode = semantic override only: redefine semantic tokens under
.dark; primitives and component tokens stay unchanged. - File organization:
tokens/primitives.css,tokens/semantic.css,tokens/components.css,tokens/index.css(imports all) — or a single file with=== LAYER ===comment banners. - W3C DTCG alignment for JSON token sources:
{ "color": { "blue": { "600": { "$value": "#2563EB", "$type": "color" } } } }.
Spacing & Typography Scales
- Spacing — 4px base:
--space-1: 0.25rem,--space-2: 0.5rem,--space-4: 1rem,--space-6: 1.5rem,--space-8: 2rem. Semantic aliases:--spacing-component: var(--space-4),--spacing-section: var(--space-6). Components reference semantics, never raw--space-N. - Typography — primitive sizes:
--font-size-sm: 0.875rem,--font-size-base: 1rem,--font-size-lg: 1.125rem,--font-size-xl: 1.25rem,--font-size-2xl: 1.5rem. Semantic roles:--typography-font-heading/-body/-mono(family),--text-heading/-body/-caption(size+weight+leading bundles). - Line-height travels with the size token, not as a separate concern:
--font-size-lg: 1.125rem; --line-height-lg: 1.75. - Keep to the scale: arbitrary pixel values break the rhythm; add a primitive token rather than a one-off literal.
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.
- 4d ago Changed aedeb7ab4b9e
- 8d ago First seen · 80 lines · 32 tokens per session scan A 5d4cd50d7b06
design-token-architecture is a skill published in the GitHub repository jxoesneon/Ciel (1 stars, last pushed 5d ago), licensed Apache-2.0. It adds 32 tokens to every session and 1,366 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-09-03.
Other skills, from other repositories
franchise-brand-enforcer
Franchise consistency is a two-front war: Visuals and Voice. This agent audits local social posts or webpages, using Vision to flag stretched/outdated logos and Text Analysis to rewrite off-brand copy into your Headquarters voice.
ad-visual-reverse-engineer
Why is the competition winning? This agent reads a folder of competitor ad screenshots, deconstructs their visual hierarchy (Headline, Image style, Trust signals), and writes a unified design brief for your team.
bio-link-optimizer
Choice paralysis kills sales. This agent audits your current 'Link in Bio' page (if provided) or researches high-converting layouts for your niche to suggest a prioritized structure that drives users toward your primary offer.
brand-kit-gen
Instantly create cohesive visual identity starter kits for multiple projects. This agent generates logos, seamless background patterns, and defines color palettes for an entire portfolio of brands.
cta-button-optimizer
Generic buttons like 'Submit' kill conversion. This agent rewrites your Call-to-Action (CTA) buttons to be value-driven and suggests color/placement changes for an entire suite of landing pages.
skin-creator
Create and apply a two-asset LobsterAI visual skin from the user's style description. Use only when the AI Skin Designer kit supplies the structured skinpack workflow marker; do not use for ordinary theme or image requests.