bps-kit 1.0.18 → 1.1.0

package/templates/skills_normal/react-components/package-lock.json

@@ -0,0 +1,231 @@
+{
+  "name": "stitch-to-react-pro",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "stitch-to-react-pro",
+      "version": "1.0.0",
+      "dependencies": {
+        "@swc/core": "^1.3.100"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@swc/core": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.8.tgz",
+      "integrity": "sha512-T8keoJjXaSUoVBCIjgL6wAnhADIb09GOELzKg10CjNg+vLX48P93SME6jTfte9MZIm5m+Il57H3rTSk/0kzDUw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "@swc/types": "^0.1.25"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.15.8",
+        "@swc/core-darwin-x64": "1.15.8",
+        "@swc/core-linux-arm-gnueabihf": "1.15.8",
+        "@swc/core-linux-arm64-gnu": "1.15.8",
+        "@swc/core-linux-arm64-musl": "1.15.8",
+        "@swc/core-linux-x64-gnu": "1.15.8",
+        "@swc/core-linux-x64-musl": "1.15.8",
+        "@swc/core-win32-arm64-msvc": "1.15.8",
+        "@swc/core-win32-ia32-msvc": "1.15.8",
+        "@swc/core-win32-x64-msvc": "1.15.8"
+      },
+      "peerDependencies": {
+        "@swc/helpers": ">=0.5.17"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.8.tgz",
+      "integrity": "sha512-M9cK5GwyWWRkRGwwCbREuj6r8jKdES/haCZ3Xckgkl8MUQJZA3XB7IXXK1IXRNeLjg6m7cnoMICpXv1v1hlJOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.8.tgz",
+      "integrity": "sha512-j47DasuOvXl80sKJHSi2X25l44CMc3VDhlJwA7oewC1nV1VsSzwX+KOwE5tLnfORvVJJyeiXgJORNYg4jeIjYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.8.tgz",
+      "integrity": "sha512-siAzDENu2rUbwr9+fayWa26r5A9fol1iORG53HWxQL1J8ym4k7xt9eME0dMPXlYZDytK5r9sW8zEA10F2U3Xwg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.8.tgz",
+      "integrity": "sha512-o+1y5u6k2FfPYbTRUPvurwzNt5qd0NTumCTFscCNuBksycloXY16J8L+SMW5QRX59n4Hp9EmFa3vpvNHRVv1+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.8.tgz",
+      "integrity": "sha512-koiCqL09EwOP1S2RShCI7NbsQuG6r2brTqUYE7pV7kZm9O17wZ0LSz22m6gVibpwEnw8jI3IE1yYsQTVpluALw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.8.tgz",
+      "integrity": "sha512-4p6lOMU3bC+Vd5ARtKJ/FxpIC5G8v3XLoPEZ5s7mLR8h7411HWC/LmTXDHcrSXRC55zvAVia1eldy6zDLz8iFQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.8.tgz",
+      "integrity": "sha512-z3XBnbrZAL+6xDGAhJoN4lOueIxC/8rGrJ9tg+fEaeqLEuAtHSW2QHDHxDwkxZMjuF/pZ6MUTjHjbp8wLbuRLA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.8.tgz",
+      "integrity": "sha512-djQPJ9Rh9vP8GTS/Df3hcc6XP6xnG5c8qsngWId/BLA9oX6C7UzCPAn74BG/wGb9a6j4w3RINuoaieJB3t+7iQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.8.tgz",
+      "integrity": "sha512-/wfAgxORg2VBaUoFdytcVBVCgf1isWZIEXB9MZEUty4wwK93M/PxAkjifOho9RN3WrM3inPLabICRCEgdHpKKQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.8.tgz",
+      "integrity": "sha512-GpMePrh9Sl4d61o4KAHOOv5is5+zt6BEXCOCgs/H0FLGeii7j9bWDE8ExvKFy2GRRZVNR1ugsnzaGWHKM6kuzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/types": {
+      "version": "0.1.25",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.25.tgz",
+      "integrity": "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
+    }
+  }
+}

package/templates/skills_normal/react-components/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "react-components",
+  "version": "1.0.0",
+  "description": "Design-to-code prompt to React components for Stitch MCP",
+  "type": "module",
+  "scripts": {
+    "validate": "node scripts/validate.js",
+    "fetch": "bash scripts/fetch-stitch.sh"
+  },
+  "dependencies": {
+    "@swc/core": "^1.3.100"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/skills_normal/react-components/resources/architecture-checklist.md

@@ -0,0 +1,15 @@
+# Architecture Quality Gate
+
+### Structural integrity
+- [ ] Logic extracted to custom hooks in `src/hooks/`.
+- [ ] No monolithic files; strictly Atomic/Composite modularity.
+- [ ] All static text/URLs moved to `src/data/mockData.ts`.
+
+### Type safety and syntax
+- [ ] Props use `Readonly<T>` interfaces.
+- [ ] File is syntactically valid TypeScript (no red squiggles).
+- [ ] Placeholders from templates (e.g., `StitchComponent`) have been replaced with actual names.
+
+### Styling and theming
+- [ ] Dark mode (`dark:`) applied to all color classes.
+- [ ] No hardcoded hex values; use theme-mapped Tailwind classes.

package/templates/skills_normal/react-components/resources/component-template.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+// Use a valid identifier like 'StitchComponent' as the placeholder
+interface StitchComponentProps {
+  readonly children?: React.ReactNode;
+  readonly className?: string;
+}
+
+export const StitchComponent: React.FC<StitchComponentProps> = ({
+  children,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`relative ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default StitchComponent;

package/templates/skills_normal/react-components/resources/stitch-api-reference.md

@@ -0,0 +1,14 @@
+# Stitch API reference
+
+This document describes the data structures returned by the Stitch MCP server to ensure accurate component mapping.
+
+### Metadata schema
+When calling `get_screen`, the server returns a JSON object with these key properties:
+* **htmlCode**: Contains a `downloadUrl`. This is a signed URL that requires a system-level fetch (curl) to handle redirects and security handshakes.
+* **screenshot**: Includes a `downloadUrl` for the visual design. Use this to verify layout intent that might not be obvious in the raw HTML.
+* **deviceType**: Usually set to `DESKTOP`. All generated components should prioritize the corresponding viewport (2560px width) as the base layout.
+
+### Technical mapping rules
+1. **Element tracking**: Preserve `data-stitch-id` attributes as comments in the TSX to allow for future design synchronization.
+2. **Asset handling**: Treat background images in the HTML as dynamic data. Extract the URLs into `mockData.ts` rather than hardcoding them into the component styles.
+3. **Style extraction**: The HTML `<head>` contains a localized `tailwind.config`. This config must be merged with the local project theme to ensure colors like `primary` and `background-dark` render correctly.

package/templates/skills_normal/react-components/resources/style-guide.json

@@ -0,0 +1,27 @@
+{
+  "theme": {
+    "colors": {
+      "primary": "#19e66f",
+      "background": {
+        "light": "#f6f8f7",
+        "dark": "#112118",
+        "elevated": "#1A1A1A"
+      },
+      "accent": {
+        "purple": "#8A2BE2",
+        "lavender": "#D0A9F5"
+      }
+    },
+    "typography": {
+      "display": [
+        "Space Grotesk",
+        "sans-serif"
+      ],
+      "icons": "Material Symbols Outlined"
+    },
+    "spacing": {
+      "header-h": "72px",
+      "container-max": "960px"
+    }
+  }
+}

package/templates/skills_normal/react-components/scripts/fetch-stitch.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+# Copyright 2026 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+URL=$1
+OUTPUT=$2
+if [ -z "$URL" ] || [ -z "$OUTPUT" ]; then
+  echo "Usage: $0 <url> <output_path>"
+  exit 1
+fi
+echo "Initiating high-reliability fetch for Stitch HTML..."
+curl -L -f -sS --connect-timeout 10 --compressed "$URL" -o "$OUTPUT"
+if [ $? -eq 0 ]; then
+  echo "✅ Successfully retrieved HTML at: $OUTPUT"
+  exit 0
+else
+  echo "❌ Error: Failed to retrieve content. Check TLS/SNI or URL expiration."
+  exit 1
+fi

package/templates/skills_normal/react-components/scripts/validate.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import swc from '@swc/core';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const HEX_COLOR_REGEX = /#[0-9A-Fa-f]{6}/;
+
+async function validateComponent(filePath) {
+  const code = fs.readFileSync(filePath, 'utf-8');
+  const filename = path.basename(filePath);
+  try {
+    const ast = await swc.parse(code, { syntax: "typescript", tsx: true });
+    let hasInterface = false;
+    let tailwindIssues = [];
+
+    console.log("🔍 Scanning AST...");
+
+    const walk = (node) => {
+      if (!node) return;
+      if (node.type === 'TsInterfaceDeclaration' && node.id.value.endsWith('Props')) hasInterface = true;
+      if (node.type === 'JSXAttribute' && node.name.name === 'className') {
+        if (node.value?.value && HEX_COLOR_REGEX.test(node.value.value)) tailwindIssues.push(node.value.value);
+      }
+      for (const key in node) { if (node[key] && typeof node[key] === 'object') walk(node[key]); }
+    };
+    walk(ast);
+
+    console.log(`--- Validation for: ${filename} ---`);
+    if (hasInterface) {
+      console.log("✅ Props declaration found.");
+    } else {
+      console.error("❌ MISSING: Props interface (must end in 'Props').");
+    }
+
+    if (tailwindIssues.length === 0) {
+      console.log("✅ No hardcoded hex values found.");
+    } else {
+      console.error(`❌ STYLE: Found ${tailwindIssues.length} hardcoded hex codes.`);
+      tailwindIssues.forEach(hex => console.error(`   - ${hex}`));
+    }
+
+    if (hasInterface && tailwindIssues.length === 0) {
+      console.log("\n✨ COMPONENT VALID.");
+      process.exit(0);
+    } else {
+      console.error("\n🚫 VALIDATION FAILED.");
+      process.exit(1);
+    }
+  } catch (err) {
+    console.error("❌ PARSE ERROR:", err.message);
+    process.exit(1);
+  }
+}
+
+validateComponent(process.argv[2]);

package/templates/vault/remotion/README.md

@@ -0,0 +1,105 @@
+# Stitch-Remotion Video Walkthrough Skill
+
+Generate professional walkthrough videos from Stitch app designs using Remotion.
+
+## What This Skill Does
+
+This skill bridges Stitch (UI design platform) and Remotion (programmatic video library) to automatically create walkthrough videos showcasing app screens with:
+
+- **Smooth transitions**: Cross-fades, slides, and zoom effects
+- **Text overlays**: Screen titles, descriptions, and feature callouts
+- **Professional animations**: Spring-based natural motion
+- **Customizable timing**: Control display duration per screen
+
+## Prerequisites
+
+1. **Stitch MCP Server**: Access to retrieve screens from Stitch projects
+2. **Node.js**: For running Remotion
+3. **Remotion**: Either Remotion MCP Server or Remotion CLI
+
+## Example Use Case
+
+**User Request:**
+> "Look up the screens in my Stitch project 'Calculator App' and build a remotion video that shows a walkthrough of the screens."
+
+**What Happens:**
+1. Agent retrieves all screens from the Stitch project
+2. Downloads screenshots for each screen
+3. Creates a Remotion composition with transitions
+4. Generates video with smooth animations and text overlays
+5. Renders final MP4 video
+
+## Key Features
+
+- **Automated asset retrieval** from Stitch projects
+- **Modular Remotion components** for easy customization
+- **Multiple transition styles** (fade, slide, zoom)
+- **Text overlay system** for annotations
+- **Configurable timing** per screen
+- **Professional rendering** with quality optimization
+
+## Installation
+
+Install this skill using:
+
+```bash
+npx skills add google-labs-code/stitch-skills --skill remotion --global
+```
+
+## File Structure
+
+When using this skill, the agent will create:
+
+```
+project/
+├── video/                      # Remotion project
+│   ├── src/
+│   │   ├── WalkthroughComposition.tsx
+│   │   ├── ScreenSlide.tsx
+│   │   └── components/
+│   ├── public/assets/screens/  # Stitch screenshots
+│   └── remotion.config.ts
+├── screens.json                # Screen manifest
+└── output.mp4                  # Final video
+```
+
+## How It Works
+
+1. **Discovery**: Identifies Stitch and Remotion MCP servers
+2. **Retrieval**: Fetches screens and metadata from Stitch project
+3. **Asset Download**: Downloads screenshots for each screen
+4. **Composition**: Generates Remotion React components
+5. **Preview**: Opens Remotion Studio for refinement (optional)
+6. **Render**: Produces final video file
+
+## Integration Points
+
+**With Stitch:**
+- Uses Stitch MCP to list projects and screens
+- Downloads screenshots and HTML code
+- Extracts screen metadata (title, dimensions)
+
+**With Remotion:**
+- Creates TypeScript/React components
+- Configures composition settings
+- Renders video using Remotion CLI or MCP
+
+## Advanced Capabilities
+
+- **Dynamic text extraction**: Parse Stitch HTML to auto-generate annotations
+- **Interactive hotspots**: Highlight clickable elements
+- **Voiceover integration**: Sync narration with screen transitions
+- **Multiple video patterns**: Slide show, feature highlight, user flow
+
+## Related Skills
+
+- **design-md**: Extract design system from Stitch projects (useful for consistent branding in videos)
+- **react-components**: Convert Stitch designs to React (if you want interactive demos instead of videos)
+
+## Learn More
+
+See the full [SKILL.md](./SKILL.md) for detailed instructions, troubleshooting, and best practices.
+
+## License
+
+This is not an officially supported Google product.

package/templates/vault/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}
+      />
+    </>
+  );
+};

package/templates/vault/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"
+    }
+  ]
+}