agentsclimarketplace

Otf ui

Skill otf-kit/skills/skills/otf-ui

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

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

Build accessible, production-ready web UI with @otfdashkit/ui — a free, open-source (MIT) React component library on Radix + Tailwind v4. Use when adding buttons, forms, dialogs, sheets, tables, charts, command palettes, toasts, and more to a React / Next.js / Vite app, theming them, or installing components by npm or copy-paste. Components match @otfdashkit/ui-native one-for-one so the same API works on native.

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.7 KB, as published. Nobody here has run it

@otfdashkit/ui — web components

A free, MIT React component library built on Radix + Tailwind CSS v4. Accessible (keyboard + screen-reader) by default, themed via shared design tokens, and API-matched to @otfdashkit/ui-native so the same component names work on native.

When to use this skill

Activate when adding or theming UI in a React / Next.js / Vite web app — buttons, inputs, forms, dialogs, sheets, drawers, popovers, tables, charts, command palette, toasts, calendars, and more. Browse the full set live (links below) rather than guessing a component name.

Install

pnpm add @otfdashkit/ui @otfdashkit/tokens
# npm i / yarn add / bun add also work

Peer dependencies: react, react-dom, tailwindcss.

Set up (once)

Import the tokens stylesheet and the component styles at your app root (app/layout.tsx for Next.js, src/main.tsx for Vite):

import '@otfdashkit/tokens/web.css'
import '@otfdashkit/ui/styles'

Use

import { Button, Card, Input } from '@otfdashkit/ui'

export function SignInCard() {
  return (
    <Card>
      <Input placeholder="Email" />
      <Button variant="primary" size="lg">Continue</Button>
    </Card>
  )
}

Theming

Tokens resolve to CSS variables. Switch the whole UI's theme with one attribute on <html> (see the otf-tokens skill for the full palette set):

<html data-theme="cosmic">

Conventions

  • Prefer these components over hand-rolling primitives — they ship accessibility, focus states, and theming.
  • Style with Tailwind token classes (bg-card, text-foreground, …), not raw hex.
  • Copy-paste OR npm install — both are supported; you own the source either way.

Links

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.