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 keepwhatworks/trinity --skill design-systemgit clone --depth 1 https://github.com/keepwhatworks/trinityWrote 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/keepwhatworks/trinity/design-system)<a href="https://agentmods.dev/skills/keepwhatworks/trinity/design-system"><img src="https://agentmods.dev/badge/skills/keepwhatworks/trinity/design-system/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/keepwhatworks/trinity/design-system"><img src="https://agentmods.dev/badge/skills/keepwhatworks/trinity/design-system.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.00107 | $0.00623 |
| Opus 5.5 | $0.00043 | $0.00249 |
| Sonnet 5.5 | $0.00021 | $0.00125 |
| Haiku 4.5 | $0.00011 | $0.00062 |
Grade A, and why
trinity-local-design 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 1mo 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.
What it actually says
Read the README.md file within this skill, and explore the other available files
(colors_and_type.css for tokens, assets/ for the brand mark, ui_kits/ for
high-fidelity component recreations, preview/ for the design-system cards).
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, copy assets and read the rules here to become an expert in designing with this brand.
Active theme — Calm / Muted Teal (this is THE direction; do not revert to the warm-cream/serif look the product currently ships):
- Cool mist neutrals, one teal accent. Base
#eaecef, surface#fafbfc, border#dde1e6, cool-charcoal ink#2f363c. Muted teal#4f9095(deep#34666b, fill#3f777c, soft wash#e1edec) is the ONLY accent; soft slate#94a3adis a quiet secondary. No green, no cream, no serif, no terracotta, no purple/neon, no decorative gradients. - One soft humanist sans — Hanken Grotesk for everything (titles weight 600, body, UI). A one-word title accent uses teal, never italics. Mono (JetBrains Mono) only for commands/paths.
- Soothing, document-first. Calm centered column, soft 22px rounded cards with
visible 1px borders + gentle cool shadow, airy spacing, summary-first layouts.
Slow gentle motion only (entrance rise, a faint breathing aura, the die settling in);
respect
prefers-reduced-motion. - Voice: grounded, plain-spoken, second person, sentence case, em-dashes, UPPERCASE tracked eyebrows. Emoji almost never.
The Launchpad UI kit (ui_kits/launchpad/) is the reference implementation — match it.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some clarifying questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
What ships with it
26 files 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.
- colors_and_type.css 6.7 KB
- preview/badges-pills.html 3.1 KB
- preview/brand-mark.html 3.3 KB
- preview/buttons.html 2.4 KB
- preview/card-accent.html 2.6 KB
- preview/card-new-model.html 2.8 KB
- preview/colors-action.html 2.8 KB
- preview/colors-paper.html 3.8 KB
- preview/colors-status.html 3.1 KB
- preview/council-task.html 2.5 KB
- preview/member-answers.html 3.5 KB
- preview/radii-shadow.html 2.8 KB
- preview/routing-bars.html 3.8 KB
- preview/spacing-scale.html 3.4 KB
- preview/type-display.html 1.7 KB
- preview/type-eyebrow-mono.html 2.2 KB
- preview/type-scale.html 3.3 KB
- README.md 14 KB
- ui_kits/launchpad/app.jsx 4.9 KB
- ui_kits/launchpad/council_view.jsx 5.8 KB
- ui_kits/launchpad/index.html 19 KB
- ui_kits/launchpad/launchpad_parts.jsx 8.0 KB
- ui_kits/launchpad/README.md 3.3 KB
- ui_kits/website/essay.html 9.7 KB
- ui_kits/website/index.html 15 KB
- ui_kits/website/README.md 3.3 KB
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.
- 1mo ago First seen · 37 lines · 107 tokens per session scan A 4879a11d81ac
trinity-local-design is a skill published in the GitHub repository keepwhatworks/trinity (1 stars, last pushed 5d ago), licensed MIT. It adds 107 tokens to every session and 623 once invoked, about $0.0004 per session on Opus 5.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
animate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
delight
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
onboard
Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.
chakra-ui-refactor
Review or refactor Chakra UI v3 code INSIDE packages/design-system only. Use only when editing files under packages/design-system. Feature code in modules//browser or apps/ui never imports Chakra: use the design-system skill instead.
design-system
Which component to use, where tokens and colour live, and why nothing but packages/design-system imports Chakra or Emotion. Use when someone says 'which component', 'design system', '@langwatch/design-system', 'import Chakra', '@chakra-ui/react', 'primitives', 'Box/Flex/Button', 'theme', 'token', 'colour', 'hex'…
glassmorphism
Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.