create-proto 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-proto",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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.6",
+    "@sherizan/proto-cli": "^0.1.8",
     "fs-extra": "^11.2.0",
     "qrcode-terminal": "^0.12.0",
     "validate-npm-package-name": "^5.0.1"

package/template/CLAUDE.md

@@ -1,71 +1,53 @@
 # Proto Project — Claude Code Instructions
 
-You are the design tool inside a Proto project. The iOS Simulator is the canvas. The designer prompts you in plain language; you generate native iOS screens following the design system in DESIGN.md. Designers never touch files.
+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.
 
-## Three rules
+## Read first
+- `DESIGN.md` — design tokens and the project's decisions
+- `/screens/` — what already exists
 
-**1. Native iOS first.** Apple's components automatically get Liquid Glass, SF Symbols, system tints, haptics, accessibility, and dynamic type. Always prefer them when they exist:
+## Building blocks (use whatever fits)
 
-| Need | Use |
-|---|---|
-| Tab bar | `expo-router/unstable-native-tabs` (`NativeTabs` + `Icon sf={{default, selected}}` in `app/_layout.tsx`) |
-| SF Symbol icon | `expo-symbols` `SymbolView` |
-| System button | `@expo/ui/swift-ui` `Button` |
-| System toggle | `@expo/ui/swift-ui` `Toggle` |
-| Form / settings list | `@expo/ui/swift-ui` `Form` + `Section` |
-| Liquid Glass surface | `expo-glass-effect` `GlassView` directly |
+**Native iOS** — the easiest path to system-feel UI. Apple handles Liquid Glass, SF Symbols, accessibility, dynamic type:
 
-Never wrap a native component just to add Proto branding. Native > custom.
+- `expo-router/unstable-native-tabs` — native `UITabBar`
+- `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
 
-**2. Proto primitives are fallbacks for what native doesn't ship.** Use `/components/proto` for layout helpers, generic surfaces, themed text — never to rebuild Apple-native UI.
+**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. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
 
-**3. DESIGN.md is the only source of design tokens.** Read it before every change. Never hardcode colour, spacing, radius, or typography. If the designer asks to change tokens, update DESIGN.md.
-
-If DESIGN.md's "Component Library" section names a third-party library (Tamagui, Gluestack, etc.), use that library's components first, Proto primitives as fallback. Otherwise use Proto primitives only.
+**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.
 
 ## File layout
 
 ```
-/app/<route>.tsx       thin re-export of a screen (one-line wrapper)
-/app/_layout.tsx       NativeTabs root layout (when app has tabs)
-/screens/<Name>.tsx    actual screen component (PascalCase, default export)
-/components/shared/    designer-created shared components
-/components/proto/     Proto primitives — read-only, do not edit
+/app/<route>.tsx       route — one-line re-export
+/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
 ```
 
-For a new screen `screens/Settings.tsx`, add a matching `app/settings.tsx`:
-
-```tsx
-import Settings from '../screens/Settings';
-export default function SettingsRoute() { return <Settings />; }
-```
+A new screen `screens/Settings.tsx` needs:
+- `app/settings.tsx` re-exporting it (`import Settings from '../screens/Settings'; export default function SettingsRoute() { return <Settings />; }`)
+- A title set in `app/_layout.tsx`: `<Stack.Screen name="settings" options={{ title: 'Settings' }} />`
+- Route filenames are lowercase kebab-case.
 
-Route filenames are lowercase kebab-case. Then add a one-line description to the Screens section of DESIGN.md.
+## DESIGN.md is alive
 
-## Proto primitives (`/components/proto`)
+When the designer asks to change colors, typography, spacing, shape, accent, or anything design-systemy, update `DESIGN.md` too. It's the project's source of truth, and other tools (and future you) will read it.
 
-```
-Screen    title?, scrollable?        SafeAreaView + ScrollView wrapper
-Stack     gap?, padding?             vertical flex
-Row       gap?, align?               horizontal flex
-Text      size, color, style?        themed RN Text (sizes: title/headline/body/caption/label)
-Card      glass?, padding?           surface; glass={true} = real Liquid Glass on iOS 26+
-Button    label, variant?, onPress   custom animated button — for iOS system style use @expo/ui Button
-Toggle    label, value, onChange     themed RN Switch — for iOS system look use @expo/ui Toggle
-Divider   —                          1px separator
-Modal     title?, visible, ...       RN Modal wrapper
-```
+When you add a new screen, add a one-line entry to `DESIGN.md`'s Screens section.
 
-## When modifying a screen
+## When modifying
 
-Read the file first, then rewrite the full file. Never partial edits or diffs.
+Read the file first, rewrite the full file. Never partial edits.
 
-## Never
+## Avoid
 
-- Never import from `react-native` directly — use a library, native iOS, or Proto fallback
-- Never build a custom tab bar — always `expo-router/unstable-native-tabs`
-- Never put logic in `/app/` files — they re-export a screen, nothing else
-- Never use SF Symbol private-use Unicode codepoints (like `''`) as text — they don't render in plain Text. Use `expo-symbols` `SymbolView` or native components that take SF symbol names
-- Never edit `/components/proto/`, `.proto/`, `app.config.js`, `babel.config.js`, `metro.config.js`
-- Never add a build step, dependency, or visual editor
-- Never tell the designer to open or edit a file manually
+- Custom tab bars — `expo-router/unstable-native-tabs` is strictly better (real Liquid Glass, real SF Symbols, system blur).
+- SF Symbol private-use Unicode codepoints (`''`, `''`) in plain Text — they don't render. Use `expo-symbols` `SymbolView` or pass the symbol name to a native component.
+- Editing `/components/proto/`, `.proto/`, `app.config.js`, `babel.config.js`, `metro.config.js`.
+- Telling the designer to open or edit a file manually. They prompt; you write.

package/template/DESIGN.md

@@ -1,69 +1,34 @@
 # DESIGN.md
 
-> The design system for {{APP_NAME}}. Read by Claude Code before every change.
+> {{APP_NAME}}'s design system. These are starting defaults — change anything by prompting Claude.
+>
+> Examples:
+> - `update DESIGN.md, change accent to indigo`
+> - `double the spacing scale`
+> - `use SF Pro Rounded for headlines`
+> - `add a brand purple to the palette`
+>
 > Last updated: {{DATE}}
 
-## How to update this file
-
-You never edit this file directly. Tell Claude Code in plain language and it rewrites the relevant section. Examples:
-
-- `update DESIGN.md, change accent to indigo and apply it everywhere`
-- `make card corners tighter — radius 16 instead of 22`
-- `switch to dark mode`
-- `use Tamagui as the component library`
-
-The tokens below become the actual colours, typography, and spacing in your screens. Never hardcoded.
-
 ## App
 - Name: {{APP_NAME}}
-- Theme: liquidGlass
-- Platform: iOS 26+ (Liquid Glass renders natively; iOS < 26 falls back to standard blur)
-
-## Component library
-- Package: proto (built-in fallback)
-- Import from: ../components/proto
-- Fallback: proto
-
-For native iOS surfaces (tab bars, SF Symbols, system buttons, toggles, forms, Liquid Glass), Claude reaches for Apple-native components first — see CLAUDE.md.
-
-## Colour
-- Accent: #007AFF
-- Surface primary: rgba(255,255,255,0.72)
-- Surface secondary: rgba(255,255,255,0.48)
-- Surface card: rgba(255,255,255,0.60)
-- Surface nav: rgba(255,255,255,0.82)
-- Text primary: #000000
-- Text secondary: rgba(0,0,0,0.5)
-- Text tertiary: rgba(0,0,0,0.3)
-- Destructive: #FF3B30
-
-## Typography
-- Title: 34px / bold / tracking -0.4
-- Headline: 22px / semibold / tracking -0.4
-- Body: 17px / regular
-- Caption: 12px / regular / text-secondary
-- Label: 13px / medium
+- Platform: iOS
 
-## Spacing
-- xs: 4 / sm: 8 / md: 16 / lg: 24 / xl: 32
+## Tokens
 
-## Shape
-- Card radius: 22
-- Button radius: 14
-- Modal radius: 44
-- Input radius: 12
+### Accent
+#007AFF (iOS system blue)
 
-## Effects
-- Card blur: 20
-- Nav blur: 40
-- Modal blur: 60
-- Border: rgba(255,255,255,0.4)
+### Type
+iOS system font with dynamic type defaults. Override per-size below if you need custom sizing.
 
-## Components in use
+### Spacing
+xs 4 · sm 8 · md 16 · lg 24 · xl 32
 
-**Proto primitives** — Screen, Stack, Row, Text, Card, Button, Toggle, Modal, Divider.
+### Surface
+Apple Liquid Glass via `expo-glass-effect` (iOS 26+ native material). On older iOS it falls back to a plain surface — Proto targets iOS 26.
 
-**Native iOS** — UITabBar (via `expo-router/unstable-native-tabs`), SF Symbols (via `expo-symbols`), SwiftUI primitives (via `@expo/ui/swift-ui`), Liquid Glass surfaces (via `expo-glass-effect`).
+(Add your own tokens below as you describe what you want. Claude rewrites this file as the design system evolves.)
 
 ## Screens
-- Home (initial) — starter screen
+- Home — welcome screen with tutorial prompts

package/template/app/_layout.tsx

@@ -0,0 +1,15 @@
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: 'Proto',
+          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

@@ -2,47 +2,48 @@ import { ScrollView, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import type { ReactNode } from 'react';
 import { useTheme } from './useTheme';
-import { Text } from './Text';
 
 export type ScreenProps = {
-  title?: string;
   scrollable?: boolean;
   children?: ReactNode;
 };
 
-export function Screen({ title, scrollable = true, children }: ScreenProps) {
+/**
+ * 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={['top', 'left', 'right']}>
-        {title ? (
-          <View
-            style={{
-              paddingHorizontal: theme.space.md,
-              paddingBottom: theme.space.xs,
-            }}
-          >
-            <Text size="title">{title}</Text>
-          </View>
-        ) : null}
-        <Body
-          style={{ flex: 1 }}
-          contentContainerStyle={
-            scrollable
-              ? { padding: theme.space.md, gap: theme.space.md }
-              : 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.6",
+    "@sherizan/proto-cli": "^0.1.8",
     "@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);
@@ -35,14 +64,14 @@ export default function Home() {
   }));
 
   return (
-    <Screen title="Proto" scrollable>
-      <Stack gap={24} padding={20}>
+    <Screen scrollable>
+      <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,17 +79,7 @@ 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>