@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/.builder/rules/deploy-app.mdc

@@ -1,22 +0,0 @@
----
-description: Deploy the app to production using Netlify or Vercel to make the site live
-globs:
-alwaysApply: true
----
-
-Deploying the app to production is powered by either Netlify or Vercel through MCP (Model Context Protocol) integrations:
-
-**For Netlify:**
-
-- If the Netlify tools are not available, tell the user to [Connect Netlify MCP](#open-mcp-popover).
-- If the user asks to deploy the app, use the appropriate Netlify MCP tools to deploy the app.
-- Note: Netlify builds the source code on their servers, so while it's good to check if `npm run build` works locally, it's not required.
-- Do not ask user to your any command in the terminal, use the Bash tool when needed.
-
-**For Vercel:**
-
-- If the Vercel tools are not available, tell the user to [Connect Vercel MCP](#open-mcp-popover).
-- Vercel deployment should work automatically once connected - simply use the appropriate Vercel MCP tools.
-- Do not ask user to your any command in the terminal, use the Bash tool when needed.
-
-You can also suggest sharing the [Open Preview](#open-preview), but explain that it won't be a production-ready link.

package/corpus/templates/videos/.builder/rules/organize-ui.mdc

@@ -1,9 +0,0 @@
----
-description: Keep component and files small
-globs:
-alwaysApply: true
----
-
-As development goes, break down complex UI into smaller components, avoiding very nested JSX trees.
-Also, even within a single page (route), feel free to create auxiliary extra smaller files to make the page more maintenable.
-Breaking big components into multiple files will help down the road when the user asks for changes or refactors.

package/corpus/templates/videos/.builder/skills/remotion/SKILL.md

@@ -1,29 +0,0 @@
----
-name: remotion-best-practices
-description: Best practices for Remotion - Video creation in React
-metadata:
-  tags: remotion, video, react, animation, composition
----
-
-## When to use
-
-Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
-
-## How to use
-
-Read individual rule files for detailed explanations and code examples:
-
-- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
-- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
-- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
-- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
-- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
-- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
-- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
-- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
-- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
-- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency
-- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
-- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
-- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema

package/corpus/templates/videos/.builder/skills/remotion/rules/animations.md

@@ -1,27 +0,0 @@
----
-name: animations
-description: Fundamental animation skills for Remotion
-metadata:
-  tags: animations, transitions, frames, useCurrentFrame
----
-
-All animations MUST be driven by the `useCurrentFrame()` hook.  
-Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
-
-```tsx
-import { useCurrentFrame } from "remotion";
-
-export const FadeIn = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
-    extrapolateRight: "clamp",
-  });
-
-  return <div style={{ opacity }}>Hello World!</div>;
-};
-```
-
-CSS transitions or animations are FORBIDDEN - they will not render correctly.  
-Tailwind animation class names are FORBIDDEN - they will not render correctly.

package/corpus/templates/videos/.builder/skills/remotion/rules/assets.md

@@ -1,43 +0,0 @@
----
-name: assets
-description: Importing images, videos, audio, and fonts into Remotion
-metadata:
-  tags: assets, staticFile, images, fonts, public
----
-
-# Importing assets in Remotion
-
-## The public folder
-
-Place assets in the `public/` folder at your project root.
-
-## Using staticFile()
-
-You MUST use `staticFile()` to reference files from the `public/` folder:
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Img src={staticFile("logo.png")} />;
-};
-```
-
-## Using with components
-
-**Images:** `<Img src={staticFile('photo.png')} />`
-**Videos:** `<Video src={staticFile('clip.mp4')} />` (from `@remotion/media`)
-**Audio:** `<Audio src={staticFile('music.mp3')} />` (from `@remotion/media`)
-
-## Remote URLs
-
-Remote URLs can be used directly without `staticFile()`:
-
-```tsx
-<Img src="https://example.com/image.png" />
-```
-
-## Important notes
-
-- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
-- Special characters in filenames are automatically encoded

package/corpus/templates/videos/.builder/skills/remotion/rules/audio.md

@@ -1,58 +0,0 @@
----
-name: audio
-description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
-metadata:
-  tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx
----
-
-# Using audio in Remotion
-
-## Prerequisites
-
-The @remotion/media package needs to be installed:
-
-```bash
-pnpm exec remotion add @remotion/media
-```
-
-## Importing Audio
-
-```tsx
-import { Audio } from "@remotion/media";
-import { staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Audio src={staticFile("audio.mp3")} />;
-};
-```
-
-## Trimming
-
-```tsx
-const { fps } = useVideoConfig();
-<Audio
-  src={staticFile("audio.mp3")}
-  trimBefore={2 * fps}
-  trimAfter={10 * fps}
-/>;
-```
-
-## Volume
-
-Static: `<Audio volume={0.5} />`
-
-Dynamic:
-
-```tsx
-<Audio
-  volume={(f) =>
-    interpolate(f, [0, 1 * fps], [0, 1], { extrapolateRight: "clamp" })
-  }
-/>
-```
-
-## Speed, Looping, Pitch
-
-- `playbackRate={2}` for 2x speed
-- `loop` for looping
-- `toneFrequency={1.5}` for higher pitch (server-side rendering only)

package/corpus/templates/videos/.builder/skills/remotion/rules/compositions.md

@@ -1,129 +0,0 @@
----
-name: compositions
-description: Defining compositions, stills, folders, default props and dynamic metadata
-metadata:
-  tags: composition, still, folder, props, metadata
----
-
-A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
-
-It normally is placed in the `src/Root.tsx` file.
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-    />
-  );
-};
-```
-
-## Default Props
-
-Pass `defaultProps` to provide initial values for your component.  
-Values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported).
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={
-        {
-          title: "Hello World",
-          color: "#ff0000",
-        } satisfies MyCompositionProps
-      }
-    />
-  );
-};
-```
-
-Use `type` declarations for props rather than `interface` to ensure `defaultProps` type safety.
-
-## Folders
-
-Use `<Folder>` to organize compositions in the sidebar.
-
-```tsx
-import { Composition, Folder } from "remotion";
-
-export const RemotionRoot = () => {
-  return (
-    <>
-      <Folder name="Marketing">
-        <Composition id="Promo" /* ... */ />
-        <Composition id="Ad" /* ... */ />
-      </Folder>
-    </>
-  );
-};
-```
-
-## Stills
-
-Use `<Still>` for single-frame images. It does not require `durationInFrames` or `fps`.
-
-```tsx
-import { Still } from "remotion";
-import { Thumbnail } from "./Thumbnail";
-
-export const RemotionRoot = () => {
-  return (
-    <Still id="Thumbnail" component={Thumbnail} width={1280} height={720} />
-  );
-};
-```
-
-## Calculate Metadata
-
-Use `calculateMetadata` to make dimensions, duration, or props dynamic based on data.
-
-```tsx
-import { Composition, CalculateMetadataFunction } from "remotion";
-
-const calculateMetadata: CalculateMetadataFunction<
-  MyCompositionProps
-> = async ({ props, abortSignal }) => {
-  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
-    signal: abortSignal,
-  }).then((res) => res.json());
-
-  return {
-    durationInFrames: Math.ceil(data.duration * 30),
-    props: {
-      ...props,
-      videoUrl: data.url,
-    },
-  };
-};
-```
-
-## Nesting compositions within another
-
-To add a composition within another composition, use the `<Sequence>` component with a `width` and `height` prop.
-
-```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
-  </Sequence>
-</AbsoluteFill>
-```

package/corpus/templates/videos/.builder/skills/remotion/rules/fonts.md

@@ -1,47 +0,0 @@
----
-name: fonts
-description: Loading Google Fonts and local fonts in Remotion
-metadata:
-  tags: fonts, google-fonts, typography, text
----
-
-# Using fonts in Remotion
-
-## Google Fonts with @remotion/google-fonts
-
-Install: `pnpm exec remotion add @remotion/google-fonts`
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Lobster";
-
-const { fontFamily } = loadFont();
-
-export const MyComposition = () => {
-  return <div style={{ fontFamily }}>Hello World</div>;
-};
-```
-
-Specify weights and subsets:
-
-```tsx
-import { loadFont } from "@remotion/google-fonts/Roboto";
-
-const { fontFamily } = loadFont("normal", {
-  weights: ["400", "700"],
-  subsets: ["latin"],
-});
-```
-
-## Local fonts with @remotion/fonts
-
-Install: `pnpm exec remotion add @remotion/fonts`
-
-```tsx
-import { loadFont } from "@remotion/fonts";
-import { staticFile } from "remotion";
-
-await loadFont({
-  family: "MyFont",
-  url: staticFile("MyFont-Regular.woff2"),
-});
-```

package/corpus/templates/videos/.builder/skills/remotion/rules/images.md

@@ -1,41 +0,0 @@
----
-name: images
-description: Embedding images in Remotion using the Img component
-metadata:
-  tags: images, img, staticFile, png, jpg, svg, webp
----
-
-# Using images in Remotion
-
-Always use the `<Img>` component from `remotion`. Do NOT use native `<img>`, Next.js `<Image>`, or CSS `background-image`.
-
-```tsx
-import { Img, staticFile } from "remotion";
-
-export const MyComposition = () => {
-  return <Img src={staticFile("photo.png")} />;
-};
-```
-
-## Remote images
-
-```tsx
-<Img src="https://example.com/image.png" />
-```
-
-## Sizing
-
-```tsx
-<Img
-  src={staticFile("photo.png")}
-  style={{ width: 500, height: 300, objectFit: "cover" }}
-/>
-```
-
-## Getting image dimensions
-
-```tsx
-import { getImageDimensions, staticFile } from "remotion";
-
-const { width, height } = await getImageDimensions(staticFile("photo.png"));
-```

package/corpus/templates/videos/.builder/skills/remotion/rules/parameters.md

@@ -1,59 +0,0 @@
----
-name: parameters
-description: Make a video parametrizable by adding a Zod schema
-metadata:
-  tags: parameters, zod, schema
----
-
-To make a video parametrizable, a Zod schema can be added to a composition.
-
-First, `zod` must be installed - it must be exactly version `3.22.3`.
-
-```bash
-pnpm i zod@3.22.3
-```
-
-Then define a Zod schema alongside the component:
-
-```tsx
-import { z } from "zod";
-
-export const MyCompositionSchema = z.object({
-  title: z.string(),
-});
-
-const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = (props) => {
-  return <h1>{props.title}</h1>;
-};
-```
-
-In the root file, pass the schema to the composition:
-
-```tsx
-<Composition
-  id="MyComposition"
-  component={MyComponent}
-  durationInFrames={100}
-  fps={30}
-  width={1080}
-  height={1080}
-  defaultProps={{ title: "Hello World" }}
-  schema={MyCompositionSchema}
-/>
-```
-
-## Color picker
-
-For a color picker, use `zColor()` from `@remotion/zod-types`:
-
-```bash
-pnpm exec remotion add @remotion/zod-types
-```
-
-```tsx
-import { zColor } from "@remotion/zod-types";
-
-export const MyCompositionSchema = z.object({
-  color: zColor(),
-});
-```

package/corpus/templates/videos/.builder/skills/remotion/rules/sequencing.md

@@ -1,54 +0,0 @@
----
-name: sequencing
-description: Sequencing patterns for Remotion - delay, trim, limit duration of items
-metadata:
-  tags: sequence, series, timing, delay, trim
----
-
-Use `<Sequence>` to delay when an element appears in the timeline.
-
-```tsx
-import { Sequence } from "remotion";
-
-const { fps } = useVideoConfig();
-
-<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
-  <Title />
-</Sequence>;
-```
-
-Always premount any `<Sequence>`!
-
-## Series
-
-Use `<Series>` when elements should play one after another without overlap.
-
-```tsx
-import { Series } from "remotion";
-
-<Series>
-  <Series.Sequence durationInFrames={45}>
-    <Intro />
-  </Series.Sequence>
-  <Series.Sequence durationInFrames={60}>
-    <MainContent />
-  </Series.Sequence>
-</Series>;
-```
-
-## Frame References Inside Sequences
-
-Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0).
-
-## Nested Sequences
-
-Sequences can be nested for complex timing:
-
-```tsx
-<Sequence from={0} durationInFrames={120}>
-  <Background />
-  <Sequence from={15} durationInFrames={90} layout="none">
-    <Title />
-  </Sequence>
-</Sequence>
-```

package/corpus/templates/videos/.builder/skills/remotion/rules/tailwind.md

@@ -1,11 +0,0 @@
----
-name: tailwind
-description: Using TailwindCSS in Remotion.
-metadata:
----
-
-You can and should use TailwindCSS in Remotion, if TailwindCSS is installed in the project.
-
-Don't use `transition-*` or `animate-*` classes - always animate using the `useCurrentFrame()` hook.
-
-Tailwind must be installed and enabled first in a Remotion project - fetch https://www.remotion.dev/docs/tailwind using WebFetch for instructions.

package/corpus/templates/videos/.builder/skills/remotion/rules/text-animations.md

@@ -1,18 +0,0 @@
----
-name: text-animations
-description: Typography and text animation patterns for Remotion.
-metadata:
-  tags: typography, text, typewriter, highlighter
----
-
-## Text animations
-
-Based on `useCurrentFrame()`, reduce the string character by character to create a typewriter effect.
-
-## Typewriter Effect
-
-Always use string slicing for typewriter effects. Never use per-character opacity.
-
-## Word Highlighting
-
-Animate a highlight behind words using interpolation on width/background properties.

package/corpus/templates/videos/.builder/skills/remotion/rules/timing.md

@@ -1,103 +0,0 @@
----
-name: timing
-description: Interpolation curves in Remotion - linear, easing, spring animations
-metadata:
-  tags: spring, bounce, easing, interpolation
----
-
-A simple linear interpolation is done using the `interpolate` function.
-
-```ts
-import { interpolate } from "remotion";
-
-const opacity = interpolate(frame, [0, 100], [0, 1]);
-```
-
-By default, values are not clamped. Clamp them like this:
-
-```ts
-const opacity = interpolate(frame, [0, 100], [0, 1], {
-  extrapolateRight: "clamp",
-  extrapolateLeft: "clamp",
-});
-```
-
-## Spring animations
-
-Spring animations have a more natural motion. They go from 0 to 1 over time.
-
-```ts
-import { spring, useCurrentFrame, useVideoConfig } from "remotion";
-
-const frame = useCurrentFrame();
-const { fps } = useVideoConfig();
-
-const scale = spring({
-  frame,
-  fps,
-});
-```
-
-### Physical properties
-
-Default: `mass: 1, damping: 10, stiffness: 100`.
-
-Common configurations:
-
-```tsx
-const smooth = { damping: 200 }; // Smooth, no bounce
-const snappy = { damping: 20, stiffness: 200 }; // Snappy, minimal bounce
-const bouncy = { damping: 8 }; // Bouncy entrance
-const heavy = { damping: 15, stiffness: 80, mass: 2 }; // Heavy, slow
-```
-
-### Delay
-
-```tsx
-const entrance = spring({
-  frame,
-  fps,
-  delay: 20,
-});
-```
-
-### Duration
-
-```tsx
-const s = spring({
-  frame,
-  fps,
-  durationInFrames: 40,
-});
-```
-
-### Combining spring() with interpolate()
-
-```tsx
-const springProgress = spring({ frame, fps });
-const rotation = interpolate(springProgress, [0, 1], [0, 360]);
-<div style={{ rotate: rotation + "deg" }} />;
-```
-
-## Easing
-
-```ts
-import { interpolate, Easing } from "remotion";
-
-const value = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.inOut(Easing.quad),
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp",
-});
-```
-
-Curves: `Easing.quad`, `Easing.sin`, `Easing.exp`, `Easing.circle`
-Convexities: `Easing.in`, `Easing.out`, `Easing.inOut`
-
-Cubic bezier:
-
-```ts
-const value = interpolate(frame, [0, 100], [0, 1], {
-  easing: Easing.bezier(0.8, 0.22, 0.96, 0.65),
-});
-```

package/corpus/templates/videos/.builder/skills/remotion/rules/transparent-videos.md

@@ -1,35 +0,0 @@
----
-name: transparent-videos
-description: Rendering transparent videos in Remotion
-metadata:
-  tags: transparent, alpha, codec, vp9, prores, webm
----
-
-# Rendering Transparent Videos
-
-## Transparent ProRes (for video editing software)
-
-```bash
-npx remotion render --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444 MyComp out.mov
-```
-
-## Transparent WebM (for browsers)
-
-```bash
-npx remotion render --image-format=png --pixel-format=yuva420p --codec=vp9 MyComp out.webm
-```
-
-## Setting defaults via calculateMetadata
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({
-  props,
-}) => {
-  return {
-    defaultCodec: "prores",
-    defaultVideoImageFormat: "png",
-    defaultPixelFormat: "yuva444p10le",
-    defaultProResProfile: "4444",
-  };
-};
-```