agentsclimarketplace
Sign in

Otf tokens

Skill otf-kit/skills/skills/otf-tokens

Theme any app with @otfdashkit/tokens — the free, open-source (MIT) shared design-token system behind the OTF SDK. CSS variables on web, native tokens on mobile, so web and native stay visually identical. Ships ready-made palettes (Slate, Warm, Cosmic, Terminal, plus Mono, Lavender, Glacier, Forest, Obsidian, Solar, Orchid, Indigo) you switch with one attribute. Use to theme an app, build a theme switcher, or keep colors consistent across platforms.From its SKILL.md

Install
npx -y skills add otf-kit/skills --skill otf-tokens

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.3 KB, 493 tokens by cl100k_base, as published. Nobody here has run it

@otfdashkit/tokens — shared design tokens

The free, MIT design-token layer behind the OTF SDK. The same palette resolves to CSS variables on web and native design tokens on mobile, so a @otfdashkit/ui web app and a @otfdashkit/ui-native app share one visual language. Works on its own in any web or Tamagui app, too.

When to use this skill

Activate to theme an app, add or switch a color palette, build a theme switcher, or keep web + native looking identical.

Install

pnpm add @otfdashkit/tokens

Web

Import the stylesheet once at your app root, then set the palette with a class or data-theme attribute on <html>:

import '@otfdashkit/tokens/web.css'

<html data-theme="cosmic">      <!-- or class="theme-cosmic" -->
<html data-theme="cosmic" class="dark">   <!-- dark variant -->

Feature code reads the tokens as CSS variables / Tailwind token classes (bg-background, text-foreground, border-border, …) — never raw hex.

Ready-made palettes

Slate · Warm · Cosmic · Terminal · Mono · Lavender · Glacier · Forest · Obsidian · Solar · Orchid · Indigo — each with a light and dark mode. Add your own by defining a .theme-<name> block following the same shape.

Native

On Tamagui / Expo, the tokens are consumed through @otfdashkit/ui-native's <OTFProvider> (see the otf-ui-native skill) — the same palette names apply, so a theme switch re-tints the whole app.

Links

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.