NativeCtx UI

Generate iOS, Android, and web interfaces simultaneously with platform-specific navigation patterns and native components where users expect them.

• Claude writes it right the first time — an MCP server and six Claude Skills install with the package. Claude calls live tools for props, tokens, and palettes mid-conversation instead of guessing at an API it half-remembers.
• One tree, three platforms — the same component code runs on iOS, Android, and web. No platform forks, no Platform.select scattered through your screens.
• Native where users expect native — Switch, Slider, SegmentedControl, and ProgressIndicator render as real SwiftUI and Jetpack Compose via Expo UI. Tabs and headers use the platform's own, not JavaScript lookalikes.
• Material 3 design system — one seed color generates the whole palette: semantic tokens, type scale, elevation, and shape flow through all 29 components. Accessible roles, focus management, and reduced motion come with them.

nativectx.com is itself a NativeCtx UI app. These are the same screen, built once, running as a website, a real iOS app, and a real Android app.

iOS — SwiftUI controls, native tab bar	Android — Jetpack Compose controls, Material tab bar

npx expo install @nativectx/ui @expo/vector-icons
npx nativectx init

init installs the Claude Skills, merges the nativectx MCP server into .mcp.json, and finds your root layout to tell you where the provider goes. --dry-run previews the whole thing; re-running is a no-op.

// src/app/_layout.tsx  (or app/_layout.tsx, depending on your template)
import { NativeCtxProvider, createBrand } from '@nativectx/ui';

const brand = createBrand({
  name: 'My App',
  colors: { colorSeed: { primary: '#6750A4' } }, // Auto-generates the M3 palette
  spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 20, xxl: 24, xxxl: 40 },
  borderRadius: { xs: 4, sm: 8, md: 12, lg: 16, xl: 28, full: 9999 },
});

export default function RootLayout() {
  return <NativeCtxProvider brand={brand}>{/* Your app */}</NativeCtxProvider>;
}

import { Button, Typography, ThemedView } from '@nativectx/ui';

function MyScreen() {
  return (
    <ThemedView variant="surface">
      <Typography variant="headlineMedium">Welcome</Typography>
      <Button title="Get Started" variant="filled" onPress={() => {}} />
    </ThemedView>
  );
}

Component reference, theme tokens, hooks, and live examples: nativectx.com.

npx nativectx init sets up both of the following in one pass. The individual commands below are there when you want just one of them.

npx nativectx skills

Copies the six app-building skills — setup, components, theme, navigation, mcp, migration — into .claude/skills/. Claude Code reads them automatically. Re-run after upgrading to refresh them.

Two further skills cover developing @nativectx/ui itself. They are held back by default so they don't compete for context in your app:

npx nativectx skills --contributor

Re-running without the flag prunes contributor skills a previous install left behind. Nothing else in .claude/skills/ is touched.

To wire it up by hand instead, add this to your Claude Code .mcp.json or Claude Desktop config:

{
  "mcpServers": {
    "nativectx": {
      "command": "npx",
      "args": ["-y", "nativectx", "mcp"]
    }
  }
}

Already installed locally? Point at the bundled CLI instead: node ./node_modules/@nativectx/ui/dist/mcp/cli.mjs mcp.

All eight skills are also readable on demand as MCP resources, whichever set you installed.

This library was formerly published as zero-to-app:

npx nativectx migrate

Rewrites the dependency, import specifiers, the renamed ZeroToApp → NativeCtxProvider provider, your .mcp.json entry, and the stale zero-to-app-*.md skill files. --dry-run previews; anything it can't safely automate is printed as a review list.

ZeroToApp still works as a deprecated alias, so a dependency bump alone won't break your build — but it is removed in 0.3.0.

pnpm setup           # Install deps and build the library — start here
pnpm dev:storybook   # Component development
pnpm dev             # Demo app, full navigation
pnpm verify          # Everything CI runs: build, check, lint, typecheck, test

• ui/ — component library (@nativectx/ui on npm)
• nativectx/ — thin CLI alias package (nativectx on npm)
• apps/storybook/ — isolated component development
• apps/demo/ — the docs site, built with expo-router

Publishing runs from the Release workflow on a v* tag; there is no local publish script, so a release always goes out from a green, committed tree.

• Docs & Live Demo
• NPM Package
• GitHub
• Material Design 3

MIT License