takomi 2.0.4

package/assets/.agent/skills/stitch/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/assets/.agent/skills/stitch/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/assets/.agent/skills/stitch/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/assets/.agent/skills/stitch/shadcn-ui/README.md

@@ -0,0 +1,248 @@
+# shadcn/ui Integration Skill
+
+## Install
+
+```bash
+npx skills add google-labs-code/stitch-skills --skill shadcn-ui --global
+```
+
+## What It Does
+
+This skill provides expert guidance for integrating shadcn/ui components into your React applications. It helps you discover, install, customize, and optimize shadcn/ui components while following best practices.
+
+## Example Prompts
+
+```text
+Help me set up shadcn/ui in my Next.js project
+
+Add a data table component with sorting and filtering to my app
+
+Show me how to customize the button component with a new variant
+
+Create a login form using shadcn/ui components with validation
+
+Build a dashboard layout with sidebar navigation using shadcn/ui blocks
+```
+
+## What is shadcn/ui?
+
+shadcn/ui is a collection of beautifully designed, accessible, and customizable components built with:
+- **Radix UI or Base UI**: Unstyled, accessible component primitives
+- **Tailwind CSS**: Utility-first styling framework
+- **TypeScript**: Full type safety
+
+**Key Difference**: Unlike traditional component libraries, shadcn/ui copies components directly into your project. This gives you:
+- Full control over the code
+- No version lock-in
+- Complete customization freedom
+- Zero runtime overhead
+
+## Skill Structure
+
+```text
+skills/shadcn-ui/
+├── SKILL.md              — Core instructions & workflow
+├── README.md             — This file
+├── examples/             — Example implementations
+│   ├── form-pattern.tsx       — Form with validation
+│   ├── data-table.tsx         — Advanced table with sorting
+│   └── auth-layout.tsx        — Authentication flow
+├── resources/            — Reference documentation
+│   ├── setup-guide.md         — Project initialization
+│   ├── component-catalog.md   — Component reference
+│   ├── customization-guide.md — Theming patterns
+│   └── migration-guide.md     — Migration from other libraries
+└── scripts/              — Utility scripts
+    └── verify-setup.sh        — Validate project configuration
+```
+
+## How It Works
+
+When activated, the agent follows this workflow:
+
+### 1. **Discovery & Planning**
+- Lists available components using shadcn MCP tools
+- Identifies required dependencies
+- Plans component composition strategy
+
+### 2. **Setup & Configuration**
+- Verifies or initializes `components.json`
+- Checks Tailwind CSS configuration
+- Validates import aliases and paths
+
+### 3. **Component Integration**
+- Retrieves component source code
+- Installs via CLI or manual integration
+- Handles dependency installation
+
+### 4. **Customization**
+- Applies theme customization
+- Creates component variants
+- Extends components with custom logic
+
+### 5. **Quality Assurance**
+- Validates TypeScript types
+- Checks accessibility compliance
+- Verifies responsive behavior
+
+## Prerequisites
+
+Your project should have:
+- **React 18+**
+- **Tailwind CSS 3.0+**
+- **TypeScript** (recommended)
+- **Node.js 18+**
+
+## Quick Start
+
+### For New Projects
+
+```bash
+# Create Next.js project with shadcn/ui
+npx create-next-app@latest my-app
+cd my-app
+npx shadcn@latest init
+
+# Add components
+npx shadcn@latest add button
+npx shadcn@latest add card
+```
+
+### For Existing Projects
+
+```bash
+# Initialize shadcn/ui
+npx shadcn@latest init
+
+# Configure when prompted:
+# - Choose style (default/new-york)
+# - Select base color
+# - Configure CSS variables
+# - Set import aliases
+
+# Add your first component
+npx shadcn@latest add button
+```
+
+## Available Components
+
+shadcn/ui provides 50+ components including:
+
+**Layout**: Accordion, Card, Separator, Tabs, Collapsible  
+**Forms**: Button, Input, Label, Checkbox, Radio Group, Select, Textarea  
+**Data Display**: Table, Badge, Avatar, Progress, Skeleton  
+**Overlays**: Dialog, Sheet, Popover, Tooltip, Dropdown Menu  
+**Navigation**: Navigation Menu, Tabs, Breadcrumb, Pagination  
+**Feedback**: Alert, Alert Dialog, Toast, Command  
+
+Plus complete **Blocks** like:
+- Authentication forms
+- Dashboard layouts
+- Calendar interfaces
+- Sidebar navigation
+- E-commerce components
+
+## Customization Approach
+
+### Theme-Level Customization
+Modify CSS variables in `globals.css`:
+```css
+:root {
+  --primary: 221.2 83.2% 53.3%;
+  --secondary: 210 40% 96.1%;
+  /* ... */
+}
+```
+
+### Component-Level Customization
+Components use `class-variance-authority` for variants:
+```typescript
+const buttonVariants = cva(
+  "base-classes",
+  {
+    variants: {
+      variant: { default: "...", destructive: "..." },
+      size: { default: "...", sm: "..." },
+    }
+  }
+)
+```
+
+### Composition
+Create higher-level components:
+```typescript
+// Compose existing components
+export function FeatureCard({ title, description, icon }) {
+  return (
+    <Card>
+      <CardHeader>
+        {icon}
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>{description}</p>
+      </CardContent>
+    </Card>
+  )
+}
+```
+
+## Integration with MCP Tools
+
+This skill leverages shadcn MCP server capabilities:
+
+- `list_components` - Browse component catalog
+- `get_component` - Retrieve component source
+- `get_component_metadata` - View props and dependencies
+- `get_component_demo` - See usage examples
+- `list_blocks` - Browse UI blocks
+- `get_block` - Retrieve block source with all files
+- `search_items_in_registries` - Find components in custom registries
+
+## Best Practices
+
+1. **Keep `ui/` pure**: Don't modify components in `components/ui/` directly
+2. **Compose, don't fork**: Create wrapper components instead of editing originals
+3. **Use the CLI**: Let `shadcn add` handle dependencies and updates
+4. **Maintain consistency**: Use the `cn()` utility for all class merging
+5. **Respect accessibility**: Preserve ARIA attributes and keyboard handlers
+6. **Test responsiveness**: shadcn components are responsive by default—keep it that way
+
+## Troubleshooting
+
+### "Module not found" errors
+Check your `tsconfig.json` includes path aliases:
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+```
+
+### Styles not applying
+- Import `globals.css` in your root layout
+- Verify Tailwind config includes component paths
+- Check CSS variable definitions match component expectations
+
+### TypeScript errors
+- Ensure all Radix UI peer dependencies are installed
+- Run `npm install` after adding components via CLI
+- Check that React types are up to date
+
+## Further Reading
+
+- [Official Documentation](https://ui.shadcn.com)
+- [Component Source](https://github.com/shadcn-ui/ui)
+- [Radix UI Docs](https://www.radix-ui.com)
+- [Tailwind CSS Docs](https://tailwindcss.com)
+
+## Contributing
+
+Contributions to improve this skill are welcome! See the root [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.
+
+## License
+
+See [LICENSE](../../LICENSE) in the repository root.