create-proto 0.7.9 → 0.7.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +9 -2
- package/dist/cli.js.map +1 -1
- package/dist/messages.d.ts.map +1 -1
- package/dist/messages.js +2 -2
- package/dist/messages.js.map +1 -1
- package/package.json +3 -3
- package/template/.codex/config.toml +6 -0
- package/template/AGENTS.md +183 -0
- package/template/CLAUDE.md +1 -183
- package/template/README.md +2 -2
- package/template/components/proto/touch-dots.tsx +4 -2
- package/template/screens/Home.tsx +3 -3
package/dist/cli.js
CHANGED
|
@@ -94,7 +94,7 @@ export async function run(argv) {
|
|
|
94
94
|
console.log('\n' + messages.howToRestart(name));
|
|
95
95
|
}
|
|
96
96
|
async function spawnProtoStart(cwd, name) {
|
|
97
|
-
const protoCliBin = resolveProtoCli();
|
|
97
|
+
const protoCliBin = resolveProtoCli(cwd);
|
|
98
98
|
if (!protoCliBin) {
|
|
99
99
|
log.error(messages.protoCliNotFound(name));
|
|
100
100
|
return;
|
|
@@ -111,7 +111,14 @@ async function spawnProtoStart(cwd, name) {
|
|
|
111
111
|
});
|
|
112
112
|
});
|
|
113
113
|
}
|
|
114
|
-
function resolveProtoCli() {
|
|
114
|
+
function resolveProtoCli(projectDir) {
|
|
115
|
+
// The project's OWN install first — deps were installed moments ago, so this
|
|
116
|
+
// is always the version the scaffold pins. Resolving from create-proto's own
|
|
117
|
+
// install instead once chained a stale npx-cached proto-cli (0.7.1 satisfied
|
|
118
|
+
// "^0.7.0", so npm never refreshed it) into a brand-new project.
|
|
119
|
+
const local = path.join(projectDir, 'node_modules', '@sherizan', 'proto-cli', 'dist', 'index.js');
|
|
120
|
+
if (fs.existsSync(local))
|
|
121
|
+
return local;
|
|
115
122
|
// Workspace + post-publish: pnpm symlinks @sherizan/proto-cli at top-level node_modules
|
|
116
123
|
try {
|
|
117
124
|
const req = createRequire(import.meta.url);
|
package/dist/cli.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
|
package/dist/messages.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;sBAED,MAAM,YAAY,MAAM;yBAErB,MAAM;yBACN,MAAM;8BAED,MAAM;;6BAGP,MAAM;;sBAGb,MAAM;6BAEC,MAAM;yBAEV,MAAM;;;;;
|
|
1
|
+
{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../src/messages.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;sBAED,MAAM,YAAY,MAAM;yBAErB,MAAM;yBACN,MAAM;8BAED,MAAM;;6BAGP,MAAM;;sBAGb,MAAM;6BAEC,MAAM;yBAEV,MAAM;;;;;CAM5B,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC"}
|
package/dist/messages.js
CHANGED
|
@@ -7,9 +7,9 @@ export const messages = {
|
|
|
7
7
|
cancelled: 'Cancelled. Folder removed.',
|
|
8
8
|
usingDefaultName: (name) => `Using name: ${name} (pass a name as the first argument to override).`,
|
|
9
9
|
bootingProto: 'Booting Prototo...',
|
|
10
|
-
nextSteps: (name) => `Keep this terminal running. It auto-refreshes your prototype.\n\nOpen a new terminal and
|
|
10
|
+
nextSteps: (name) => `Keep this terminal running. It auto-refreshes your prototype.\n\nOpen a new terminal and start your coding agent:\n cd ${name} && claude (or: codex)\n\nIn Claude, press Shift+Tab to switch to Auto mode.`,
|
|
11
11
|
protoCliNotFound: (name) => `Couldn't find proto-cli. Run manually: cd ${name} && npx proto start`,
|
|
12
|
-
howToRestart: (name) => `Proto stopped.\nTo restart Proto: cd ${name} && npx proto start\nTo share a link: cd ${name} && npx proto share\nTo prompt
|
|
12
|
+
howToRestart: (name) => `Proto stopped.\nTo restart Proto: cd ${name} && npx proto start\nTo share a link: cd ${name} && npx proto share\nTo prompt your agent: cd ${name} && claude (or codex)`,
|
|
13
13
|
noNetwork: "Couldn't reach the package registry. Check your internet and try again.",
|
|
14
14
|
noPermission: "Don't have permission to write here. Try a different folder.",
|
|
15
15
|
noSpace: 'Out of disk space. Free some up and try again.',
|
package/dist/messages.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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,2HAA2H,IAAI,gFAAgF;IACjN,gBAAgB,EAAE,CAAC,IAAY,EAAE,EAAE,CACjC,6CAA6C,IAAI,qBAAqB;IACxE,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,CAC7B,wCAAwC,IAAI,4CAA4C,IAAI,iDAAiD,IAAI,uBAAuB;IAC1K,SAAS,EAAE,yEAAyE;IACpF,YAAY,EAAE,8DAA8D;IAC5E,OAAO,EAAE,gDAAgD;IACzD,aAAa,EAAE,mEAAmE;CACnF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-proto",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.11",
|
|
4
4
|
"description": "Scaffold a new Proto prototype: `npm create proto@latest myapp`. Describe a screen, watch your prototype run natively on iPhone — designer-first, paired with Claude Code.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@clack/prompts": "^0.7.0",
|
|
45
|
-
"@sherizan/proto-cli": "^0.7.0",
|
|
46
45
|
"fs-extra": "^11.2.0",
|
|
47
46
|
"qrcode-terminal": "^0.12.0",
|
|
48
|
-
"validate-npm-package-name": "^5.0.1"
|
|
47
|
+
"validate-npm-package-name": "^5.0.1",
|
|
48
|
+
"@sherizan/proto-cli": "^0.7.16"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@types/fs-extra": "^11.0.4",
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
# Prototo: connects Codex to this project's MCP tools (compile_check,
|
|
2
|
+
# get_metro_errors, get_simulator_screenshot, reload_app). Codex loads this
|
|
3
|
+
# once you trust the project. Claude Code uses .mcp.json for the same server.
|
|
4
|
+
[mcp_servers.prototo]
|
|
5
|
+
command = "npx"
|
|
6
|
+
args = ["proto-mcp"]
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
# Prototo Project — Agent Instructions
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Read first
|
|
6
|
+
- `DESIGN.md` — design tokens and the project's decisions
|
|
7
|
+
- `/screens/` — what already exists
|
|
8
|
+
|
|
9
|
+
## Building blocks (use whatever fits)
|
|
10
|
+
|
|
11
|
+
**Native iOS** — the easiest path to system-feel UI. Apple handles Liquid Glass, SF Symbols, accessibility, dynamic type:
|
|
12
|
+
|
|
13
|
+
- `expo-router/unstable-native-tabs` — native `UITabBar`
|
|
14
|
+
- `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.
|
|
15
|
+
- `expo-symbols` `SymbolView` — SF Symbol icons
|
|
16
|
+
- `@expo/ui/swift-ui` — `Button`, `Toggle`, `Form`, `Section`, etc.
|
|
17
|
+
- `expo-glass-effect` `GlassView` — Liquid Glass surfaces
|
|
18
|
+
|
|
19
|
+
**Prototo primitives** in `/components/proto` — small set of themed fallbacks. Props cheat sheet (source is read-only; only read a file if something here doesn't match):
|
|
20
|
+
|
|
21
|
+
| Primitive | Props |
|
|
22
|
+
|---|---|
|
|
23
|
+
| `Screen` | `scrollable?: boolean` (default true) |
|
|
24
|
+
| `Stack` | `gap?`, `padding?`, `align?: 'start'\|'center'\|'end'` (unset = full-width stretch), `style?` |
|
|
25
|
+
| `Row` | `gap?`, `align?: 'start'\|'center'\|'end'` (default 'start'), `style?` |
|
|
26
|
+
| `Text` | `size?: 'title'\|'headline'\|'body'\|'caption'\|'label'`, `color?: 'primary'\|'secondary'\|'accent'\|'destructive'`, `style?` |
|
|
27
|
+
| `Card` | `glass?: boolean`, `padding?: number` |
|
|
28
|
+
| `Button` | `label: string`, `variant?: 'primary'\|'secondary'\|'ghost'\|'destructive'`, `onPress?`, `disabled?`, `icon?`, `style?`, `textStyle?` |
|
|
29
|
+
| `Toggle` | `label: string`, `value: boolean`, `onChange?(value)` |
|
|
30
|
+
| `Slider` | `value: number`, `onChange?`, `min?`, `max?`, `step?`, `label?` |
|
|
31
|
+
| `Stepper` | `label: string`, `value: number`, `onChange(value)`, `min?`, `max?`, `step?` |
|
|
32
|
+
| `Divider` | `label?: string` |
|
|
33
|
+
| `Input` | React Native `TextInputProps` passthrough |
|
|
34
|
+
| `Modal` | `title: string`, `visible: boolean`, `onClose?` |
|
|
35
|
+
| `Lottie` | `source`, `autoPlay?`, `loop?`, `style?` |
|
|
36
|
+
`Toggle`, `Slider`, and `Stepper` render real native SwiftUI (`@expo/ui`) on iOS, tinted with the app accent. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
|
|
37
|
+
|
|
38
|
+
**Prototo motion + graphics** — four subpath modules in `/components/proto` cover animation and drawing. Pick by what the prompt actually asks for:
|
|
39
|
+
|
|
40
|
+
- `../components/proto/motion` — `Motion.View` + `Motion.Pressable`. **Default for transitions.** Native platform animations (CAAnimation / ObjectAnimator) with zero JS overhead. Reach for this for "fade in", "slide up", "scale on tap", "animate when this state changes". Driven by `react-native-ease`.
|
|
41
|
+
- `../components/proto/gestures` — `AnimatedView`, `useSharedValue`, `useAnimatedStyle`, `withSpring`, `Gesture`, `GestureDetector`, etc. Use **only** when the animation must read gesture state, scroll position, or interpolate continuously: "drag this card", "swipe to delete", "parallax this header". Driven by `react-native-reanimated` + `react-native-gesture-handler`.
|
|
42
|
+
- `../components/proto/lottie` — `Lottie` component. Plays `.json` files dropped into `/assets/lottie/`. The designer brings the animation file (LottieFiles / After Effects export); you wire it: `<Lottie source={require('../assets/lottie/<name>.json')} />`. Defaults to `autoPlay` and `loop`. Driven by `lottie-react-native`.
|
|
43
|
+
- `../components/proto/canvas` — `Canvas`, `Path`, `Circle`, `Rect`, `LinearGradient`, etc. For custom drawing that doesn't fit RN's box model: confetti bursts, custom charts, badge shapes. Driven by `@shopify/react-native-skia`.
|
|
44
|
+
- `../components/proto/svg` — `Svg`, `Path`, `Circle`, `Rect`, `G`, `LinearGradient`, etc. For vector icons, logos, and illustrations. You can also import an SVG file directly: `import Logo from '../assets/logo.svg'` then `<Logo width={120} height={40} />`. Driven by `react-native-svg`. Use this for static vector art; reach for `canvas` only when you need to animate or compute the drawing.
|
|
45
|
+
|
|
46
|
+
Never import `react-native-ease`, `react-native-reanimated`, `lottie-react-native`, `@shopify/react-native-skia`, or `react-native-svg` directly in a screen — always route through the `../components/proto/<subpath>` module above. If `motion` can't express what's needed, fall back to `gestures`.
|
|
47
|
+
|
|
48
|
+
**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.
|
|
49
|
+
|
|
50
|
+
## Adding a library
|
|
51
|
+
|
|
52
|
+
To add any npm package (a font, an icon set, a utility), run `npx proto add <package>` — never `npm install` / `pnpm add` directly (and `proto` alone isn't on PATH — always `npx proto`). `proto add` installs through `expo install`, which picks the version that matches this project and resolves dependencies cleanly, so the project doesn't break. If the package needs native code this Prototo doesn't bundle, `proto add` will say so — that feature won't appear on the device until the Proto team ships an updated Prototo.
|
|
53
|
+
|
|
54
|
+
## File layout
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
/app/<route>.tsx route — one-line re-export
|
|
58
|
+
/app/_layout.tsx Stack (for native large titles) or NativeTabs (for tabs)
|
|
59
|
+
/screens/<Name>.tsx screen, PascalCase, default export
|
|
60
|
+
/components/shared/ designer-created custom components
|
|
61
|
+
/components/proto/ Prototo primitives — read-only
|
|
62
|
+
/assets/lottie/ designer-supplied Lottie JSON files (loaded by the Lottie component)
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
A new screen `screens/Settings.tsx` needs:
|
|
66
|
+
- `app/settings.tsx` re-exporting it (`import Settings from '../screens/Settings'; export default function SettingsRoute() { return <Settings />; }`)
|
|
67
|
+
- A title set in `app/_layout.tsx`: `<Stack.Screen name="settings" options={{ title: 'Settings' }} />`
|
|
68
|
+
|
|
69
|
+
**Tabs (NativeTabs)** — exact shape for this project's pinned `expo-router` (the flat `Icon`/`Label` imports you may know do NOT exist here; they're nested under `Trigger`):
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { NativeTabs } from 'expo-router/unstable-native-tabs';
|
|
73
|
+
|
|
74
|
+
export default function Layout() {
|
|
75
|
+
return (
|
|
76
|
+
<NativeTabs>
|
|
77
|
+
<NativeTabs.Trigger name="index">
|
|
78
|
+
<NativeTabs.Trigger.Icon sf="house.fill" />
|
|
79
|
+
<NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
|
|
80
|
+
</NativeTabs.Trigger>
|
|
81
|
+
<NativeTabs.Trigger name="profile">
|
|
82
|
+
<NativeTabs.Trigger.Icon sf="person.fill" />
|
|
83
|
+
<NativeTabs.Trigger.Label>Profile</NativeTabs.Trigger.Label>
|
|
84
|
+
</NativeTabs.Trigger>
|
|
85
|
+
</NativeTabs>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
**Root-layout changes need a cold restart.** Swapping the navigator in `app/_layout.tsx` (Stack ↔ NativeTabs) does NOT apply via Fast Refresh, and the stale UI in a screenshot can look plausible. After editing `_layout.tsx`, call the `reload_app` MCP tool, then screenshot.
|
|
91
|
+
- Route filenames are lowercase kebab-case.
|
|
92
|
+
|
|
93
|
+
## DESIGN.md is alive
|
|
94
|
+
|
|
95
|
+
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.
|
|
96
|
+
|
|
97
|
+
When you add a new screen, add a one-line entry to `DESIGN.md`'s Screens section.
|
|
98
|
+
|
|
99
|
+
## One palette, one place
|
|
100
|
+
|
|
101
|
+
The theme colors live in `DESIGN.md` and the proto tokens — read them with `useTheme()` from `../components/proto`. When a design needs custom brand colors, fonts, or constants beyond the theme (e.g. a specific gradient or accent set), define them **once** in a single shared module (`/components/shared/theme.ts`) and import it everywhere that needs them. Never paste the same color/font constants inline into more than one screen — duplicated palettes drift out of sync. If you find a palette already inlined in a screen, lift it into the shared module and import it back.
|
|
102
|
+
|
|
103
|
+
## Light, dark, and accessibility
|
|
104
|
+
|
|
105
|
+
- **Dark mode is automatic.** `useTheme()` returns the right palette for the device's light or dark setting and re-renders when it flips. So use theme colors (`theme.surface.*`, `theme.text.*`, `theme.border.*`) instead of hardcoded hex/rgba, and the screen adapts for free. Custom brand colors in the shared theme module won't auto-adapt — if a design needs a dark variant of a brand color, define both and pick with the same light/dark signal. To pin a scheme for a prototype, set `colorScheme: 'light' | 'dark'` in `proto.config.js`.
|
|
106
|
+
- **Text already scales** with the device's text-size setting (iOS Dynamic Type). Don't disable it. Lay out so text can grow a couple of steps without clipping — avoid fixed heights on text containers.
|
|
107
|
+
- **Accessibility floors** live in `a11y` from `../components/proto`: tap targets ≥ `a11y.minTapTarget` (44pt), text contrast ≥ `a11y.minTextContrast`. After visual changes, the `proto shot` check (below) is where you confirm contrast holds — in both light and dark.
|
|
108
|
+
|
|
109
|
+
## Check your work visually
|
|
110
|
+
|
|
111
|
+
You can't see the Simulator by default, so after any visual change, look at it:
|
|
112
|
+
|
|
113
|
+
1. Run `proto shot` — it captures the running Simulator to `.proto/last-shot.png`.
|
|
114
|
+
2. Read that image and inspect it for real defects: overlapping elements, low contrast / unreadable text, clipping, cramped or uneven spacing, off-center layout, wrong colors.
|
|
115
|
+
3. If something's off, fix it and capture again. Iterate until it looks right — don't make the designer be your QA.
|
|
116
|
+
|
|
117
|
+
Do this especially after layout, color, typography, or spacing changes. If `proto shot` reports no preview is running, the designer needs to run `proto start` first.
|
|
118
|
+
|
|
119
|
+
## Proto MCP tools
|
|
120
|
+
|
|
121
|
+
When the designer runs `proto start`, a local MCP server (`prototo`) connects automatically — no setup. It gives you four tools that close the feedback loop, so you can see what you built instead of asking the designer to relay it. (Under Codex, the tools appear once the designer trusts the project — Codex asks on first open. If the prototo tools are missing, say so and ask the designer to relaunch Codex and trust the project; meanwhile `proto shot` still works.)
|
|
122
|
+
|
|
123
|
+
**At the start of any fix session** (the designer says something is broken, red, or not working):
|
|
124
|
+
|
|
125
|
+
1. Call `get_metro_errors` first — it returns the current build failures and runtime crashes from the running prototype, with the raw error text and the screen involved. Don't ask the designer to paste or describe an error before checking it.
|
|
126
|
+
|
|
127
|
+
**After every screen write:**
|
|
128
|
+
|
|
129
|
+
1. Call `compile_check` with the screen name — it type-checks the project and reports any problems in plain language. Fix anything it surfaces before moving on.
|
|
130
|
+
2. Call `get_simulator_screenshot` — it returns what the prototype actually renders right now. Inspect it for the same defects as above.
|
|
131
|
+
|
|
132
|
+
**After editing `app/_layout.tsx` or any navigator:** call `reload_app` — root-layout changes don't Fast-Refresh, and a stale screenshot looks plausible.
|
|
133
|
+
|
|
134
|
+
Never assume a screen rendered correctly — check the screenshot. Never ask the designer to describe an error you can catch with `get_metro_errors` or `compile_check`. If a tool says the Simulator isn't running (or Metro reports clean while the designer still sees an error), the designer needs to run `proto start` first.
|
|
135
|
+
|
|
136
|
+
(`get_simulator_screenshot` is the automated form of the `proto shot` loop above — prefer the tool when it's available.)
|
|
137
|
+
|
|
138
|
+
## Mock vs real data
|
|
139
|
+
|
|
140
|
+
When a screen shows placeholder numbers that aren't yet wired to a real source, wrap them in `mock()` from `../components/proto` — `const conditions = mock({ wave: '0.8m' })`. It returns the value unchanged, so nothing breaks; it just makes stubbed data obvious and greppable so fake numbers never ship believing they're real. When you wire the value to a live source (a `fetch`), drop the `mock()` wrapper. (Don't use code comments to mark mock data — generated screens stay comment-free.)
|
|
141
|
+
|
|
142
|
+
### Making it real
|
|
143
|
+
|
|
144
|
+
When the designer says "use real data", follow this shape so every screen handles loading and failure the same way:
|
|
145
|
+
|
|
146
|
+
1. Keep the `mock()` value as the **starting state** — it's what shows before the fetch resolves and if the network fails. Drop the `mock()` wrapper from the live value once wired.
|
|
147
|
+
2. Fetch in an effect, guarding against the screen unmounting:
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
const [data, setData] = useState(FALLBACK);
|
|
151
|
+
const [loading, setLoading] = useState(true);
|
|
152
|
+
useEffect(() => {
|
|
153
|
+
let alive = true;
|
|
154
|
+
fetch(URL)
|
|
155
|
+
.then((r) => r.json())
|
|
156
|
+
.then((json) => { if (alive) setData(shape(json)); })
|
|
157
|
+
.catch(() => {})
|
|
158
|
+
.finally(() => { if (alive) setLoading(false); });
|
|
159
|
+
return () => { alive = false; };
|
|
160
|
+
}, []);
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
3. While `loading`, show a skeleton or the fallback — never a blank screen. On error, keep the fallback (the `.catch` above already does this); don't surface a raw error to the designer.
|
|
164
|
+
4. Put fetch + shaping logic in `/components/shared/<name>Data.ts`, not inline in the screen.
|
|
165
|
+
|
|
166
|
+
**Keyless APIs** (no key, CORS-open, good for prototypes): Open-Meteo (weather/marine/air), REST Countries, Open Library, PokéAPI, Art Institute of Chicago, TheMealDB, Wikipedia REST. Prefer these so "make it real" stays a one-prompt step. If a source needs a key, tell the designer that key goes in `proto.config.js`, nowhere else.
|
|
167
|
+
|
|
168
|
+
## Sharing your prototype
|
|
169
|
+
|
|
170
|
+
Run `proto share` to publish the prototype and get a permanent `prototo.app/p/<token>` link. Recipients open it on iPhone with the free **Prototo** app (the link page walks them through installing it) and the prototype runs **natively on their device** — real gestures, haptics, and Liquid Glass, with `motion`/`gestures`/`canvas`/`svg`/`lottie`, live data, and custom logic exactly as they run on the designer's Simulator. There's nothing to dumb down — build whatever the designer asks for and it all shares.
|
|
171
|
+
|
|
172
|
+
Two limits worth knowing: the prototype must be built on the **current Prototo** (opening an older share tells the recipient to ask the designer to publish it again — re-scaffold if prompted), and it can only use native modules Prototo bundles — `npx proto add` tells you when a package needs native code that isn't available.
|
|
173
|
+
|
|
174
|
+
## When modifying
|
|
175
|
+
|
|
176
|
+
Read the file first, then make precise, targeted edits to the parts that change. Keep edits scoped — don't rewrite a whole file when a few lines change.
|
|
177
|
+
|
|
178
|
+
## Avoid
|
|
179
|
+
|
|
180
|
+
- Custom tab bars — `expo-router/unstable-native-tabs` is strictly better (real Liquid Glass, real SF Symbols, system blur).
|
|
181
|
+
- 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.
|
|
182
|
+
- Editing `/components/proto/`, `.proto/`, `app.config.js`, `babel.config.js`, `metro.config.js`.
|
|
183
|
+
- Telling the designer to open or edit a file manually. They prompt; you write.
|
package/template/CLAUDE.md
CHANGED
|
@@ -1,183 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
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.
|
|
4
|
-
|
|
5
|
-
## Read first
|
|
6
|
-
- `DESIGN.md` — design tokens and the project's decisions
|
|
7
|
-
- `/screens/` — what already exists
|
|
8
|
-
|
|
9
|
-
## Building blocks (use whatever fits)
|
|
10
|
-
|
|
11
|
-
**Native iOS** — the easiest path to system-feel UI. Apple handles Liquid Glass, SF Symbols, accessibility, dynamic type:
|
|
12
|
-
|
|
13
|
-
- `expo-router/unstable-native-tabs` — native `UITabBar`
|
|
14
|
-
- `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.
|
|
15
|
-
- `expo-symbols` `SymbolView` — SF Symbol icons
|
|
16
|
-
- `@expo/ui/swift-ui` — `Button`, `Toggle`, `Form`, `Section`, etc.
|
|
17
|
-
- `expo-glass-effect` `GlassView` — Liquid Glass surfaces
|
|
18
|
-
|
|
19
|
-
**Prototo primitives** in `/components/proto` — small set of themed fallbacks. Props cheat sheet (source is read-only; only read a file if something here doesn't match):
|
|
20
|
-
|
|
21
|
-
| Primitive | Props |
|
|
22
|
-
|---|---|
|
|
23
|
-
| `Screen` | `scrollable?: boolean` (default true) |
|
|
24
|
-
| `Stack` | `gap?`, `padding?`, `align?: 'start'\|'center'\|'end'` (unset = full-width stretch), `style?` |
|
|
25
|
-
| `Row` | `gap?`, `align?: 'start'\|'center'\|'end'` (default 'start'), `style?` |
|
|
26
|
-
| `Text` | `size?: 'title'\|'headline'\|'body'\|'caption'\|'label'`, `color?: 'primary'\|'secondary'\|'accent'\|'destructive'`, `style?` |
|
|
27
|
-
| `Card` | `glass?: boolean`, `padding?: number` |
|
|
28
|
-
| `Button` | `label: string`, `variant?: 'primary'\|'secondary'\|'ghost'\|'destructive'`, `onPress?`, `disabled?`, `icon?`, `style?`, `textStyle?` |
|
|
29
|
-
| `Toggle` | `label: string`, `value: boolean`, `onChange?(value)` |
|
|
30
|
-
| `Slider` | `value: number`, `onChange?`, `min?`, `max?`, `step?`, `label?` |
|
|
31
|
-
| `Stepper` | `label: string`, `value: number`, `onChange(value)`, `min?`, `max?`, `step?` |
|
|
32
|
-
| `Divider` | `label?: string` |
|
|
33
|
-
| `Input` | React Native `TextInputProps` passthrough |
|
|
34
|
-
| `Modal` | `title: string`, `visible: boolean`, `onClose?` |
|
|
35
|
-
| `Lottie` | `source`, `autoPlay?`, `loop?`, `style?` |
|
|
36
|
-
`Toggle`, `Slider`, and `Stepper` render real native SwiftUI (`@expo/ui`) on iOS, tinted with the app accent. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
|
|
37
|
-
|
|
38
|
-
**Prototo motion + graphics** — four subpath modules in `/components/proto` cover animation and drawing. Pick by what the prompt actually asks for:
|
|
39
|
-
|
|
40
|
-
- `../components/proto/motion` — `Motion.View` + `Motion.Pressable`. **Default for transitions.** Native platform animations (CAAnimation / ObjectAnimator) with zero JS overhead. Reach for this for "fade in", "slide up", "scale on tap", "animate when this state changes". Driven by `react-native-ease`.
|
|
41
|
-
- `../components/proto/gestures` — `AnimatedView`, `useSharedValue`, `useAnimatedStyle`, `withSpring`, `Gesture`, `GestureDetector`, etc. Use **only** when the animation must read gesture state, scroll position, or interpolate continuously: "drag this card", "swipe to delete", "parallax this header". Driven by `react-native-reanimated` + `react-native-gesture-handler`.
|
|
42
|
-
- `../components/proto/lottie` — `Lottie` component. Plays `.json` files dropped into `/assets/lottie/`. The designer brings the animation file (LottieFiles / After Effects export); you wire it: `<Lottie source={require('../assets/lottie/<name>.json')} />`. Defaults to `autoPlay` and `loop`. Driven by `lottie-react-native`.
|
|
43
|
-
- `../components/proto/canvas` — `Canvas`, `Path`, `Circle`, `Rect`, `LinearGradient`, etc. For custom drawing that doesn't fit RN's box model: confetti bursts, custom charts, badge shapes. Driven by `@shopify/react-native-skia`.
|
|
44
|
-
- `../components/proto/svg` — `Svg`, `Path`, `Circle`, `Rect`, `G`, `LinearGradient`, etc. For vector icons, logos, and illustrations. You can also import an SVG file directly: `import Logo from '../assets/logo.svg'` then `<Logo width={120} height={40} />`. Driven by `react-native-svg`. Use this for static vector art; reach for `canvas` only when you need to animate or compute the drawing.
|
|
45
|
-
|
|
46
|
-
Never import `react-native-ease`, `react-native-reanimated`, `lottie-react-native`, `@shopify/react-native-skia`, or `react-native-svg` directly in a screen — always route through the `../components/proto/<subpath>` module above. If `motion` can't express what's needed, fall back to `gestures`.
|
|
47
|
-
|
|
48
|
-
**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.
|
|
49
|
-
|
|
50
|
-
## Adding a library
|
|
51
|
-
|
|
52
|
-
To add any npm package (a font, an icon set, a utility), run `npx proto add <package>` — never `npm install` / `pnpm add` directly (and `proto` alone isn't on PATH — always `npx proto`). `proto add` installs through `expo install`, which picks the version that matches this project and resolves dependencies cleanly, so the project doesn't break. If the package needs native code this Prototo doesn't bundle, `proto add` will say so — that feature won't appear on the device until the Proto team ships an updated Prototo.
|
|
53
|
-
|
|
54
|
-
## File layout
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
/app/<route>.tsx route — one-line re-export
|
|
58
|
-
/app/_layout.tsx Stack (for native large titles) or NativeTabs (for tabs)
|
|
59
|
-
/screens/<Name>.tsx screen, PascalCase, default export
|
|
60
|
-
/components/shared/ designer-created custom components
|
|
61
|
-
/components/proto/ Prototo primitives — read-only
|
|
62
|
-
/assets/lottie/ designer-supplied Lottie JSON files (loaded by the Lottie component)
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
A new screen `screens/Settings.tsx` needs:
|
|
66
|
-
- `app/settings.tsx` re-exporting it (`import Settings from '../screens/Settings'; export default function SettingsRoute() { return <Settings />; }`)
|
|
67
|
-
- A title set in `app/_layout.tsx`: `<Stack.Screen name="settings" options={{ title: 'Settings' }} />`
|
|
68
|
-
|
|
69
|
-
**Tabs (NativeTabs)** — exact shape for this project's pinned `expo-router` (the flat `Icon`/`Label` imports you may know do NOT exist here; they're nested under `Trigger`):
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
import { NativeTabs } from 'expo-router/unstable-native-tabs';
|
|
73
|
-
|
|
74
|
-
export default function Layout() {
|
|
75
|
-
return (
|
|
76
|
-
<NativeTabs>
|
|
77
|
-
<NativeTabs.Trigger name="index">
|
|
78
|
-
<NativeTabs.Trigger.Icon sf="house.fill" />
|
|
79
|
-
<NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
|
|
80
|
-
</NativeTabs.Trigger>
|
|
81
|
-
<NativeTabs.Trigger name="profile">
|
|
82
|
-
<NativeTabs.Trigger.Icon sf="person.fill" />
|
|
83
|
-
<NativeTabs.Trigger.Label>Profile</NativeTabs.Trigger.Label>
|
|
84
|
-
</NativeTabs.Trigger>
|
|
85
|
-
</NativeTabs>
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
**Root-layout changes need a cold restart.** Swapping the navigator in `app/_layout.tsx` (Stack ↔ NativeTabs) does NOT apply via Fast Refresh, and the stale UI in a screenshot can look plausible. After editing `_layout.tsx`, call the `reload_app` MCP tool, then screenshot.
|
|
91
|
-
- Route filenames are lowercase kebab-case.
|
|
92
|
-
|
|
93
|
-
## DESIGN.md is alive
|
|
94
|
-
|
|
95
|
-
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.
|
|
96
|
-
|
|
97
|
-
When you add a new screen, add a one-line entry to `DESIGN.md`'s Screens section.
|
|
98
|
-
|
|
99
|
-
## One palette, one place
|
|
100
|
-
|
|
101
|
-
The theme colors live in `DESIGN.md` and the proto tokens — read them with `useTheme()` from `../components/proto`. When a design needs custom brand colors, fonts, or constants beyond the theme (e.g. a specific gradient or accent set), define them **once** in a single shared module (`/components/shared/theme.ts`) and import it everywhere that needs them. Never paste the same color/font constants inline into more than one screen — duplicated palettes drift out of sync. If you find a palette already inlined in a screen, lift it into the shared module and import it back.
|
|
102
|
-
|
|
103
|
-
## Light, dark, and accessibility
|
|
104
|
-
|
|
105
|
-
- **Dark mode is automatic.** `useTheme()` returns the right palette for the device's light or dark setting and re-renders when it flips. So use theme colors (`theme.surface.*`, `theme.text.*`, `theme.border.*`) instead of hardcoded hex/rgba, and the screen adapts for free. Custom brand colors in the shared theme module won't auto-adapt — if a design needs a dark variant of a brand color, define both and pick with the same light/dark signal. To pin a scheme for a prototype, set `colorScheme: 'light' | 'dark'` in `proto.config.js`.
|
|
106
|
-
- **Text already scales** with the device's text-size setting (iOS Dynamic Type). Don't disable it. Lay out so text can grow a couple of steps without clipping — avoid fixed heights on text containers.
|
|
107
|
-
- **Accessibility floors** live in `a11y` from `../components/proto`: tap targets ≥ `a11y.minTapTarget` (44pt), text contrast ≥ `a11y.minTextContrast`. After visual changes, the `proto shot` check (below) is where you confirm contrast holds — in both light and dark.
|
|
108
|
-
|
|
109
|
-
## Check your work visually
|
|
110
|
-
|
|
111
|
-
You can't see the Simulator by default, so after any visual change, look at it:
|
|
112
|
-
|
|
113
|
-
1. Run `proto shot` — it captures the running Simulator to `.proto/last-shot.png`.
|
|
114
|
-
2. Read that image and inspect it for real defects: overlapping elements, low contrast / unreadable text, clipping, cramped or uneven spacing, off-center layout, wrong colors.
|
|
115
|
-
3. If something's off, fix it and capture again. Iterate until it looks right — don't make the designer be your QA.
|
|
116
|
-
|
|
117
|
-
Do this especially after layout, color, typography, or spacing changes. If `proto shot` reports no preview is running, the designer needs to run `proto start` first.
|
|
118
|
-
|
|
119
|
-
## Proto MCP tools
|
|
120
|
-
|
|
121
|
-
When the designer runs `proto start`, a local MCP server (`prototo`) connects automatically — no setup. It gives you four tools that close the feedback loop, so you can see what you built instead of asking the designer to relay it.
|
|
122
|
-
|
|
123
|
-
**At the start of any fix session** (the designer says something is broken, red, or not working):
|
|
124
|
-
|
|
125
|
-
1. Call `get_metro_errors` first — it returns the current build failures and runtime crashes from the running prototype, with the raw error text and the screen involved. Don't ask the designer to paste or describe an error before checking it.
|
|
126
|
-
|
|
127
|
-
**After every screen write:**
|
|
128
|
-
|
|
129
|
-
1. Call `compile_check` with the screen name — it type-checks the project and reports any problems in plain language. Fix anything it surfaces before moving on.
|
|
130
|
-
2. Call `get_simulator_screenshot` — it returns what the prototype actually renders right now. Inspect it for the same defects as above.
|
|
131
|
-
|
|
132
|
-
**After editing `app/_layout.tsx` or any navigator:** call `reload_app` — root-layout changes don't Fast-Refresh, and a stale screenshot looks plausible.
|
|
133
|
-
|
|
134
|
-
Never assume a screen rendered correctly — check the screenshot. Never ask the designer to describe an error you can catch with `get_metro_errors` or `compile_check`. If a tool says the Simulator isn't running (or Metro reports clean while the designer still sees an error), the designer needs to run `proto start` first.
|
|
135
|
-
|
|
136
|
-
(`get_simulator_screenshot` is the automated form of the `proto shot` loop above — prefer the tool when it's available.)
|
|
137
|
-
|
|
138
|
-
## Mock vs real data
|
|
139
|
-
|
|
140
|
-
When a screen shows placeholder numbers that aren't yet wired to a real source, wrap them in `mock()` from `../components/proto` — `const conditions = mock({ wave: '0.8m' })`. It returns the value unchanged, so nothing breaks; it just makes stubbed data obvious and greppable so fake numbers never ship believing they're real. When you wire the value to a live source (a `fetch`), drop the `mock()` wrapper. (Don't use code comments to mark mock data — generated screens stay comment-free.)
|
|
141
|
-
|
|
142
|
-
### Making it real
|
|
143
|
-
|
|
144
|
-
When the designer says "use real data", follow this shape so every screen handles loading and failure the same way:
|
|
145
|
-
|
|
146
|
-
1. Keep the `mock()` value as the **starting state** — it's what shows before the fetch resolves and if the network fails. Drop the `mock()` wrapper from the live value once wired.
|
|
147
|
-
2. Fetch in an effect, guarding against the screen unmounting:
|
|
148
|
-
|
|
149
|
-
```tsx
|
|
150
|
-
const [data, setData] = useState(FALLBACK);
|
|
151
|
-
const [loading, setLoading] = useState(true);
|
|
152
|
-
useEffect(() => {
|
|
153
|
-
let alive = true;
|
|
154
|
-
fetch(URL)
|
|
155
|
-
.then((r) => r.json())
|
|
156
|
-
.then((json) => { if (alive) setData(shape(json)); })
|
|
157
|
-
.catch(() => {})
|
|
158
|
-
.finally(() => { if (alive) setLoading(false); });
|
|
159
|
-
return () => { alive = false; };
|
|
160
|
-
}, []);
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
3. While `loading`, show a skeleton or the fallback — never a blank screen. On error, keep the fallback (the `.catch` above already does this); don't surface a raw error to the designer.
|
|
164
|
-
4. Put fetch + shaping logic in `/components/shared/<name>Data.ts`, not inline in the screen.
|
|
165
|
-
|
|
166
|
-
**Keyless APIs** (no key, CORS-open, good for prototypes): Open-Meteo (weather/marine/air), REST Countries, Open Library, PokéAPI, Art Institute of Chicago, TheMealDB, Wikipedia REST. Prefer these so "make it real" stays a one-prompt step. If a source needs a key, tell the designer that key goes in `proto.config.js`, nowhere else.
|
|
167
|
-
|
|
168
|
-
## Sharing your prototype
|
|
169
|
-
|
|
170
|
-
Run `proto share` to publish the prototype and get a `prototo.app/p/<token>` link. Anyone can open it in a browser — no install — and see the **real prototype running**, streamed live from a cloud iPhone. Full fidelity: gestures, `motion`/`gestures`/`canvas`/`svg`/`lottie`, live data, and custom logic all show up in the shared link exactly as they run on the designer's device. There's nothing to dumb down — build whatever the designer asks for and it all shares.
|
|
171
|
-
|
|
172
|
-
Two limits worth knowing: the prototype must be built on the **current Prototo** (an older one won't stream — re-scaffold if prompted), and **real-hardware features** (camera, GPS) are simulated on the cloud device rather than reading a real sensor.
|
|
173
|
-
|
|
174
|
-
## When modifying
|
|
175
|
-
|
|
176
|
-
Read the file first, then make precise, targeted edits to the parts that change. Keep edits scoped — don't rewrite a whole file when a few lines change.
|
|
177
|
-
|
|
178
|
-
## Avoid
|
|
179
|
-
|
|
180
|
-
- Custom tab bars — `expo-router/unstable-native-tabs` is strictly better (real Liquid Glass, real SF Symbols, system blur).
|
|
181
|
-
- 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.
|
|
182
|
-
- Editing `/components/proto/`, `.proto/`, `app.config.js`, `babel.config.js`, `metro.config.js`.
|
|
183
|
-
- Telling the designer to open or edit a file manually. They prompt; you write.
|
|
1
|
+
@AGENTS.md
|
package/template/README.md
CHANGED
|
@@ -5,5 +5,5 @@ Built with Prototo.
|
|
|
5
5
|
Before running `proto start` on iPhone, install Prototo from the App Store.
|
|
6
6
|
|
|
7
7
|
Run `proto start` to preview on the iOS Simulator (auto) or your iPhone (scan QR).
|
|
8
|
-
Run `proto share` to
|
|
9
|
-
|
|
8
|
+
Run `proto share` to publish a link anyone can open on their iPhone with the free Prototo app.
|
|
9
|
+
To add a screen, describe it to your coding agent in plain language.
|
|
@@ -14,14 +14,16 @@ const FADE_MS = 350;
|
|
|
14
14
|
type Dot = { id: number; x: number; y: number };
|
|
15
15
|
type FadingDot = { key: number; x: number; y: number; opacity: Animated.Value };
|
|
16
16
|
|
|
17
|
+
// Brand-pink fill + white rim: reads on light AND dark content (a white or
|
|
18
|
+
// plain dark dot disappears on matching backgrounds).
|
|
17
19
|
const circle = {
|
|
18
20
|
position: 'absolute' as const,
|
|
19
21
|
width: DOT,
|
|
20
22
|
height: DOT,
|
|
21
23
|
borderRadius: DOT / 2,
|
|
22
|
-
backgroundColor: 'rgba(
|
|
24
|
+
backgroundColor: 'rgba(232,106,156,0.45)',
|
|
23
25
|
borderWidth: 1.5,
|
|
24
|
-
borderColor: 'rgba(255,255,255,0.
|
|
26
|
+
borderColor: 'rgba(255,255,255,0.9)',
|
|
25
27
|
};
|
|
26
28
|
|
|
27
29
|
export default function TouchDots({ children }: { children: ReactNode }) {
|
|
@@ -14,8 +14,8 @@ import { Screen, Stack, Text, Card, Divider, Lottie } from '../components/proto'
|
|
|
14
14
|
|
|
15
15
|
// Prototo Desktop sets EXPO_PUBLIC_PROTO_DESKTOP=1 when it runs `proto start`
|
|
16
16
|
// (Metro inlines it at bundle time). In the desktop the terminal sits beside
|
|
17
|
-
// this preview with
|
|
18
|
-
// reaches the Mac, so the copy and
|
|
17
|
+
// this preview with the coding agent already running, and the simulator
|
|
18
|
+
// clipboard never reaches the Mac, so the copy and Copy affordance both change.
|
|
19
19
|
const IN_DESKTOP = process.env.EXPO_PUBLIC_PROTO_DESKTOP === '1';
|
|
20
20
|
|
|
21
21
|
const EXAMPLES = [
|
|
@@ -98,7 +98,7 @@ export default function Home() {
|
|
|
98
98
|
<Text size="body" color="secondary">
|
|
99
99
|
{IN_DESKTOP
|
|
100
100
|
? 'Type your first prompt in the terminal beside this preview, and watch it appear here.'
|
|
101
|
-
: `In a terminal: cd {{APP_NAME}} && claude. Then paste a prompt below.`}
|
|
101
|
+
: `In a terminal: cd {{APP_NAME}} && claude (or codex). Then paste a prompt below.`}
|
|
102
102
|
</Text>
|
|
103
103
|
</Stack>
|
|
104
104
|
</Card>
|