create-proto 0.1.7 → 0.1.9

package/README.md

@@ -1,12 +1,14 @@
 # create-proto
 
-Scaffold a new Proto prototype:
+Scaffold a new Prototo prototype:
 
 ```bash
 npm create proto@latest myapp
 ```
 
-## What Proto is
+> The npm package is `create-proto` (and the CLI bin is `proto`) for historical reasons. The brand and product name is **Prototo** — that's what designers see in the banner, in the iOS nav bar, and at [prototo.app](https://prototo.app).
+
+## What Prototo is
 
 A prompt-native design environment. The iOS Simulator is the canvas. Claude Code CLI is the design tool. The designer describes what they want; native iOS UI appears in the Simulator, with Apple's real Liquid Glass on iOS 26+.
 
@@ -14,8 +16,8 @@ No canvas. No IDE. No engineering concepts.
 
 ## What this command does
 
-1. Scaffolds the project: `DESIGN.md` (design system source-of-truth), `CLAUDE.md` (Claude Code instructions for Proto-aware generation), Proto component library, a starter Welcome screen
-2. Installs dependencies (Expo SDK 55, React Native, Reanimated 4, `@expo/ui`, `expo-glass-effect`)
+1. Scaffolds the project: `DESIGN.md` (design system source-of-truth), `CLAUDE.md` (Claude Code instructions for Prototo-aware generation), Prototo component library, a starter Welcome screen
+2. Installs dependencies (Expo SDK 55, React Native, Reanimated 4, `@expo/ui`, `expo-glass-effect`, `expo-clipboard`)
 3. Auto-launches Metro and opens the iOS Simulator
 
 Then in another terminal:
@@ -36,7 +38,8 @@ Claude reads `CLAUDE.md`, generates `app/_layout.tsx` using Apple's native `UITa
 
 ## Learn more
 
-[github.com/sherizan/proto](https://github.com/sherizan/proto)
+- Website: [prototo.app](https://prototo.app)
+- Source: [github.com/sherizan/proto](https://github.com/sherizan/proto)
 
 ## License
 

package/dist/banner.js

@@ -2,16 +2,16 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 const ART = [
-    '██████╗ ██████╗  ██████╗ ████████╗ ██████╗ ',
-    '██╔══██╗██╔══██╗██╔═══██╗╚══██╔══╝██╔═══██╗',
-    '██████╔╝██████╔╝██║   ██║   ██║   ██║   ██║',
-    '██╔═══╝ ██╔══██╗██║   ██║   ██║   ██║   ██║',
-    '██║     ██║  ██║╚██████╔╝   ██║   ╚██████╔╝',
-    '╚═╝     ╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝ ',
+    '██████╗ ██████╗  ██████╗ ████████╗ ██████╗ ████████╗ ██████╗ ',
+    '██╔══██╗██╔══██╗██╔═══██╗╚══██╔══╝██╔═══██╗╚══██╔══╝██╔═══██╗',
+    '██████╔╝██████╔╝██║   ██║   ██║   ██║   ██║   ██║   ██║   ██║',
+    '██╔═══╝ ██╔══██╗██║   ██║   ██║   ██║   ██║   ██║   ██║   ██║',
+    '██║     ██║  ██║╚██████╔╝   ██║   ╚██████╔╝   ██║   ╚██████╔╝',
+    '╚═╝     ╚═╝  ╚═╝ ╚═════╝    ╚═╝    ╚═════╝    ╚═╝    ╚═════╝ ',
 ].join('\n');
 const TAGLINE = 'The prompt-native design environment for native iOS.';
 export function renderBanner(version) {
-    return `${ART}\n\nProto v${version}\n${TAGLINE}\n`;
+    return `${ART}\n\nPrototo v${version}\n${TAGLINE}\n`;
 }
 export function readOwnVersion() {
     const here = path.dirname(fileURLToPath(import.meta.url));

package/dist/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../src/banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,GAAG,GAAG;IACV,6CAA6C;IAC7C,6CAA6C;IAC7C,6CAA6C;IAC7C,6CAA6C;IAC7C,6CAA6C;IAC7C,6CAA6C;CAC9C,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,OAAO,GAAG,sDAAsD,CAAC;AAEvE,MAAM,UAAU,YAAY,CAAC,OAAe;IAC1C,OAAO,GAAG,GAAG,cAAc,OAAO,KAAK,OAAO,IAAI,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC;KAC5C,CAAC;IACF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;YAC3D,IAAI,GAAG,CAAC,IAAI,KAAK,cAAc,IAAI,OAAO,GAAG,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;gBACnE,OAAO,GAAG,CAAC,OAAO,CAAC;YACrB,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,WAAW;QACb,CAAC;IACH,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../src/banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,GAAG,GAAG;IACV,+DAA+D;IAC/D,+DAA+D;IAC/D,+DAA+D;IAC/D,+DAA+D;IAC/D,+DAA+D;IAC/D,+DAA+D;CAChE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,OAAO,GAAG,sDAAsD,CAAC;AAEvE,MAAM,UAAU,YAAY,CAAC,OAAe;IAC1C,OAAO,GAAG,GAAG,gBAAgB,OAAO,KAAK,OAAO,IAAI,CAAC;AACvD,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC;KAC5C,CAAC;IACF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;YAC3D,IAAI,GAAG,CAAC,IAAI,KAAK,cAAc,IAAI,OAAO,GAAG,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;gBACnE,OAAO,GAAG,CAAC,OAAO,CAAC;YACrB,CAAC;QACH,CAAC;QAAC,MAAM,CAAC;YACP,WAAW;QACb,CAAC;IACH,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/messages.js

@@ -1,12 +1,12 @@
 export const messages = {
-    header: 'Proto',
+    header: 'Prototo',
     settingUp: (name, percent) => percent !== undefined ? `Setting up ${name}... ${percent}%` : `Setting up ${name}...`,
     installed: (seconds) => `Installed in ${seconds}s`,
     folderExists: (name) => `That folder already exists. Pick another name: npm create proto@latest <name> (currently: "${name}").`,
     installFailedHint: (name) => `Couldn't install dependencies. Once your environment is ready: cd ${name} && pnpm install && proto start`,
     cancelled: 'Cancelled. Folder removed.',
     usingDefaultName: (name) => `Using name: ${name} (pass a name as the first argument to override).`,
-    bootingProto: 'Booting Proto...',
+    bootingProto: 'Booting Prototo...',
     nextSteps: (name) => `Keep this terminal running. It auto-refreshes your prototype.\n\nOpen a new terminal and run:\n  cd ${name} && claude\n\nIn Claude, press Shift+Tab to switch to Auto mode.`,
     protoCliNotFound: (name) => `Couldn't find proto-cli. Run manually: cd ${name} && npx proto start`,
     howToRestart: (name) => `Proto stopped.\nTo restart Proto: cd ${name} && npx proto start\nTo prompt Claude: cd ${name} && claude`,

package/dist/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,OAAO;IACf,SAAS,EAAE,CAAC,IAAY,EAAE,OAAgB,EAAE,EAAE,CAC5C,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,IAAI,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,KAAK;IACvF,SAAS,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,gBAAgB,OAAO,GAAG;IAC1D,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,8FAA8F,IAAI,KAAK;IACzG,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAClC,qEAAqE,IAAI,iCAAiC;IAC5G,SAAS,EAAE,4BAA4B;IACvC,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,eAAe,IAAI,mDAAmD;IACxE,YAAY,EAAE,kBAAkB;IAChC,SAAS,EAAE,CAAC,IAAY,EAAE,EAAE,CAC1B,uGAAuG,IAAI,kEAAkE;IAC/K,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,6CAA6C,IAAI,qBAAqB;IACxE,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,wCAAwC,IAAI,6CAA6C,IAAI,YAAY;IAC3G,SAAS,EACP,yEAAyE;IAC3E,YAAY,EACV,8DAA8D;IAChE,OAAO,EAAE,gDAAgD;IACzD,aAAa,EACX,mEAAmE;CACtE,CAAC"}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,CAAC,IAAY,EAAE,OAAgB,EAAE,EAAE,CAC5C,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,IAAI,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,cAAc,IAAI,KAAK;IACvF,SAAS,EAAE,CAAC,OAAe,EAAE,EAAE,CAAC,gBAAgB,OAAO,GAAG;IAC1D,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,8FAA8F,IAAI,KAAK;IACzG,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE,CAClC,qEAAqE,IAAI,iCAAiC;IAC5G,SAAS,EAAE,4BAA4B;IACvC,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,eAAe,IAAI,mDAAmD;IACxE,YAAY,EAAE,oBAAoB;IAClC,SAAS,EAAE,CAAC,IAAY,EAAE,EAAE,CAC1B,uGAAuG,IAAI,kEAAkE;IAC/K,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,6CAA6C,IAAI,qBAAqB;IACxE,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,wCAAwC,IAAI,6CAA6C,IAAI,YAAY;IAC3G,SAAS,EACP,yEAAyE;IAC3E,YAAY,EACV,8DAA8D;IAChE,OAAO,EAAE,gDAAgD;IACzD,aAAa,EACX,mEAAmE;CACtE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Scaffold a new Proto prototype: `npm create proto@latest myapp`. Designer-first native iOS prototyping environment that pairs with Claude Code.",
   "type": "module",
   "license": "MIT",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@sherizan/proto-cli": "^0.1.7",
+    "@sherizan/proto-cli": "^0.1.9",
     "fs-extra": "^11.2.0",
     "qrcode-terminal": "^0.12.0",
     "validate-npm-package-name": "^5.0.1"

package/template/CLAUDE.md

@@ -1,6 +1,6 @@
-# Proto Project — Claude Code Instructions
+# Prototo Project — Claude Code Instructions
 
-You're the design tool inside a Proto project. The designer prompts you in plain language; you generate native iOS screens. The iOS Simulator is the canvas. Designers never touch files.
+You're the design tool inside a Prototo project. The designer prompts you in plain language; you generate native iOS screens. The iOS Simulator is the canvas. Designers never touch files.
 
 ## Read first
 - `DESIGN.md` — design tokens and the project's decisions
@@ -11,14 +11,14 @@ You're the design tool inside a Proto project. The designer prompts you in plain
 **Native iOS** — the easiest path to system-feel UI. Apple handles Liquid Glass, SF Symbols, accessibility, dynamic type:
 
 - `expo-router/unstable-native-tabs` — native `UITabBar`
-- `expo-router` `Stack` with `headerLargeTitle: true` + `headerTransparent: true` — native large-title nav bar
+- `expo-router` `Stack` with `headerLargeTitle: true` + `title` set per route — native large-title nav bar. Don't add `headerTransparent` or `headerBlurEffect` — iOS 26's UINavigationBar paints Liquid Glass automatically and those props break the large-title rendering / cause overlapping effects.
 - `expo-symbols` `SymbolView` — SF Symbol icons
 - `@expo/ui/swift-ui` — `Button`, `Toggle`, `Form`, `Section`, etc.
 - `expo-glass-effect` `GlassView` — Liquid Glass surfaces
 
-**Proto primitives** in `/components/proto` — small set of themed fallbacks: `Screen`, `Stack`, `Row`, `Text`, `Card`, `Button`, `Toggle`, `Divider`, `Modal`. Read the file when you need the API.
+**Prototo primitives** in `/components/proto` — small set of themed fallbacks: `Screen`, `Stack`, `Row`, `Text`, `Card`, `Button`, `Toggle`, `Divider`, `Modal`. Read the file when you need the API. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
 
-**Custom** — when none of the above fit, write the component you need with React Native. Put shared ones in `/components/shared/`. The designer's vision wins; the primitives are starting points, not constraints.
+**Custom** — when none of the above fit, write the component you need with React Native. Put shared ones in `/components/shared/`. The designer's vision wins; primitives are starting points, not constraints.
 
 ## File layout
 
@@ -27,7 +27,7 @@ You're the design tool inside a Proto project. The designer prompts you in plain
 /app/_layout.tsx       Stack (for native large titles) or NativeTabs (for tabs)
 /screens/<Name>.tsx    screen, PascalCase, default export
 /components/shared/    designer-created custom components
-/components/proto/     Proto primitives — read-only
+/components/proto/     Prototo primitives — read-only
 ```
 
 A new screen `screens/Settings.tsx` needs:

package/template/DESIGN.md

@@ -26,8 +26,7 @@ iOS system font with dynamic type defaults. Override per-size below if you need
 xs 4 · sm 8 · md 16 · lg 24 · xl 32
 
 ### Surface
-- iOS 26+: Apple Liquid Glass via `expo-glass-effect`
-- iOS < 26 + Android: system blur via `expo-blur`
+Apple Liquid Glass via `expo-glass-effect` (iOS 26+ native material). On older iOS it falls back to a plain surface — Prototo targets iOS 26.
 
 (Add your own tokens below as you describe what you want. Claude rewrites this file as the design system evolves.)
 

package/template/app/_layout.tsx

@@ -2,15 +2,14 @@ import { Stack } from 'expo-router';
 
 export default function RootLayout() {
   return (
-    <Stack
-      screenOptions={{
-        headerLargeTitle: true,
-        headerTransparent: true,
-        headerBlurEffect: 'systemChromeMaterial',
-        headerLargeTitleShadowVisible: false,
-      }}
-    >
-      <Stack.Screen name="index" options={{ title: 'Proto' }} />
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Prototo',
+          headerLargeTitle: true,
+        }}
+      />
     </Stack>
   );
 }

package/template/components/proto/Card.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
-import { BlurView } from 'expo-blur';
-import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
+import { GlassView } from 'expo-glass-effect';
 import type { ReactNode } from 'react';
 import { useTheme } from './useTheme';
 
@@ -10,40 +9,33 @@ export type CardProps = {
   children?: ReactNode;
 };
 
+/**
+ * Card surface.
+ *
+ * glass={true}: Apple Liquid Glass via expo-glass-effect's GlassView. On
+ * iOS 26+ this paints the real native material that refracts content behind
+ * it. On older iOS GlassView falls back to a plain View — no third-party
+ * blur. Proto targets iOS 26 and only uses Apple's native material.
+ *
+ * Plain (no glass): opaque surface with theme tokens.
+ */
 export function Card({ glass = false, padding, children }: CardProps) {
   const theme = useTheme();
   const pad = padding ?? theme.space.md;
 
   if (glass) {
-    if (isLiquidGlassAvailable()) {
-      return (
-        <GlassView
-          style={{
-            borderRadius: theme.radius.card,
-            borderWidth: 1,
-            borderColor: theme.border.default,
-            padding: pad,
-            overflow: 'hidden',
-          }}
-        >
-          {children}
-        </GlassView>
-      );
-    }
     return (
-      <View
+      <GlassView
         style={{
           borderRadius: theme.radius.card,
-          overflow: 'hidden',
           borderWidth: 1,
           borderColor: theme.border.default,
-          backgroundColor: theme.surface.card,
+          padding: pad,
+          overflow: 'hidden',
         }}
       >
-        <BlurView intensity={theme.blur.card} tint="light" style={{ padding: pad }}>
-          {children}
-        </BlurView>
-      </View>
+        {children}
+      </GlassView>
     );
   }
 

package/template/components/proto/Screen.tsx

@@ -8,30 +8,42 @@ export type ScreenProps = {
   children?: ReactNode;
 };
 
+/**
+ * Screen wrapper for iOS 26+.
+ *
+ * Scrollable (default): the ScrollView is the top-level element so the native
+ * UINavigationBar can track it for large-title scroll behavior — the big
+ * title shrinks to a compact inline title as content scrolls up. iOS's
+ * automatic content insets handle the transparent nav bar and home indicator.
+ *
+ * Non-scrollable: SafeAreaView guards bottom + side edges (no scroll to track).
+ *
+ * Background lives on the outermost element so it covers bounce / inset areas.
+ * For Liquid Glass surfaces inside (cards, sheets), use Card with glass={true}
+ * — it wraps expo-glass-effect's GlassView, iOS 26's native material.
+ */
 export function Screen({ scrollable = true, children }: ScreenProps) {
   const theme = useTheme();
-  const Body = scrollable ? ScrollView : View;
+  const padding = theme.space.md;
+
+  if (scrollable) {
+    return (
+      <ScrollView
+        style={{ flex: 1, backgroundColor: theme.surface.primary }}
+        contentContainerStyle={{ padding, gap: padding }}
+        contentInsetAdjustmentBehavior="automatic"
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
   return (
-    <View style={{ flex: 1, backgroundColor: theme.surface.primary }}>
-      <SafeAreaView style={{ flex: 1 }} edges={['bottom', 'left', 'right']}>
-        <Body
-          style={{ flex: 1 }}
-          contentContainerStyle={
-            scrollable
-              ? { padding: theme.space.md, gap: theme.space.md }
-              : undefined
-          }
-          contentInsetAdjustmentBehavior={scrollable ? 'automatic' : undefined}
-        >
-          {scrollable ? (
-            children
-          ) : (
-            <View style={{ flex: 1, padding: theme.space.md, gap: theme.space.md }}>
-              {children}
-            </View>
-          )}
-        </Body>
-      </SafeAreaView>
-    </View>
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: theme.surface.primary }}
+      edges={['bottom', 'left', 'right']}
+    >
+      <View style={{ flex: 1, padding, gap: padding }}>{children}</View>
+    </SafeAreaView>
   );
 }

package/template/components/proto/tokens/liquidGlass.ts

@@ -4,7 +4,7 @@ export const liquidGlass: Theme = {
   surface: {
     primary: 'rgba(255, 255, 255, 0.72)',
     secondary: 'rgba(255, 255, 255, 0.48)',
-    card: 'rgba(255, 255, 255, 0.6)',
+    card: '#f3f5f8',
     nav: 'rgba(255, 255, 255, 0.82)',
   },
   text: {
@@ -19,8 +19,8 @@ export const liquidGlass: Theme = {
     modal: 60,
   },
   border: {
-    default: 'rgba(255, 255, 255, 0.4)',
-    strong: 'rgba(255, 255, 255, 0.7)',
+    default: 'rgba(0, 0, 0, 0.08)',
+    strong: 'rgba(0, 0, 0, 0.16)',
   },
   radius: {
     card: 22,

package/template/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@expo/ui": "55.0.17",
     "expo": "~55.0.26",
-    "expo-blur": "~55.0.14",
+    "expo-clipboard": "~8.0.7",
     "expo-glass-effect": "~55.0.11",
     "expo-haptics": "~55.0.14",
     "expo-router": "~55.0.16",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@sherizan/proto-cli": "^0.1.7",
+    "@sherizan/proto-cli": "^0.1.9",
     "@types/react": "~19.2.15",
     "babel-preset-expo": "~55.0.22",
     "typescript": "^5.9.2"

package/template/screens/Home.tsx

@@ -1,4 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { Pressable } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+import * as Haptics from 'expo-haptics';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -20,6 +23,32 @@ const STEPS = [
   },
 ];
 
+function TutorialCard({ step }: { step: (typeof STEPS)[number] }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await Clipboard.setStringAsync(step.prompt);
+    await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <Card padding={20}>
+      <Stack gap={10}>
+        <Row gap={10} align="center">
+          <Text size="headline">{step.n}.</Text>
+          <Text size="headline">{step.title}</Text>
+        </Row>
+        <Text size="body" color="secondary">{step.prompt}</Text>
+        <Pressable onPress={handleCopy} style={{ alignSelf: 'flex-end', marginTop: 4 }}>
+          <Text size="caption" color="accent">{copied ? 'Copied' : 'Copy'}</Text>
+        </Pressable>
+      </Stack>
+    </Card>
+  );
+}
+
 export default function Home() {
   const opacity = useSharedValue(0);
   const translateY = useSharedValue(12);
@@ -36,13 +65,13 @@ export default function Home() {
 
   return (
     <Screen scrollable>
-      <Stack gap={24} padding={20}>
+      <Stack gap={24}>
         <Animated.View style={heroStyle}>
           <Card glass padding={24}>
             <Stack gap={8}>
-              <Text size="title">You're in.</Text>
+              <Text size="headline">You're in.</Text>
               <Text size="body" color="secondary">
-                Try these prompts in Claude Code in Auto mode (press Shift+Tab).
+                {`In a terminal: cd {{APP_NAME}} && claude. Paste a prompt below.`}
               </Text>
             </Stack>
           </Card>
@@ -50,24 +79,14 @@ export default function Home() {
 
         <Stack gap={12}>
           {STEPS.map((step) => (
-            <Card key={step.n} padding={20}>
-              <Stack gap={10}>
-                <Row gap={10} align="center">
-                  <Text size="headline" color="accent">{step.n}.</Text>
-                  <Text size="headline">{step.title}</Text>
-                </Row>
-                <Text size="body" color="accent" style={{ fontFamily: 'Menlo' }}>
-                  {step.prompt}
-                </Text>
-              </Stack>
-            </Card>
+            <TutorialCard key={step.n} step={step} />
           ))}
         </Stack>
 
         <Divider />
 
         <Text size="caption" color="secondary">
-          Each prompt builds on the last. Proto reads DESIGN.md before every change.
+          Each prompt builds on the last. Prototo reads DESIGN.md before every change.
         </Text>
       </Stack>
     </Screen>