agentsclimarketplace

Otf ui native

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

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

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 native iOS / Android (and web) UI with @otfdashkit/ui-native — a free, open-source (MIT) Expo / React Native component library that mirrors @otfdashkit/ui's component names and props. Use when building an Expo app and you want the same <Button>, <Card>, <Input> API as the web SDK, wrapped once with <OTFProvider>. One codebase, iOS + Android + web.

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

@otfdashkit/ui-native — native components

A free, MIT Expo / React Native component library built on Tamagui-core. It mirrors @otfdashkit/ui (web) component names and props one-for-one, so a screen you know on web reads the same on native — one codebase ships iOS, Android, and web.

When to use this skill

Activate when building or extending an Expo / React Native app and you want the opinionated, accessible OTF component API on native — the same <Button>, <Card>, <Input>, etc. as @otfdashkit/ui, with theming handled for you.

Install

pnpm add @otfdashkit/ui-native @otfdashkit/tokens

Peer dependencies (Expo / Tamagui stack): tamagui, @tamagui/core, @tamagui/config, @tamagui/lucide-icons, expo-router, react, react-native, react-native-reanimated, react-native-svg. Install any your app doesn't already have.

Set up (once)

Wrap your app root in <OTFProvider> — it hides the createTamagui + config call so you never write Tamagui boilerplate:

// app/_layout.tsx (Expo Router)
import { OTFProvider } from '@otfdashkit/ui-native'

export default function RootLayout() {
  return (
    <OTFProvider>
      {/* your navigator / screens */}
    </OTFProvider>
  )
}

Use

import { Button, Card, Input } from '@otfdashkit/ui-native'
// Same names and props as @otfdashkit/ui on the web.

Conventions

  • Wrap the root once in <OTFProvider> — no createTamagui config needed.
  • Theme through @otfdashkit/tokens (see the otf-tokens skill) so web and native stay visually identical.
  • Reach for these components before raw React Native primitives — they ship the shared API, theming, and accessibility.

Links

Gives 0 of the 12 instructions most design frontend skills give

Counted across 1,170 of the 1,878 authors here whose files we hold, read 2026-08-06

  • use css variables for color consistencyin 73 of 1170, across 24 files
  • match implementation complexity to the aesthetic visionin 70 of 1170, across 20 files
  • commit to one bold aesthetic direction before codingin 70 of 1170, across 25 files
  • add atmospheric background effects and texturesin 58 of 1170, across 10 files
  • use unexpected spatial compositions and layoutsin 55 of 1170, across 7 files
  • implement real working codein 55 of 1170, across 7 files
  • vary themes and aesthetics across different designsin 48 of 1170, across 7 files
  • launch chromium in headless modein 47 of 1170, across 4 files
  • close the browser when donein 47 of 1170, across 4 files
  • run provided scripts with help flag firstin 47 of 1170, across 4 files
  • use descriptive selectors for elementsin 47 of 1170, across 4 files
  • wait for network idle statein 46 of 1170, across 3 files

Said here and by no other author read

  • install @otfdashkit/ui-native and @otfdashkit/tokens
  • wrap the app root once in OTFProvider
  • import components from @otfdashkit/ui-native
  • theme through @otfdashkit/tokens
  • use shared components over raw React Native primitives

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.