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/aziontech/webkit/webkit-theming-dark-modenpx skills add aziontech/webkit --skill webkit-theming-dark-modegit clone --depth 1 https://github.com/aziontech/webkitWrote 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/aziontech/webkit/webkit-theming-dark-mode)<a href="https://agentmods.dev/skills/aziontech/webkit/webkit-theming-dark-mode"><img src="https://agentmods.dev/badge/skills/aziontech/webkit/webkit-theming-dark-mode.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 | $0.00118 | $0.02397 |
| Opus 5 | $0.00059 | $0.01198 |
| Sonnet 5 | $0.00024 | $0.00479 |
| Haiku 4.5 | $0.00012 | $0.00240 |
Grade A, and why
webkit-theming-dark-mode 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 — 208 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: webkit-theming-dark-mode
Purpose
A screen that "looks right" is only half-verified — it looks right in the theme you happened to open.
The @aziontech/theme tokens make both themes free if you style through them: a token names a
role (--bg-surface, --text-default, --border-default), and its value flips per theme
automatically. The moment a hex, an rgb(), or a Tailwind palette color (bg-zinc-900,
text-white) lands on an element, you have hard-coded one theme and broken the other. This skill
fixes the discipline that keeps every screen theme-correct with no per-theme branches.
How to use
/webkit-theming-dark-mode— apply the token discipline to any screen you build in this conversation, and switch to the dark check before declaring it done./webkit-theming-dark-mode <file>— review the file and report, per gap: the quoted line, the hard-coded color, and the semantic token that replaces it.
How to find the tokens and components
Never guess a token or an import path. Resolve both from the contract, not from memory:
- Token names: read
node_modules/@aziontech/theme(the semantic color set) — a name that is not defined there does not exist. Roles you will reach for most:--bg-canvas,--bg-surface,--bg-surface-raised,--bg-surface-overlay,--text-default,--text-secondary,--border-default,--primary,--primary-contrast. - Components: ask the webkit MCP (
suggest_component) or readnode_modules/@aziontech/webkit/catalog.json— every key underimportsis a real subpath.
How theming works — light is default, dark is opt-in
The tokens default to light: the light values live in :root (and [data-theme=light]). Dark
is opt-in — set data-theme="dark" on the <html> element (the tokens also respond to a .dark
class on any ancestor). Nothing else changes; the same var(--bg-surface) now resolves to its dark
value.
<!-- dark from the first paint -->
<html data-theme="dark"></html>
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 · 208 lines · 118 tokens per session scan A 87f7c4ca03c3
webkit-theming-dark-mode is a skill published in the GitHub repository aziontech/webkit (2 stars, last pushed 5d ago), licensed MIT. It adds 118 tokens to every session and 2,397 once invoked, about $0.0006 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
better-design
Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating…
sigil-playbook
The Sigil Playbook codifies the small vocabulary of structural patterns that make any new page "just work." Originating from the Reticle design language (Dedalus monorepo), these 10 rules — 6 compositional moves + 4 supporting patterns — replace dozens of ad-hoc layout decisions.
add-component-source
Creates the source file, barrel index, and package export for a new component in @agentic-ds/core or @agentic-ds/agents — with the correct ARIA live region, semantic tokens, and CSS scoping applied from the start. Use when creating just a component's implementation file (no story, tests, or docs), or as step 1 of the…
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
ui-design-workflow
MUST use when implementing UI components or frontend pages in this project. Triggers: designing UI, implement page, develop UI, write component, frontend development, create component, build interface, style page, button, form, modal, toast, card, input, styling, interface, shadcn, ant design, antd, element plus…
sigil-polish
Design engineering principles for making Sigil interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it…