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/keepwhatworks/trinity/design-systemnpx skills add keepwhatworks/trinity --skill design-systemgit clone --depth 1 https://github.com/keepwhatworks/trinityWhat 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.00107 | $0.00623 |
| Opus 5 | $0.00053 | $0.00311 |
| Sonnet 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 yesterday.
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.
- yesterday 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 2d ago), licensed MIT. It adds 107 tokens to every session and 623 once invoked, about $0.0005 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
split-micro-app
Use when splitting a monorepo surface into a standalone micro app (React Router SSR on Cloudflare Workers), splitting a surface whose rendering code lives in the lobehub-cloud business overlay, fighting SSR bundle bloat from main-src imports, deploying its assets to CDN/R2, adding SEO/OG meta to an SSR page, adding a…
agent-tracing
Agent tracing CLI for execution snapshots. Use for agent-tracing, traces, snapshots, LLM call inspection, context engine data, agent step analysis, execution debugging, or pulling remote/production traces ("拉线上 tracing") by operation id. Also the first stop for debugging agent tool calls — wrong or missing toolcalls…
data-fetching-architecture
LobeHub data-fetching pipeline guide. Use for service layer, Zustand store, SWR, lambdaClient, useClientDataSWR, useFetchXxx hooks, or migrating useEffect fetches.
deep-review
Multi-dimensional code review. Use when the user asks to review, evaluate, or audit a PR, diff, branch, or pasted change — including informal review asks like "look at this change for problems" — via light mode: one independent reviewer against the dimension quick checklists. Not for explain-only questions about what…
ux-audit
Audit a page / surface against the Designing Interfaces pattern language + the ux skill checklists, then land findings. Three layers — static (code), visual (screenshots), dynamic (automated user journey + perf). Use to run a repeatable, standards-based UX review of one screen.
acceptance
End-to-end verification and self-evidence for a delivery in any repository, with or without a preconfigured verify plan. Discover an existing plan when one was handed to this run; otherwise author checks and publish a standalone acceptance. Pick the proving surface (CLI / web / desktop / iOS Simulator), drive the real…