# Tinte

Agent-native design system infrastructure.

- Repository: https://github.com/Railly/tinte (625 stars)
- Category: Design
- License: MIT
- Last updated: 2026-08-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Railly/tinte --skill tinte -g -a claude-code -y`
Codex: `npx skills add Railly/tinte --skill tinte -g -a codex -y`
Cursor: `npx skills add Railly/tinte --skill tinte -g -a cursor -y`
Gemini CLI: `npx skills add Railly/tinte --skill tinte -g -a gemini-cli -y`

## Description

Agent-native design system infrastructure. Browse, install, and preview design systems from tinte.dev. Use when user asks about themes, design systems, presets, color palettes, or says "tinte". Works with shadcn/cli v4 presets and registries.

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

# Tinte - Design System Infrastructure

Generate, compile, install, and preview design systems from one source of truth.

Tinte maintains a theme graph of 13 semantic OKLCH color tokens that compiles to shadcn/ui presets, VS Code themes, terminal configs, and 19+ other formats.

## Preset API (shadcn v4 compatible)

Every public Tinte theme is installable as a shadcn `registry:base` item.

### Install a theme

```bash
npx shadcn@latest add https://tinte.dev/api/preset/{slug}
```

### Install theme fonts

```bash
npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=sans
npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=mono
```

### Get full preset pack (base + fonts + install commands)

```
GET https://tinte.dev/api/preset/{slug}?type=pack
```

Response:

```json
{
  "base": { "$schema": "...", "name": "...", "type": "registry:base", "cssVars": { "light": {...}, "dark": {...} } },
  "fonts": [{ "$schema": "...", "name": "font-inter", "type": "registry:font", "font": {...} }],
  "slug": "theme-slug",
  "install": {
    "base": "npx shadcn@latest add https://tinte.dev/api/preset/{slug}",
    "fonts": ["npx shadcn@latest add https://tinte.dev/r/font/inter?variable=sans"]
  }
}
```

## Browse Themes

```
GET https://tinte.dev/api/themes/public?search={query}&limit=20&page=1
```

Optional filters: `?vendor=tinte|tweakcn|rayso`

Response includes `themes[]` with `slug`, `name`, `concept`, and color tokens.

## Get Theme Details

```
GET https://tinte.dev/api/themes/slug/{slug}
```

Returns full theme data including light/dark color blocks and overrides.

## Registry Routes (shadcn compatible)

These routes serve raw `registry:base` and `registry:font` items:

```
GET https://tinte.dev/r/{slug}                    # registry:base or registry:theme
GET https://tinte.dev/r/{slug}?type=registry:base  # explicit base type
GET https://tinte.dev/r/font/{family}?variable=sans # registry:font
```

## Extract Theme from Image

The rest: https://github.com/Railly/tinte/blob/HEAD/skills/tinte/SKILL.md