初始化项目版本

.agents/skills/remotion/examples/WalkthroughComposition.tsx

@@ -0,0 +1,78 @@
+import {Composition} from 'remotion';
+import {Sequence} from 'remotion';
+import {fade} from '@remotion/transitions/fade';
+import {slide} from '@remotion/transitions/slide';
+import {TransitionSeries} from '@remotion/transitions';
+import {ScreenSlide} from './ScreenSlide';
+import screensManifest from '../screens.json';
+
+// Calculate total duration in frames
+const calculateDuration = () => {
+  const totalSeconds = screensManifest.screens.reduce(
+    (sum, screen) => sum + screen.duration,
+    0
+  );
+  return totalSeconds * screensManifest.videoConfig.fps;
+};
+
+export const WalkthroughComposition: React.FC = () => {
+  const {fps, width, height} = screensManifest.videoConfig;
+
+  return (
+    <TransitionSeries>
+      {screensManifest.screens.map((screen, index) => {
+        const durationInFrames = screen.duration * fps;
+        
+        // Select transition based on screen config
+        const transition =
+          screen.transitionType === 'slide'
+            ? slide()
+            : screen.transitionType === 'zoom'
+            ? fade() // Can customize with zoom effect
+            : fade();
+
+        return (
+          <TransitionSeries.Sequence
+            key={screen.id}
+            durationInFrames={durationInFrames}
+          >
+            <ScreenSlide
+              imageSrc={screen.imagePath}
+              title={screen.title}
+              description={screen.description}
+              width={screen.width}
+              height={screen.height}
+            />
+            {index < screensManifest.screens.length - 1 && (
+              <TransitionSeries.Transition
+                presentation={transition}
+                timing={{
+                  durationInFrames: 20, // 20 frames for transition
+                }}
+              />
+            )}
+          </TransitionSeries.Sequence>
+        );
+      })}
+    </TransitionSeries>
+  );
+};
+
+// Register composition
+export const RemotionRoot: React.FC = () => {
+  const {fps, width, height} = screensManifest.videoConfig;
+  const durationInFrames = calculateDuration();
+
+  return (
+    <>
+      <Composition
+        id="WalkthroughComposition"
+        component={WalkthroughComposition}
+        durationInFrames={durationInFrames}
+        fps={fps}
+        width={width}
+        height={height}
+      />
+    </>
+  );
+};

.agents/skills/remotion/examples/screens.json

@@ -0,0 +1,56 @@
+{
+  "projectName": "Calculator App",
+  "projectId": "projects/13534454087919359824",
+  "videoConfig": {
+    "fps": 30,
+    "width": 1920,
+    "height": 1080,
+    "durationInSeconds": 20
+  },
+  "screens": [
+    {
+      "id": "1",
+      "screenId": "12345",
+      "title": "Home Screen",
+      "description": "Main calculator interface with number pad and basic operations",
+      "imagePath": "assets/screens/home.png",
+      "width": 1200,
+      "height": 800,
+      "duration": 5,
+      "transitionType": "fade"
+    },
+    {
+      "id": "2",
+      "screenId": "12346",
+      "title": "History View",
+      "description": "View of previous calculations with option to reuse results",
+      "imagePath": "assets/screens/history.png",
+      "width": 1200,
+      "height": 800,
+      "duration": 4,
+      "transitionType": "slide"
+    },
+    {
+      "id": "3",
+      "screenId": "12347",
+      "title": "Settings Panel",
+      "description": "Customize calculator behavior and appearance",
+      "imagePath": "assets/screens/settings.png",
+      "width": 1200,
+      "height": 800,
+      "duration": 4,
+      "transitionType": "fade"
+    },
+    {
+      "id": "4",
+      "screenId": "12348",
+      "title": "Scientific Mode",
+      "description": "Advanced mathematical functions and operations",
+      "imagePath": "assets/screens/scientific.png",
+      "width": 1200,
+      "height": 800,
+      "duration": 5,
+      "transitionType": "zoom"
+    }
+  ]
+}