flyee 0.1.0

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

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

package/core/skills/remotion/resources/composition-checklist.md

@@ -0,0 +1,124 @@
+# Remotion Composition Checklist
+
+Use this checklist to ensure your Remotion walkthrough video composition is complete and follows best practices.
+
+## ✅ Project Setup
+
+- [ ] Remotion project initialized (or existing project verified)
+- [ ] Dependencies installed (`@remotion/transitions`, etc.)
+- [ ] Asset directory created (`public/assets/screens/`)
+- [ ] Screen manifest created (`screens.json`)
+
+## ✅ Asset Preparation
+
+- [ ] All Stitch screenshots downloaded
+- [ ] Images saved with descriptive names
+- [ ] Image dimensions recorded in manifest
+- [ ] Images optimized for size (if needed)
+- [ ] Asset paths are correct and relative to `public/`
+
+## ✅ Component Structure
+
+- [ ] `ScreenSlide.tsx` component created
+  - [ ] Props interface defined
+  - [ ] Zoom animation implemented
+  - [ ] Fade animation implemented
+  - [ ] Text overlay included
+- [ ] `WalkthroughComposition.tsx` created
+  - [ ] Screen manifest imported
+  - [ ] `<Sequence>` components for each screen
+  - [ ] Transitions between screens configured
+  - [ ] Proper timing offsets calculated
+
+## ✅ Configuration
+
+- [ ] `remotion.config.ts` updated
+  - [ ] Composition ID set
+  - [ ] Video dimensions configured
+  - [ ] Frame rate set (30 or 60 fps)
+  - [ ] Duration calculated correctly
+- [ ] Video metadata set (if applicable)
+  - [ ] Title
+  - [ ] Description
+
+## ✅ Animations & Transitions
+
+- [ ] Spring animations use appropriate configs
+  - [ ] Damping values (8-15 typical)
+  - [ ] Stiffness values (60-100 typical)
+- [ ] Transitions feel smooth
+- [ ] Text overlays timed correctly
+- [ ] No jarring or abrupt changes
+
+## ✅ Visual Quality
+
+- [ ] Text is readable at all times
+- [ ] Sufficient contrast between text and background
+- [ ] Font sizes appropriate for video resolution
+- [ ] Images display without distortion
+- [ ] Aspect ratios maintained
+
+## ✅ Timing
+
+- [ ] Each screen displays for appropriate duration
+- [ ] Total video length is reasonable (not too long/short)
+- [ ] Transitions don't feel rushed
+- [ ] Text has time to be read
+
+## ✅ Preview & Testing
+
+- [ ] Preview in Remotion Studio (`npm run dev`)
+- [ ] Scrub through timeline to check all frames
+- [ ] Verify smooth playback
+- [ ] Check for any rendering errors
+- [ ] Test on different screen sizes (if responsive)
+
+## ✅ Rendering
+
+- [ ] Render command tested and works
+- [ ] Output format chosen (MP4, WebM, etc.)
+- [ ] Quality settings configured
+- [ ] Codec specified (h264 recommended)
+- [ ] Final video renders without errors
+
+## ✅ Final Output
+
+- [ ] Video file generated successfully
+- [ ] File size is reasonable
+- [ ] Video plays correctly in media players
+- [ ] Audio included (if applicable)
+- [ ] Metadata embedded (if needed)
+
+## 🎨 Optional Enhancements
+
+- [ ] Progress indicator showing current screen
+- [ ] Custom logo or branding
+- [ ] Background music or sound effects
+- [ ] Voiceover narration
+- [ ] Interactive hotspots highlighting features
+- [ ] Call-to-action at end
+
+## 📋 Best Practices Verified
+
+- [ ] Component code is modular and reusable
+- [ ] TypeScript interfaces used for props
+- [ ] No hardcoded values (use manifest/config)
+- [ ] Code follows Remotion conventions
+- [ ] Comments added for complex logic
+- [ ] Assets organized in clear folder structure
+
+## 🐛 Common Issues Checked
+
+- [ ] No blurry images (check source resolution)
+- [ ] No misaligned text (verify positioning)
+- [ ] No choppy animations (check spring configs)
+- [ ] No missing assets (verify all paths)
+- [ ] No build errors (run `npm run build` test)
+
+---
+
+**Notes:**
+- Mark items with `[x]` as you complete them
+- Add custom checklist items specific to your project
+- Review Remotion documentation for updates
+- Test final video on target platform (YouTube, social, etc.)

package/core/skills/remotion/resources/screen-slide-template.tsx

@@ -0,0 +1,123 @@
+import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
+import {Img} from 'remotion';
+
+interface ScreenSlideProps {
+  imageSrc: string;
+  title: string;
+  description?: string;
+  width: number;
+  height: number;
+}
+
+export const ScreenSlide: React.FC<ScreenSlideProps> = ({
+  imageSrc,
+  title,
+  description,
+  width,
+  height,
+}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+
+  // Zoom in animation
+  const zoom = spring({
+    frame,
+    fps,
+    from: 0.95,
+    to: 1,
+    config: {
+      damping: 12,
+      stiffness: 80,
+    },
+  });
+
+  // Fade in animation
+  const opacity = spring({
+    frame,
+    fps,
+    from: 0,
+    to: 1,
+    config: {
+      damping: 10,
+    },
+  });
+
+  // Text overlay fade in (delayed)
+  const textOpacity = spring({
+    frame: frame - 15, // Delay by 15 frames
+    fps,
+    from: 0,
+    to: 1,
+    config: {
+      damping: 10,
+    },
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: '#000',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {/* Screen Image */}
+      <div
+        style={{
+          transform: `scale(${zoom})`,
+          opacity,
+          maxWidth: '90%',
+          maxHeight: '80%',
+          position: 'relative',
+        }}
+      >
+        <Img
+          src={imageSrc}
+          style={{
+            width: '100%',
+            height: 'auto',
+            borderRadius: '8px',
+            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
+          }}
+        />
+      </div>
+
+      {/* Text Overlay */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '10%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          textAlign: 'center',
+          opacity: textOpacity,
+          width: '80%',
+        }}
+      >
+        <h1
+          style={{
+            fontSize: '48px',
+            fontWeight: 'bold',
+            color: '#fff',
+            margin: '0 0 12px 0',
+            textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          {title}
+        </h1>
+        {description && (
+          <p
+            style={{
+              fontSize: '24px',
+              color: '#ddd',
+              margin: 0,
+              textShadow: '0 1px 5px rgba(0, 0, 0, 0.5)',
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/core/skills/remotion/scripts/download-stitch-asset.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# Download Stitch screen asset with proper handling of Google Cloud Storage URLs
+# Usage: ./download-stitch-asset.sh "https://storage.googleapis.com/..." "output-path.png"
+
+set -e
+
+if [ $# -ne 2 ]; then
+  echo "Usage: $0 <download_url> <output_path>"
+  echo "Example: $0 'https://storage.googleapis.com/stitch/screenshot.png' 'assets/screen.png'"
+  exit 1
+fi
+
+DOWNLOAD_URL="$1"
+OUTPUT_PATH="$2"
+
+# Create directory if it doesn't exist
+OUTPUT_DIR=$(dirname "$OUTPUT_PATH")
+mkdir -p "$OUTPUT_DIR"
+
+echo "Downloading from: $DOWNLOAD_URL"
+echo "Saving to: $OUTPUT_PATH"
+
+# Use curl with follow redirects and authentication handling
+curl -L -o "$OUTPUT_PATH" "$DOWNLOAD_URL"
+
+if [ $? -eq 0 ]; then
+  echo "✓ Successfully downloaded to $OUTPUT_PATH"
+  
+  # Display file size for verification
+  if command -v stat &> /dev/null; then
+    FILE_SIZE=$(stat -f%z "$OUTPUT_PATH" 2>/dev/null || stat -c%s "$OUTPUT_PATH" 2>/dev/null)
+    echo "  File size: $FILE_SIZE bytes"
+  fi
+else
+  echo "✗ Download failed"
+  exit 1
+fi

package/core/skills/seo-fundamentals/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: seo-fundamentals
+description: SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles.
+allowed-tools: Read, Glob, Grep
+---
+
+# SEO Fundamentals
+
+> Principles for search engine visibility.
+
+---
+
+## 1. E-E-A-T Framework
+
+| Principle | Signals |
+|-----------|---------|
+| **Experience** | First-hand knowledge, real examples |
+| **Expertise** | Credentials, depth of knowledge |
+| **Authoritativeness** | Backlinks, mentions, industry recognition |
+| **Trustworthiness** | HTTPS, transparency, accurate info |
+
+---
+
+## 2. Core Web Vitals
+
+| Metric | Target | Measures |
+|--------|--------|----------|
+| **LCP** | < 2.5s | Loading performance |
+| **INP** | < 200ms | Interactivity |
+| **CLS** | < 0.1 | Visual stability |
+
+---
+
+## 3. Technical SEO Principles
+
+### Site Structure
+
+| Element | Purpose |
+|---------|---------|
+| XML sitemap | Help crawling |
+| robots.txt | Control access |
+| Canonical tags | Prevent duplicates |
+| HTTPS | Security signal |
+
+### Performance
+
+| Factor | Impact |
+|--------|--------|
+| Page speed | Core Web Vital |
+| Mobile-friendly | Ranking factor |
+| Clean URLs | Crawlability |
+
+---
+
+## 4. Content SEO Principles
+
+### Page Elements
+
+| Element | Best Practice |
+|---------|---------------|
+| Title tag | 50-60 chars, keyword front |
+| Meta description | 150-160 chars, compelling |
+| H1 | One per page, main keyword |
+| H2-H6 | Logical hierarchy |
+| Alt text | Descriptive, not stuffed |
+
+### Content Quality
+
+| Factor | Importance |
+|--------|------------|
+| Depth | Comprehensive coverage |
+| Freshness | Regular updates |
+| Uniqueness | Original value |
+| Readability | Clear writing |
+
+---
+
+## 5. Schema Markup Types
+
+| Type | Use |
+|------|-----|
+| Article | Blog posts, news |
+| Organization | Company info |
+| Person | Author profiles |
+| FAQPage | Q&A content |
+| Product | E-commerce |
+| Review | Ratings |
+| BreadcrumbList | Navigation |
+
+---
+
+## 6. AI Content Guidelines
+
+### What Google Looks For
+
+| ✅ Do | ❌ Don't |
+|-------|----------|
+| AI draft + human edit | Publish raw AI content |
+| Add original insights | Copy without value |
+| Expert review | Skip fact-checking |
+| Follow E-E-A-T | Keyword stuffing |
+
+---
+
+## 7. Ranking Factors (Prioritized)
+
+| Priority | Factor |
+|----------|--------|
+| 1 | Quality, relevant content |
+| 2 | Backlinks from authority sites |
+| 3 | Page experience (Core Web Vitals) |
+| 4 | Mobile optimization |
+| 5 | Technical SEO fundamentals |
+
+---
+
+## 8. Measurement
+
+| Metric | Tool |
+|--------|------|
+| Rankings | Search Console, Ahrefs |
+| Traffic | Analytics |
+| Core Web Vitals | PageSpeed Insights |
+| Indexing | Search Console |
+| Backlinks | Ahrefs, Semrush |
+
+---
+
+> **Remember:** SEO is a long-term game. Quality content + technical excellence + patience = results.