# Temps Design System

Classify a console screen (list/record/form), build it on @temps-sdk/ds templates and...

- Repository: https://github.com/gotempsh/temps (887 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add gotempsh/temps --skill temps-design-system -g -a claude-code -y`
Codex: `npx skills add gotempsh/temps --skill temps-design-system -g -a codex -y`
Cursor: `npx skills add gotempsh/temps --skill temps-design-system -g -a cursor -y`
Gemini CLI: `npx skills add gotempsh/temps --skill temps-design-system -g -a gemini-cli -y`

## Description

Classify a console screen (list/record/form), build it on @temps-sdk/ds templates and the shared shadcn primitives in @temps-sdk/ui, and follow the console's status vocabulary and status colour rules. Use for any new or changed console UI in web/src, and when building or extending web/packages/ds itself.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Temps console design

Two documents govern console UI, and they cover different ground:

- **`DESIGN.md`** (repo root): the existing, authoritative reference for
  `web/src` as 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. Read `RULES.md`, `brand-guidelines.md`, and
  `design-system-handoff.md` in `web/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/ds` itself (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:

The rest: https://github.com/gotempsh/temps/blob/HEAD/.agents/skills/temps-design-system/SKILL.md