create-proto 0.1.5 → 0.1.7

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.
Files changed (7) hide show
  1. package/package.json +2 -2
  2. package/template/CLAUDE.md +32 -50
  3. package/template/DESIGN.md +21 -55
  4. package/template/app/_layout.tsx +16 -0
  5. package/template/components/proto/Screen.tsx +22 -23
  6. package/template/package.json +1 -1
  7. package/template/screens/Home.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-proto",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "Scaffold a new Proto prototype: `npm create proto@latest myapp`. Designer-first native iOS prototyping environment that pairs with Claude Code.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -42,7 +42,7 @@
42
42
  },
43
43
  "dependencies": {
44
44
  "@clack/prompts": "^0.7.0",
45
- "@sherizan/proto-cli": "^0.1.5",
45
+ "@sherizan/proto-cli": "^0.1.7",
46
46
  "fs-extra": "^11.2.0",
47
47
  "qrcode-terminal": "^0.12.0",
48
48
  "validate-npm-package-name": "^5.0.1"
package/template/CLAUDE.md CHANGED
@@ -1,71 +1,53 @@
1
1
  # Proto Project — Claude Code Instructions
2
2
 
3
- 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.
3
+ 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.
4
4
 
5
- ## Three rules
5
+ ## Read first
6
+ - `DESIGN.md` — design tokens and the project's decisions
7
+ - `/screens/` — what already exists
6
8
 
7
- **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:
9
+ ## Building blocks (use whatever fits)
8
10
 
9
- | Need | Use |
10
- |---|---|
11
- | Tab bar | `expo-router/unstable-native-tabs` (`NativeTabs` + `Icon sf={{default, selected}}` in `app/_layout.tsx`) |
12
- | SF Symbol icon | `expo-symbols` `SymbolView` |
13
- | System button | `@expo/ui/swift-ui` `Button` |
14
- | System toggle | `@expo/ui/swift-ui` `Toggle` |
15
- | Form / settings list | `@expo/ui/swift-ui` `Form` + `Section` |
16
- | Liquid Glass surface | `expo-glass-effect` `GlassView` directly |
11
+ **Native iOS** — the easiest path to system-feel UI. Apple handles Liquid Glass, SF Symbols, accessibility, dynamic type:
17
12
 
18
- Never wrap a native component just to add Proto branding. Native > custom.
13
+ - `expo-router/unstable-native-tabs` — native `UITabBar`
14
+ - `expo-router` `Stack` with `headerLargeTitle: true` + `headerTransparent: true` — native large-title nav bar
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
19
18
 
20
- **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.
19
+ **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.
21
20
 
22
- **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.
23
-
24
- 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.
21
+ **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.
25
22
 
26
23
  ## File layout
27
24
 
28
25
  ```
29
- /app/<route>.tsx thin re-export of a screen (one-line wrapper)
30
- /app/_layout.tsx NativeTabs root layout (when app has tabs)
31
- /screens/<Name>.tsx actual screen component (PascalCase, default export)
32
- /components/shared/ designer-created shared components
33
- /components/proto/ Proto primitives — read-only, do not edit
26
+ /app/<route>.tsx route — one-line re-export
27
+ /app/_layout.tsx Stack (for native large titles) or NativeTabs (for tabs)
28
+ /screens/<Name>.tsx screen, PascalCase, default export
29
+ /components/shared/ designer-created custom components
30
+ /components/proto/ Proto primitives — read-only
34
31
  ```
35
32
 
36
- For a new screen `screens/Settings.tsx`, add a matching `app/settings.tsx`:
37
-
38
- ```tsx
39
- import Settings from '../screens/Settings';
40
- export default function SettingsRoute() { return <Settings />; }
41
- ```
33
+ A new screen `screens/Settings.tsx` needs:
34
+ - `app/settings.tsx` re-exporting it (`import Settings from '../screens/Settings'; export default function SettingsRoute() { return <Settings />; }`)
35
+ - A title set in `app/_layout.tsx`: `<Stack.Screen name="settings" options={{ title: 'Settings' }} />`
36
+ - Route filenames are lowercase kebab-case.
42
37
 
43
- Route filenames are lowercase kebab-case. Then add a one-line description to the Screens section of DESIGN.md.
38
+ ## DESIGN.md is alive
44
39
 
45
- ## Proto primitives (`/components/proto`)
40
+ 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.
46
41
 
47
- ```
48
- Screen title?, scrollable? SafeAreaView + ScrollView wrapper
49
- Stack gap?, padding? vertical flex
50
- Row gap?, align? horizontal flex
51
- Text size, color, style? themed RN Text (sizes: title/headline/body/caption/label)
52
- Card glass?, padding? surface; glass={true} = real Liquid Glass on iOS 26+
53
- Button label, variant?, onPress custom animated button — for iOS system style use @expo/ui Button
54
- Toggle label, value, onChange themed RN Switch — for iOS system look use @expo/ui Toggle
55
- Divider — 1px separator
56
- Modal title?, visible, ... RN Modal wrapper
57
- ```
42
+ When you add a new screen, add a one-line entry to `DESIGN.md`'s Screens section.
58
43
 
59
- ## When modifying a screen
44
+ ## When modifying
60
45
 
61
- Read the file first, then rewrite the full file. Never partial edits or diffs.
46
+ Read the file first, rewrite the full file. Never partial edits.
62
47
 
63
- ## Never
48
+ ## Avoid
64
49
 
65
- - Never import from `react-native` directly — use a library, native iOS, or Proto fallback
66
- - Never build a custom tab bar — always `expo-router/unstable-native-tabs`
67
- - Never put logic in `/app/` files — they re-export a screen, nothing else
68
- - 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
69
- - Never edit `/components/proto/`, `.proto/`, `app.config.js`, `babel.config.js`, `metro.config.js`
70
- - Never add a build step, dependency, or visual editor
71
- - Never tell the designer to open or edit a file manually
50
+ - Custom tab bars — `expo-router/unstable-native-tabs` is strictly better (real Liquid Glass, real SF Symbols, system blur).
51
+ - 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.
52
+ - Editing `/components/proto/`, `.proto/`, `app.config.js`, `babel.config.js`, `metro.config.js`.
53
+ - Telling the designer to open or edit a file manually. They prompt; you write.
package/template/DESIGN.md CHANGED
@@ -1,69 +1,35 @@
1
1
  # DESIGN.md
2
2
 
3
- > The design system for {{APP_NAME}}. Read by Claude Code before every change.
3
+ > {{APP_NAME}}'s design system. These are starting defaults — change anything by prompting Claude.
4
+ >
5
+ > Examples:
6
+ > - `update DESIGN.md, change accent to indigo`
7
+ > - `double the spacing scale`
8
+ > - `use SF Pro Rounded for headlines`
9
+ > - `add a brand purple to the palette`
10
+ >
4
11
  > Last updated: {{DATE}}
5
12
 
6
- ## How to update this file
7
-
8
- You never edit this file directly. Tell Claude Code in plain language and it rewrites the relevant section. Examples:
9
-
10
- - `update DESIGN.md, change accent to indigo and apply it everywhere`
11
- - `make card corners tighter — radius 16 instead of 22`
12
- - `switch to dark mode`
13
- - `use Tamagui as the component library`
14
-
15
- The tokens below become the actual colours, typography, and spacing in your screens. Never hardcoded.
16
-
17
13
  ## App
18
14
  - Name: {{APP_NAME}}
19
- - Theme: liquidGlass
20
- - Platform: iOS 26+ (Liquid Glass renders natively; iOS < 26 falls back to standard blur)
21
-
22
- ## Component library
23
- - Package: proto (built-in fallback)
24
- - Import from: ../components/proto
25
- - Fallback: proto
26
-
27
- For native iOS surfaces (tab bars, SF Symbols, system buttons, toggles, forms, Liquid Glass), Claude reaches for Apple-native components first — see CLAUDE.md.
28
-
29
- ## Colour
30
- - Accent: #007AFF
31
- - Surface primary: rgba(255,255,255,0.72)
32
- - Surface secondary: rgba(255,255,255,0.48)
33
- - Surface card: rgba(255,255,255,0.60)
34
- - Surface nav: rgba(255,255,255,0.82)
35
- - Text primary: #000000
36
- - Text secondary: rgba(0,0,0,0.5)
37
- - Text tertiary: rgba(0,0,0,0.3)
38
- - Destructive: #FF3B30
39
-
40
- ## Typography
41
- - Title: 34px / bold / tracking -0.4
42
- - Headline: 22px / semibold / tracking -0.4
43
- - Body: 17px / regular
44
- - Caption: 12px / regular / text-secondary
45
- - Label: 13px / medium
15
+ - Platform: iOS
46
16
 
47
- ## Spacing
48
- - xs: 4 / sm: 8 / md: 16 / lg: 24 / xl: 32
17
+ ## Tokens
49
18
 
50
- ## Shape
51
- - Card radius: 22
52
- - Button radius: 14
53
- - Modal radius: 44
54
- - Input radius: 12
19
+ ### Accent
20
+ #007AFF (iOS system blue)
55
21
 
56
- ## Effects
57
- - Card blur: 20
58
- - Nav blur: 40
59
- - Modal blur: 60
60
- - Border: rgba(255,255,255,0.4)
22
+ ### Type
23
+ iOS system font with dynamic type defaults. Override per-size below if you need custom sizing.
61
24
 
62
- ## Components in use
25
+ ### Spacing
26
+ xs 4 · sm 8 · md 16 · lg 24 · xl 32
63
27
 
64
- **Proto primitives** — Screen, Stack, Row, Text, Card, Button, Toggle, Modal, Divider.
28
+ ### Surface
29
+ - iOS 26+: Apple Liquid Glass via `expo-glass-effect`
30
+ - iOS < 26 + Android: system blur via `expo-blur`
65
31
 
66
- **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`).
32
+ (Add your own tokens below as you describe what you want. Claude rewrites this file as the design system evolves.)
67
33
 
68
34
  ## Screens
69
- - Home (initial) — starter screen
35
+ - Home — welcome screen with tutorial prompts
package/template/app/_layout.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import { Stack } from 'expo-router';
2
+
3
+ export default function RootLayout() {
4
+ return (
5
+ <Stack
6
+ screenOptions={{
7
+ headerLargeTitle: true,
8
+ headerTransparent: true,
9
+ headerBlurEffect: 'systemChromeMaterial',
10
+ headerLargeTitleShadowVisible: false,
11
+ }}
12
+ >
13
+ <Stack.Screen name="index" options={{ title: 'Proto' }} />
14
+ </Stack>
15
+ );
16
+ }
package/template/components/proto/Screen.tsx CHANGED
@@ -2,37 +2,36 @@ import { ScrollView, View } from 'react-native';
2
2
  import { SafeAreaView } from 'react-native-safe-area-context';
3
3
  import type { ReactNode } from 'react';
4
4
  import { useTheme } from './useTheme';
5
- import { Text } from './Text';
6
5
 
7
6
  export type ScreenProps = {
8
- title?: string;
9
7
  scrollable?: boolean;
10
8
  children?: ReactNode;
11
9
  };
12
10
 
13
- export function Screen({ title, scrollable = true, children }: ScreenProps) {
11
+ export function Screen({ scrollable = true, children }: ScreenProps) {
14
12
  const theme = useTheme();
15
13
  const Body = scrollable ? ScrollView : View;
16
14
  return (
17
- <SafeAreaView
18
- style={{ flex: 1, backgroundColor: theme.surface.primary }}
19
- edges={['top', 'left', 'right']}
20
- >
21
- {title ? (
22
- <View style={{ paddingHorizontal: theme.space.md, paddingTop: theme.space.md, paddingBottom: theme.space.sm }}>
23
- <Text size="title">{title}</Text>
24
- </View>
25
- ) : null}
26
- <Body
27
- style={{ flex: 1 }}
28
- contentContainerStyle={
29
- scrollable
30
- ? { padding: theme.space.md, gap: theme.space.md }
31
- : undefined
32
- }
33
- >
34
- {scrollable ? children : <View style={{ flex: 1, padding: theme.space.md, gap: theme.space.md }}>{children}</View>}
35
- </Body>
36
- </SafeAreaView>
15
+ <View style={{ flex: 1, backgroundColor: theme.surface.primary }}>
16
+ <SafeAreaView style={{ flex: 1 }} edges={['bottom', 'left', 'right']}>
17
+ <Body
18
+ style={{ flex: 1 }}
19
+ contentContainerStyle={
20
+ scrollable
21
+ ? { padding: theme.space.md, gap: theme.space.md }
22
+ : undefined
23
+ }
24
+ contentInsetAdjustmentBehavior={scrollable ? 'automatic' : undefined}
25
+ >
26
+ {scrollable ? (
27
+ children
28
+ ) : (
29
+ <View style={{ flex: 1, padding: theme.space.md, gap: theme.space.md }}>
30
+ {children}
31
+ </View>
32
+ )}
33
+ </Body>
34
+ </SafeAreaView>
35
+ </View>
37
36
  );
38
37
  }
package/template/package.json CHANGED
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@babel/core": "^7.24.0",
29
- "@sherizan/proto-cli": "^0.1.5",
29
+ "@sherizan/proto-cli": "^0.1.7",
30
30
  "@types/react": "~19.2.15",
31
31
  "babel-preset-expo": "~55.0.22",
32
32
  "typescript": "^5.9.2"
package/template/screens/Home.tsx CHANGED
@@ -35,7 +35,7 @@ export default function Home() {
35
35
  }));
36
36
 
37
37
  return (
38
- <Screen title="Proto" scrollable>
38
+ <Screen scrollable>
39
39
  <Stack gap={24} padding={20}>
40
40
  <Animated.View style={heroStyle}>
41
41
  <Card glass padding={24}>