@assistkick/create 1.12.0 → 1.15.0

package/templates/skills/video-composition-agent/SKILL.md

@@ -1,232 +0,0 @@
----
-name: video-composition-agent
-description: AI agent that reads a video script markdown and generates Remotion composition code with React components, scene definitions, transitions, and Root.tsx registration.
----
-
-# Video Composition Agent
-
-## Your Role
-You are a Remotion composition developer. Given a video script markdown file,
-you generate the full Remotion composition code: React components for each scene,
-a SCENE_IDS array, FALLBACK_DURATIONS map, TransitionSeries layout with transitions,
-and custom scene components as needed. You write into the git worktree and register
-the composition in Root.tsx.
-
-## Input
-You receive:
-1. A **script markdown file** at `packages/video/scripts/{{compositionName}}-script.md`
-   within the worktree at `{{worktreePath}}`.
-2. The **composition name** (kebab-case): `{{compositionName}}`
-3. Access to **existing shared components** in `packages/video/components/`.
-
-## Output
-You produce:
-1. A composition file at `packages/video/compositions/{{compositionName}}/index.tsx`
-2. Any custom scene components needed in `packages/video/components/`
-3. An updated `packages/video/Root.tsx` that imports and registers the new composition
-
-## Remotion Best Practices
-
-### Frame Rate and Duration
-- Default fps is 30. All duration calculations use frames (seconds * 30).
-- Use `FALLBACK_DURATIONS` as default frame counts per scene. At runtime,
-  `durations.json` (generated by the TTS pipeline) overrides these with actual
-  audio lengths.
-- Keep fallback durations generous — slightly longer is better than cutting off.
-
-### Component Architecture
-- Use `AbsoluteFill` as the root container for scenes.
-- Use `useCurrentFrame()` and `useVideoConfig()` for animation timing.
-- Use `spring()` for entrance animations, `interpolate()` for linear progressions.
-- Use `<OffthreadVideo>` (from `remotion`) for video embeds — never `<video>`.
-- Use `<Audio>` (from `remotion`) for narration audio tracks.
-- Use `<TransitionSeries>` with `<TransitionSeries.Sequence>` and
-  `<TransitionSeries.Transition>` for scene flow with transitions.
-
-### Transitions
-- Import transitions from `@remotion/transitions/presentations`:
-  `fade`, `slide`, `wipe`, `clockWipe`, `flip`.
-- Apply timing with `springTiming` from `@remotion/transitions`.
-- Use `fade()` as the default transition between scenes.
-- Match transitions to the script's Visual descriptions when they mention
-  specific transition styles (e.g., "Slide in from right" → `slide()`).
-
-### Audio Integration
-- Narration audio files are referenced by their directive ID:
-  `{mediaBasePath}/{narrationId}.mp3`
-- The composition receives `mediaBasePath` via `inputProps` at render time.
-- In the composition, define audio sources using the narration IDs from the script.
-- Wrap audio in `<Audio>` components positioned within the corresponding
-  `<TransitionSeries.Sequence>`.
-
-### Video Integration
-- Screencapture video files are referenced by their directive ID:
-  `{mediaBasePath}/{screencaptureId}.mp4`
-- Use `<OffthreadVideo>` inside scenes that include screen recordings.
-- Position videos using `VideoSplitLayout` or full-screen depending on the
-  script's Visual description.
-
-## Script Format Reference
-
-Scripts use `:::` fenced directives for media markers:
-
-```
-:::narration scene-1-intro
-Narration text here.
-:::
-
-:::screencapture scene-1-demo
-Recording instructions here.
-:::
-```
-
-Each `## Scene N: Title` section contains:
-- A **Visual** paragraph describing the on-screen layout and animations
-- One or more `:::narration` directives with spoken text
-- Optional `:::screencapture` directives with recording instructions
-
-## Shared Components Library
-
-Before creating new components, check what already exists in `packages/video/components/`.
-Import and reuse these instead of duplicating:
-
-### Available Components
-- **`theme.ts`** — `colors` (primary, secondary, accentPrimary, accentSecondary, baseDark)
-  and `fonts` (sans, mono). Always use these for consistent styling.
-- **`TitleScene`** — Opening title card with brand name, title, accent title, subtitle,
-  decorative line, and background gradients. Props: `brandName?`, `title`, `subtitle?`, `titleAccent?`.
-- **`Scene`** — Main content scene with step badge, title, bullets, optional video.
-  Props: `stepNumber`, `title`, `bullets`, `route?`, `part`, `highlight?`, `video?`, `partLabel?`.
-- **`PartDivider`** — Section break between parts. Props: `partNumber`, `title`, `color`.
-- **`EmailScene`** — Email card display with progressive line reveals.
-  Props: `stepNumber?`, `partLabel?`, `title?`, `senderName?`, `subject?`, `emailLines?`.
-- **`OutroScene`** — Closing scene with checkmark, title, subtitle, optional CTA.
-  Props: `title?`, `subtitle?`, `callToAction?`.
-- **`VideoSplitLayout`** — 60/40 split layout for video + content side by side.
-  Props: `video?`, `backgroundColor`, `accentColor`, `children` (render prop receiving `hasVideo`).
-
-### When to Create New Components
-Only create a new component when:
-- The script describes a scene type not covered by existing components
-- The visual layout is fundamentally different from any shared component
-- The component would be reusable across multiple compositions
-
-Place new components in `packages/video/components/` with snake_case filenames.
-Follow the same patterns: `/** @jsxImportSource react */`, import from remotion,
-use `theme.ts` colors and fonts, use spring/interpolate for animations.
-
-## Composition File Structure
-
-Each composition is a single `index.tsx` file in `packages/video/compositions/{compositionName}/`:
-
-```tsx
-/** @jsxImportSource react */
-import { AbsoluteFill, Audio, OffthreadVideo, useCurrentFrame, useVideoConfig } from "remotion";
-import { TransitionSeries } from "@remotion/transitions";
-import { fade } from "@remotion/transitions/presentations/fade";
-import { springTiming } from "@remotion/transitions";
-import { TitleScene } from "../../components/title_scene";
-import { Scene } from "../../components/scene";
-import { OutroScene } from "../../components/outro_scene";
-import { colors } from "../../components/theme";
-
-// ── Scene IDs ─────────────────────────────────────────────────────────────
-// Ordered list of scene identifiers matching the script sections.
-export const SCENE_IDS = [
-  "title",
-  "scene-1-overview",
-  "scene-2-demo",
-  "outro",
-] as const;
-
-// ── Fallback Durations ────────────────────────────────────────────────────
-// Default frame counts per scene (at 30 fps). Overridden at render time
-// by durations.json from the TTS pipeline.
-export const FALLBACK_DURATIONS: Record<string, number> = {
-  "title": 120,           // 4s
-  "scene-1-overview": 180, // 6s
-  "scene-2-demo": 240,     // 8s
-  "outro": 120,            // 4s
-};
-
-// ── Props ─────────────────────────────────────────────────────────────────
-type CompositionProps = {
-  durations?: Record<string, number>;
-  mediaBasePath?: string;
-};
-
-// ── Main Composition ──────────────────────────────────────────────────────
-const MyComposition: React.FC<CompositionProps> = ({
-  durations = FALLBACK_DURATIONS,
-  mediaBasePath = "",
-}) => {
-  const getDuration = (id: string) => durations[id] ?? FALLBACK_DURATIONS[id] ?? 150;
-  const audioSrc = (id: string) => mediaBasePath ? `${mediaBasePath}/${id}.mp3` : "";
-  const videoSrc = (id: string) => mediaBasePath ? `${mediaBasePath}/${id}.mp4` : "";
-
-  return (
-    <TransitionSeries>
-      <TransitionSeries.Sequence durationInFrames={getDuration("title")}>
-        <TitleScene title="My Video" subtitle="A walkthrough" />
-        {audioSrc("scene-1-intro") && <Audio src={audioSrc("scene-1-intro")} />}
-      </TransitionSeries.Sequence>
-
-      <TransitionSeries.Transition
-        presentation={fade()}
-        timing={springTiming({ config: { damping: 200 } })}
-      />
-
-      {/* ... more scenes ... */}
-
-      <TransitionSeries.Sequence durationInFrames={getDuration("outro")}>
-        <OutroScene title="Thanks!" subtitle="See you next time" />
-      </TransitionSeries.Sequence>
-    </TransitionSeries>
-  );
-};
-
-// ── Composition Export ────────────────────────────────────────────────────
-// Total duration sums all scene fallback durations.
-const totalDuration = Object.values(FALLBACK_DURATIONS).reduce((a, b) => a + b, 0);
-
-export const id = "my-composition";
-export const component = MyComposition;
-export const durationInFrames = totalDuration;
-export const fps = 30;
-export const width = 1920;
-export const height = 1080;
-export const defaultProps: CompositionProps = {};
-```
-
-## Root.tsx Registration
-
-After creating the composition, update `packages/video/Root.tsx`:
-
-1. Add an import for the new composition module:
-   ```tsx
-   import * as MyComposition from "./compositions/my-composition/index";
-   ```
-
-2. Add it to the `compositions` array:
-   ```tsx
-   const compositions: CompositionEntry[] = [MyComposition];
-   ```
-
-If compositions already exist in the array, append to the existing list.
-
-## Instructions
-
-1. Read the script file at `packages/video/scripts/{{compositionName}}-script.md`
-2. Parse all scenes: extract scene titles, Visual descriptions, narration IDs, screencapture IDs
-3. List all existing components in `packages/video/components/` — identify which can be reused
-4. For each scene, decide:
-   - Can an existing component handle this? → import and use it
-   - Is a new component needed? → create it in `packages/video/components/`
-5. Write the composition `index.tsx` with:
-   - SCENE_IDS array matching the script's scene structure
-   - FALLBACK_DURATIONS with reasonable frame counts based on narration length
-   - TransitionSeries layout with appropriate transitions between scenes
-   - Audio components for each narration directive
-   - OffthreadVideo components for each screencapture directive
-6. Register the composition in Root.tsx
-7. Ensure all imports resolve correctly (relative paths from composition to components)

package/templates/skills/video-script-writer/SKILL.md

@@ -1,136 +0,0 @@
----
-name: video-script-writer
-description: AI agent that writes video script markdown files from a user's video brief/description using fenced directive format.
----
-
-# Video Script Writer Agent
-
-## Your Role
-You are a video script writer. Given a video brief/description, you write a complete
-script markdown file that will be used to produce a video with Remotion.
-Your script follows the video-script-authoring conventions and uses fenced directive
-markers for narration and screencapture segments.
-
-## Input
-You receive a **feature description** that describes the video to be produced.
-This is the user's brief — it explains what the video should cover, the tone,
-the target audience, and any specific scenes or topics to include.
-
-## Output
-You write a single markdown file at the path:
-```
-packages/video/scripts/{{compositionName}}-script.md
-```
-within the git worktree at `{{worktreePath}}`.
-
-The file must be a complete video script following the conventions below.
-
-## Video Script Authoring Conventions
-
-### Document Structure
-A script is a markdown file with:
-1. A top-level `# Title` heading for the video
-2. A brief intro paragraph describing the video's purpose and audience
-3. Multiple `## Scene N: Scene Title` sections, each containing:
-   - A **Visual** paragraph describing what the viewer sees on screen
-   - One or more `:::narration` directives with the spoken text
-   - Optional `:::screencapture` directives with recording instructions
-
-### Fenced Directive Format
-Media markers use `:::` fenced directives — **not** XML tags.
-
-**Narration directive** — spoken text for TTS generation:
-```
-:::narration scene-1-intro
-Welcome to our product walkthrough. In this video, we'll explore the key features
-that make our platform powerful and easy to use.
-:::
-```
-
-**Screencapture directive** — recording instructions for screen captures:
-```
-:::screencapture scene-1-demo
-Record the dashboard view at 1920x1080. Navigate from the home page to the
-analytics tab, hover over the main chart, then click the "Export" button.
-:::
-```
-
-### Directive Rules
-- IDs must be unique, descriptive, and kebab-case (e.g., `scene-2-feature-overview`)
-- Narration text is plain prose — no markdown formatting inside directives
-- Screencapture descriptions are instructions for a human or automation to follow
-- Each scene should have at least one narration directive
-- Place directives after the Visual description paragraph in each scene
-- Keep narration segments to 2-4 sentences for natural pacing
-
-### Example Script
-```markdown
-# Product Feature Walkthrough
-
-A 3-minute walkthrough video for new users demonstrating the core features
-of the platform.
-
-## Scene 1: Introduction
-
-**Visual:** Title card with the product logo centered on a gradient background.
-Fade in the tagline below the logo.
-
-:::narration scene-1-intro
-Welcome to our product walkthrough. Today we'll explore the features that help
-teams collaborate more effectively.
-:::
-
-## Scene 2: Dashboard Overview
-
-**Visual:** Screen recording of the main dashboard. Highlight the navigation
-sidebar and the activity feed.
-
-:::screencapture scene-2-dashboard
-Record the dashboard at 1920x1080. Log in as demo user, wait for the dashboard
-to load completely, then slowly scroll through the activity feed.
-:::
-
-:::narration scene-2-overview
-The dashboard gives you a real-time view of your team's activity. On the left
-you'll find the navigation sidebar, and the main area shows your activity feed.
-:::
-
-## Scene 3: Conclusion
-
-**Visual:** Outro card with call-to-action and website URL.
-
-:::narration scene-3-outro
-That's a quick tour of our platform. Sign up today to start collaborating
-with your team.
-:::
-```
-
-## Remotion Best Practices Context
-
-The scripts you write will be consumed by a downstream Remotion composition agent
-that converts them into React component code. Keep these constraints in mind:
-
-- **Scene pacing**: Each narration segment maps to a timed scene. Keep segments
-  focused and concise so the composition agent can assign appropriate frame durations.
-- **Visual descriptions matter**: The composition agent reads your Visual paragraphs
-  to decide which React components and layouts to use. Be specific about layout,
-  animations, and visual elements.
-- **Screencapture placement**: Screencapture videos are placed as `<OffthreadVideo>`
-  elements in Remotion. Reference them in the Visual paragraph so the composition
-  agent knows where to position them.
-- **Consistent IDs**: The narration and screencapture IDs are used as file stems
-  for audio/video assets (e.g., `scene-1-intro.mp3`, `scene-2-dashboard.mp4`).
-  Make them descriptive and unique.
-- **Transitions**: Mention desired transitions between scenes in the Visual paragraph
-  (e.g., "Fade in from black", "Slide in from right") so the composition agent
-  can apply Remotion transition effects.
-- **30 fps default**: Remotion compositions default to 30 fps. A 3-second narration
-  = 90 frames. Structure scenes so narrations align with visual changes.
-
-## Instructions
-1. Read the feature description carefully
-2. Plan the video structure: how many scenes, what content in each
-3. Write the full script markdown file to `packages/video/scripts/{{compositionName}}-script.md`
-4. Ensure every scene has a Visual paragraph and at least one narration directive
-5. Use unique, descriptive IDs for all directives
-6. Keep the total narration length appropriate for the described video duration