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 gotempsh/temps --skill temps-design-systemgit clone --depth 1 https://github.com/gotempsh/tempsWrote 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/gotempsh/temps/temps-design-system)<a href="https://agentmods.dev/skills/gotempsh/temps/temps-design-system"><img src="https://agentmods.dev/badge/skills/gotempsh/temps/temps-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/gotempsh/temps/temps-design-system"><img src="https://agentmods.dev/badge/skills/gotempsh/temps/temps-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.00072 | $0.01924 |
| Opus 5.5 | $0.00029 | $0.00770 |
| Sonnet 5.5 | $0.00014 | $0.00385 |
| Haiku 4.5 | $0.00007 | $0.00192 |
Grade A, and why
temps-design-system 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.
How it starts
The opening of the file, as written. The whole thing — 158 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Temps console design
Two documents govern console UI, and they cover different ground:
DESIGN.md(repo root): the existing, authoritative reference forweb/srcas it stands today — full-width pages, compact empty states, shared tables/pagination, shadcn controls.web/packages/ds/docs/RULES.md: the same conventions, codified into a real package (@temps-sdk/ds) with templates, a token pipeline, and lint enforcement. ReadRULES.md,brand-guidelines.md, anddesign-system-handoff.mdinweb/packages/ds/docs/before building or reviewing anything that touches it.
Both describe the same visual system (Vercel-inspired Geist theme,
near-black primary, state colors plus small provider brand marks). Neither is the old "operator
ink" prototype (@temps-sdk/op, briefly @temps-sdk/ds, PR #915) — that had
a different visual language (a glyph vocabulary, an "ink" skin class), zero
consumers, and was deleted. Never reference it, its mockups, or its styling.
Scope boundary — read this before touching web/src
@temps-sdk/ds is real and lint-enforced, but production migration of
web/src is partial. Do not assume an existing screen should move
onto the new templates just because it fits one. The numbered follow-ups in
design-system-handoff.md (≈39 hand-rolled page headers, ≥14 stat-tile/chart
call sites, empty-placeholder/empty-state consolidation, useGlobalView)
track remaining work; completed references are noted in the handoff. Migrating one of them is a deliberate task with
its own review, not a drive-by change bundled into unrelated work.
What IS in scope without asking:
- Any new screen or panel in
web/src— build it on the templates. - Any change to
web/packages/dsitself (new primitive, new template variant). - The
design-system/sandbox app.
Classification procedure: data shape → template
For any screen (new, or one you're deliberately migrating), ask what it actually shows:
- A collection of same-shaped things (projects, deployments, logs,
alerts) →
Ledger. Columns + rows + optional toolbar/pagination. - One thing, in detail (a single deployment, project, backup) →
Detail, following the record recipe below. - Input the user submits (settings, onboarding/setup wizard) →
Settings, built fromField/FormErrors. - None of the above cleanly fits (a dashboard, a custom visualization) —
don't force a template. Compose primitives (
PageHeader,Status,TimeChart,Callout) directly and say so in the PR description.
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 Changed · +136 lines · +52 tokens per session cbece7e99ea3
- 1mo ago Changed · -146 lines · -128 tokens per session e4c6b14a665e
- 1mo ago First seen · 168 lines · 148 tokens per session scan A 1a629e0b0ec5
temps-design-system is a skill published in the GitHub repository gotempsh/temps (882 stars, last pushed today), licensed Apache-2.0. It adds 72 tokens to every session and 1,924 once invoked, about $0.0003 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-09-08.
Other skills, from other repositories
polish-ui
Design-quality workflow that combines design taste, aesthetic direction, image-to-code, a Web Interface Guidelines audit, and real-browser verification. Use when building or polishing a UI surface, implementing a mockup/screenshot, or when asked to make a page "look great".
review-design
Reviews frontend components for design quality and UI/UX standards. Use when checking component styling, responsiveness, accessibility, or when asked to review a design.
创建主题
A set of rules for creating or changing frontend visual themes through configuration. It covers colors, interface components, effects, backgrounds, naming, accessibility, and how preset themes are registered.
ardot_design_to_code
"Use this skill for Ardot canvas tasks that convert a design into frontend code, or extract a design system / style guide from a website. Covers: design-to-code, design → HTML/CSS/JS, export as webpage, pixel-perfect reproduction, generate an Application from a design, slide transitions, responsive scaling; and…
dep
Handles containerization, CI/CD pipelines, and deployment setup.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…