agentsclimarketplace

Otf tokens

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

Free MIT agent skills that teach Claude Code, Cursor & Codex to build production cross-platform (web + React Native) UIs with the OTF SDK — npx skills add otf-kit/skills

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 author says it does

Copied from the file, not written here

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.

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, 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

Gives 0 of the 12 instructions most design systems skills give

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

  • create a custom theme if neededin 54 of 528, across 10 files
  • read the corresponding theme filein 54 of 528, across 10 files
  • ask which theme to applyin 53 of 528, across 9 files
  • show the theme showcasein 53 of 528, across 9 files
  • maintain visual identity across all slidesin 50 of 528, across 6 files
  • apply the specified colors and fontsin 47 of 528, across 3 files
  • get explicit confirmationin 45 of 528, across 1 file
  • Generate a design system before codingin 19 of 528, across 6 files
  • Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
  • Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
  • Check Python installation and install if missingin 17 of 528, across 4 files
  • Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

  • install the tokens package
  • import the stylesheet at app root
  • set the palette using a data-theme attribute
  • read colors via CSS variables or token classes
  • define a custom theme block to add a palette

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. 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.