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-ui-craftnpx skills add aziontech/webkit --skill webkit-ui-craftgit clone --depth 1 https://github.com/aziontech/webkitWhat 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.00117 | $0.02089 |
| Opus 5 | $0.00059 | $0.01045 |
| Sonnet 5 | $0.00023 | $0.00418 |
| Haiku 4.5 | $0.00012 | $0.00209 |
Grade A, and why
webkit-ui-craft 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 — 120 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: webkit-ui-craft
Purpose
Make UI built on top of @aziontech/webkit + @aziontech/theme look and feel like the design
system intended: technical, minimal, polished, PRO-UX-first. This is the map to a pack of focused
skills — it carries the shared principles and routes each task to the skill that owns the detail. It
is for consuming apps (composing screens from shipped components and tokens), not for authoring
webkit primitives.
How to use
/webkit-ui-craft— apply the principles below to all UI work in this conversation and route to the right child skill for the task at hand./webkit-ui-craft <file>— run the progression as a review: structure (/webkit-ux-heuristics→/webkit-ui-states→/webkit-form→/webkit-create-surface→/webkit-errors→/webkit-tables→/webkit-lists→/webkit-navigation) → foundation (/webkit-baseline-ui) → cross-cutting quality (/webkit-theming-dark-mode,/webkit-data-viz) → polish (/webkit-motion-polish→/webkit-impeccable-polish) → verify (/webkit-ui-verify). Output each child skill's findings under its own heading.
The 3 principles
- Tech language. Infrastructure-grade product UI: copy and visuals are precise, calm, and literal — no emoji-as-decoration, no marketing fluff inside the product.
- Minimal and polished. Remove before you add. Every element earns its place; ornament is the exception that has to justify itself.
- PRO UX first. Get flow, states, and feedback right before any aesthetic pass. A beautiful screen with a missing empty/error/loading state is not done.
The non-negotiable rules (detail lives in the owning skill)
- Components only — compose from
@aziontech/webkit; never hand-roll a button/input/modal/ dropdown the system ships. (Find them via the webkit MCPsuggest_componentornode_modules/@aziontech/webkit/catalog.json.) See/webkit-usage,/webkit-ds-adoption. - Tokens only — color, typography, shape, spacing, shadow come from
@aziontech/theme; no hex,rgb,hsl, or Tailwind palette. See/webkit-baseline-ui. - Typography hierarchy — only the
text-*tokens, never inverted (text-heading-* > text-body-* > text-label-* > text-overline-*). See/webkit-baseline-ui. - Spacing rhythm — one
--spacing-*step, applied consistently. See/webkit-baseline-ui. - One content column — inside a vertical list (nav rail, menu, settings list, any stack of rows),
every row's content starts on the same x, whatever the row is. A section title's text, a row's
leading glyph, and a row with no glyph at all all begin on that one column; a row that reserves a
glyph box pads by the column minus the glyph's own centring, so the glyph — not the box — lands on
it. Nesting shifts the whole column by exactly one indent step, so the alignment cascades at every
depth instead of being re-derived per level.
Three things follow, and each is a real bug when skipped:
- Never reserve an empty glyph box. A box with no glyph in it misreports where the row's content starts: the label sits off the column its siblings hold, and anything drawn from that content (a tree rail, a hover surface) anchors to blank space. Render the box only when there is a glyph.
- Derive the indent from tokens, never a literal. Hold the step and the column in two custom
properties and compute everything else from them, so an elbow or rail cannot come unstuck from
the rows it connects. Avoid any
--spacing-*token that is redefined at a breakpoint — the column would drift as the viewport grows. - Structure lines live in the gutter, never over a row. A tree rail, elbow or depth guide stops at the row's box edge — not at its text. The row's hover and selected surfaces fill that box, so a line drawn any further is painted underneath them and reads as a glitch on exactly the states a user interacts with.
- Verify it by measuring, not by looking. Read the rendered
xof each row type and assert they are equal, and assert a rail's right edge never exceeds the row surface's left edge. A 4px break is invisible in review and obvious in production.
- Contain the page — cap reading/content width with
max-w-(--container-*), keep data-dense surfaces fluid; never a rawpx/remwidth. The full container doctrine (fluid-first shell, focused-flow centering) lives in/webkit-baseline-ui. - Token motion only —
animate-*utilities +duration-*/ease-*tokens, with amotion-reduce:*escape; no animation library. See/webkit-motion-polish. - Accessible by construction — labels, focus, ARIA state, target size. See
/webkit-form,/webkit-ui-verify. - Works in both themes — style through role tokens so light and dark need no per-theme edits.
See
/webkit-theming-dark-mode.
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 · 120 lines · 117 tokens per session scan A be5fa2c5e4e0
webkit-ui-craft is a skill published in the GitHub repository aziontech/webkit (2 stars, last pushed 4d ago), licensed MIT. It adds 117 tokens to every session and 2,089 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
monorepo-management
Sets up or audits a monorepo workspace: tool selection, package naming, shared tooling, inter-package dependencies, selective CI, and versioning strategy. Invoked when the user asks to set up a monorepo, add a workspace, or manage multiple packages in a single repository.
bazel-monorepo-expert
Expert knowledge for managing large-scale Bazel monorepos with multiple services, shared libraries, and cross-cutting concerns. Use for workspace structure, visibility, and dependency management.
pnpm
Skill "pnpm" from pledgeandgrow/pledge-skills, covering pnpm documentation skill, key benefits, file index, quick start and install pnpm.
fast-typescript-check
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…
port-sacred-terminal-ui-to-react-using-same-conventions
Take a CLI screen written for Simulacrum — the sacred CLI framework (scripts/cli/templates/.ts or scripts/python/templates/.py) — and produce a React component that lives inside components/examples/ (or components/) using only sacred's existing primitives — Window, Card, SimpleTable, ActionButton, RowSpaceBetween…
port-sacred-terminal-ui-to-typescript-cli
Take a React Window.tsx (or any sacred component) and produce a terminal CLI screen written in TypeScript that uses Simulacrum — the sacred CLI framework in scripts/cli/lib/.