Otf cross platform ui

Skill otf-kit/skills/skills/otf-cross-platform-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-cross-platform-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 UIs that render the same on web, iOS, and Android from one component API, using OTF's free open-source (MIT) SDK. Use this when starting a cross-platform UI, deciding which OTF package to import, or when you want the same <Button>, <Card>, <Input> — same names, same props, same look — on web and native. Routes to the web (@otfdashkit/ui), native (@otfdashkit/ui-native), and theming (@otfdashkit/tokens) packages.

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

OTF — one component API, web + native

OTF is a free, MIT-licensed cross-platform UI SDK. The core idea: <Button> from @otfdashkit/ui (web — React, on Radix + Tailwind) and <Button> from @otfdashkit/ui-native (native — Expo / React Native) share the same name, the same props, and the same look. Build once, ship to the browser and to the App Store. Own the source — copy-paste or npm install, no lock-in.

When to use this skill

Activate when building a UI that targets web and/or native and you want a single, accessible, opinionated component API. Use it to decide which package to import and to wire the SDK up correctly the first time.

Which package do I import?

You're building for…	Import	Renders with
Web (Next.js, Vite, React)	`@otfdashkit/ui`	Radix + Tailwind v4
Native (Expo, React Native — iOS/Android/web)	`@otfdashkit/ui-native`	Tamagui-core
Theming for either/both	`@otfdashkit/tokens`	CSS vars on web, native tokens on mobile

The component names and props match across @otfdashkit/ui and @otfdashkit/ui-native — learn the API once, use it everywhere.

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

// Native — same names, same props. That's the whole point.
import { Button, Card, Input } from '@otfdashkit/ui-native'

Go deeper

Web components → the otf-ui skill
Native components → the otf-ui-native skill
Theming / design tokens → the otf-tokens skill