What is the tinte skill?
The tinte skill is a SKILL.md in Railly/tinte that gives your AI coding agent design system infrastructure. It browses and installs tinte.dev themes as shadcn registry items, extracts a theme from an image, and previews the result with a code screenshot.
The tinte skill is design system infrastructure for AI agents, defined in a SKILL.md in Railly/tinte. It generates, compiles, installs and previews design systems from one source of truth, and triggers when you ask about themes, presets or color palettes.
Tinte maintains a theme graph of 13 semantic OKLCH color tokens per mode. These compile to shadcn/ui presets, VS Code themes, terminal configs and 19+ other formats, so one theme can serve several tools.
Color model
- Surfaces:
bgfor background,bg_2for raised surfaces. - Lines and states:
uifor borders,ui_2for subtle borders,ui_3for hover. - Text:
txfor primary,tx_2for secondary,tx_3for muted. - Accents:
prprimary,scsecondary, plusac_1,ac_2andac_3.
The tokens compile to 30+ shadcn CSS variables, including background, foreground, card, primary, secondary, muted, accent, destructive, chart 1 to 5 and sidebar variables, in OKLCH formatting.
Preset API and workflows
Every public theme installs as a shadcn registry:base item by passing its preset API path on tinte.dev to npx shadcn@latest add, and font items use ?variable=sans or ?variable=mono. A pack request returns the base, fonts and ready install commands.
Four workflows are written out: browse and install a design system, extract one from a screenshot, switch the current design system, and preview the result with a screenshot. Browsing filters by ?vendor=tinte|tweakcn|rayso.
Compiler and lint commands
The skill also documents the design system compiler. tinte build --plugin emits a plugin.json, a design SKILL.md and tokens.css, and tinte lint src/ flags hex, rgb and hsl literals and Tailwind palette classes. With --json it exits 1 on violations for a CI gate.
Who the tinte skill is for
Best for
- shadcn/ui projects that want to install or swap a complete theme with fonts from one URL.
- Teams that want one token source compiled to several formats, including VS Code and terminal themes.
- Pulling a color theme out of a screenshot, then matching it against existing themes.
Not for
- Writing shadcn/ui components, which the shadcn skill covers.
- Naming and tiering design tokens by hand, which the design tokens skill covers.
- Presentation and document themes, which the theme factory skill covers.
How to install Tinte Skill: Install shadcn Themes and Presets
npx shadcn@latest add https://tinte.dev/api/preset/{slug}bunx tinte <theme-slug> installs a theme into VS Code, Cursor or Zed.Pick a theme slug
Search the public themes endpoint, for example
GET https://tinte.dev/api/themes/public?search=minimal, and choose a theme.Run the install command
Replace
{slug}with the theme slug and run the command above in your shadcn project to install the theme as aregistry:baseitem.Install the fonts
Run
npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=sans, and use?variable=monofor the mono font.Verify the project
Run
npx shadcn info --jsonto confirm the result.
Check that it loaded
Ask your agent to find a minimal dark theme and install it. Expect an npx shadcn@latest add https://tinte.dev/api/preset/{slug} command followed by npx shadcn info --json.
Key features
- Theme graphA graph of 13 semantic OKLCH color tokens per mode compiles to shadcn/ui presets, VS Code themes, terminal configs and 19+ formats.
- Preset installAny public theme installs as a shadcn
registry:baseitem when its preset path on tinte.dev is passed tonpx shadcn@latest add. - Font installTheme fonts install separately through the same preset path with
?variable=sansor?variable=mono. - Preset packA GET on the preset path with
?type=packreturns the base, fonts, slug and the install commands in one response. - Theme browsingA public themes endpoint searches by query with
limitandpage, and filters with?vendor=tinte|tweakcn|rayso. - Registry routesRoutes under
/r/{slug}serve rawregistry:baseandregistry:fontitems that are compatible with shadcn. - Theme from an imageA POST to the extract theme endpoint on ray.tinte.dev returns light and dark color blocks, and an optional AI mode raises fidelity.
- Screenshot previewA POST to the screenshot endpoint renders code with any Tinte theme applied and returns a PNG for visual verification.
- Plugin compiler
tinte build --plugin --config tinte.config.json --out ./acme-plugincompiles an identity into an installable Agent Plugin. - Token lint
tinte lint src/scans for hex, rgb and hsl literals and Tailwind palette classes, and--jsonexits 1 on violations.
Frequently asked questions
What is the tinte skill?
It is a SKILL.md for design system infrastructure in the Railly/tinte repository. It lets your AI coding agent browse, install and preview tinte.dev themes, compile 13 semantic OKLCH tokens into shadcn presets and other formats, and extract a theme from an image.
How do I install the tinte skill?
Run npx shadcn@latest add followed by the tinte.dev preset path api/preset/{slug}, using the slug of a theme from tinte.dev. Add /font?variable=sans or ?variable=mono after the slug to install the fonts, then run npx shadcn info --json to verify. The skill triggers when you ask about themes, presets or color palettes, or say tinte.
How do I get a tinte theme pack for shadcn?
Send a GET request to the preset path with type=pack, such as tinte.dev/api/preset/{slug}?type=pack. The response returns the base item, the fonts, the slug and the ready install commands, so you can run npx shadcn@latest add on the base and each font in turn.
Which color tokens does tinte use?
Thirteen semantic OKLCH tokens per light and dark mode: bg, bg_2, ui, ui_2, ui_3, tx, tx_2, tx_3, pr, sc, ac_1, ac_2 and ac_3. They compile to 30+ shadcn CSS variables such as background, foreground, card, primary, muted, accent and sidebar variables.
Can tinte extract a theme from a screenshot?
Yes. POST an image to the extract theme endpoint on ray.tinte.dev and it returns dark and light color blocks, a name, a gradient and swatches. Adding mode=ai with a model name gives higher fidelity, and the colors can then search for a matching theme.
What does tinte lint catch?
Running tinte lint on a source folder scans for hex, rgb and hsl color literals and Tailwind palette classes that bypass the tokens. With the json flag the output is machine readable, and it exits with code 1 on violations so it can gate CI.
What license does tinte use?
It is MIT licensed. The Railly/tinte repository uses the MIT license, and its README points to the LICENSE file, so you can use the tinte skill and adapt it for your own projects, including the shadcn presets, token compiler and lint commands it documents.