create-proto 0.3.1 → 0.4.0

package/package.json

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

package/template/CLAUDE.md

@@ -18,6 +18,15 @@ You're the design tool inside a Prototo project. The designer prompts you in pla
 
 **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.
 
+**Prototo motion + graphics** — four subpath modules in `/components/proto` cover animation and drawing. Pick by what the prompt actually asks for:
+
+- `../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`.
+- `../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`.
+- `../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`.
+- `../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`.
+
+Never import `react-native-ease`, `react-native-reanimated`, `lottie-react-native`, or `@shopify/react-native-skia` 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`.
+
 **Share** — `proto share` starts a tunnel + registers a `prototo.app/p/<token>` link. Stakeholders open the link on iPhone with Prototo App to view the live prototype.
 
 **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.
@@ -30,6 +39,7 @@ You're the design tool inside a Prototo project. The designer prompts you in pla
 /screens/<Name>.tsx    screen, PascalCase, default export
 /components/shared/    designer-created custom components
 /components/proto/     Prototo primitives — read-only
+/assets/lottie/        designer-supplied Lottie JSON files (loaded by the Lottie component)
 ```
 
 A new screen `screens/Settings.tsx` needs:

package/template/components/proto/canvas/index.ts

@@ -0,0 +1,15 @@
+export {
+  Canvas,
+  Group,
+  Paint,
+  Path,
+  Circle,
+  Rect,
+  RoundedRect,
+  Line,
+  LinearGradient,
+  BlurMask,
+  Shadow,
+  Skia,
+  useClock,
+} from '@shopify/react-native-skia';

package/template/components/proto/gestures/index.ts

@@ -0,0 +1,21 @@
+export {
+  default as AnimatedView,
+  useSharedValue,
+  useAnimatedStyle,
+  useDerivedValue,
+  useAnimatedScrollHandler,
+  useAnimatedReaction,
+  withTiming,
+  withSpring,
+  withDelay,
+  withSequence,
+  withRepeat,
+  cancelAnimation,
+  interpolate,
+  Extrapolation,
+  Easing,
+  runOnJS,
+  runOnUI,
+} from 'react-native-reanimated';
+
+export { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';

package/template/components/proto/lottie/index.tsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import LottieView, { type LottieViewProps } from 'lottie-react-native';
+
+export type LottieProps = LottieViewProps;
+
+export const Lottie = forwardRef<LottieView, LottieProps>(function Lottie(
+  { autoPlay = true, loop = true, ...rest },
+  ref,
+) {
+  return <LottieView ref={ref} autoPlay={autoPlay} loop={loop} {...rest} />;
+});
+
+export type LottieRef = LottieView;

package/template/components/proto/motion/index.tsx

@@ -0,0 +1,80 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, type PressableProps, type ViewStyle } from 'react-native';
+import { EaseView } from 'react-native-ease';
+import type {
+  AnimateProps,
+  CubicBezier,
+  EasingType,
+  EaseViewProps,
+  NoneTransition,
+  SingleTransition,
+  SpringTransition,
+  TimingTransition,
+  Transition,
+  TransitionEndEvent,
+  TransitionMap,
+  TransformOrigin,
+  TransformPerspective,
+} from 'react-native-ease';
+
+export type MotionPressableProps = Omit<PressableProps, 'children' | 'style'> & {
+  animate?: AnimateProps;
+  pressedAnimate?: AnimateProps;
+  transition?: Transition;
+  style?: ViewStyle;
+  children?: ReactNode;
+};
+
+function MotionPressable({
+  animate,
+  pressedAnimate,
+  transition,
+  style,
+  children,
+  onPressIn,
+  onPressOut,
+  ...rest
+}: MotionPressableProps) {
+  const [pressed, setPressed] = useState(false);
+  const current: AnimateProps | undefined =
+    pressed && pressedAnimate ? { ...animate, ...pressedAnimate } : animate;
+
+  return (
+    <Pressable
+      onPressIn={(e) => {
+        setPressed(true);
+        onPressIn?.(e);
+      }}
+      onPressOut={(e) => {
+        setPressed(false);
+        onPressOut?.(e);
+      }}
+      {...rest}
+    >
+      <EaseView animate={current} transition={transition} style={style}>
+        {children}
+      </EaseView>
+    </Pressable>
+  );
+}
+
+export const Motion = {
+  View: EaseView,
+  Pressable: MotionPressable,
+};
+
+export type {
+  AnimateProps,
+  CubicBezier,
+  EasingType,
+  EaseViewProps,
+  NoneTransition,
+  SingleTransition,
+  SpringTransition,
+  TimingTransition,
+  Transition,
+  TransitionEndEvent,
+  TransitionMap,
+  TransformOrigin,
+  TransformPerspective,
+};

package/template/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@expo/ui": "55.0.17",
+    "@shopify/react-native-skia": "2.4.18",
     "expo": "~55.0.26",
     "expo-clipboard": "~55.0.13",
     "expo-dev-client": "~55.0.35",
@@ -18,8 +19,10 @@
     "expo-router": "~55.0.16",
     "expo-status-bar": "~55.0.6",
     "expo-symbols": "~55.0.9",
+    "lottie-react-native": "~7.3.4",
     "react": "19.2.0",
     "react-native": "0.83.6",
+    "react-native-ease": "^0.7.2",
     "react-native-gesture-handler": "~2.30.1",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "5.6.2",

package/template/pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 node-linker: hoisted
-onlyBuiltDependencies:
-  - cloudflared
+allowBuilds:
+  cloudflared: true