diff --git a/.claude/agent-memory/code-reviewer/MEMORY.md b/.agents/agent-memory/code-reviewer/MEMORY.md similarity index 100% rename from .claude/agent-memory/code-reviewer/MEMORY.md rename to .agents/agent-memory/code-reviewer/MEMORY.md diff --git a/.claude/agent-memory/code-reviewer/agent-config-patterns.md b/.agents/agent-memory/code-reviewer/agent-config-patterns.md similarity index 100% rename from .claude/agent-memory/code-reviewer/agent-config-patterns.md rename to .agents/agent-memory/code-reviewer/agent-config-patterns.md diff --git a/.claude/agent-memory/code-reviewer/analytics-patterns.md b/.agents/agent-memory/code-reviewer/analytics-patterns.md similarity index 100% rename from .claude/agent-memory/code-reviewer/analytics-patterns.md rename to .agents/agent-memory/code-reviewer/analytics-patterns.md diff --git a/.claude/agent-memory/code-reviewer/create-workspace-command-return.md b/.agents/agent-memory/code-reviewer/create-workspace-command-return.md similarity index 100% rename from .claude/agent-memory/code-reviewer/create-workspace-command-return.md rename to .agents/agent-memory/code-reviewer/create-workspace-command-return.md diff --git a/.claude/agent-memory/code-reviewer/feedback_over_engineering.md b/.agents/agent-memory/code-reviewer/feedback_over_engineering.md similarity index 100% rename from .claude/agent-memory/code-reviewer/feedback_over_engineering.md rename to .agents/agent-memory/code-reviewer/feedback_over_engineering.md diff --git a/.claude/agent-memory/code-reviewer/http-vs-ws-parity.md b/.agents/agent-memory/code-reviewer/http-vs-ws-parity.md similarity index 100% rename from .claude/agent-memory/code-reviewer/http-vs-ws-parity.md rename to .agents/agent-memory/code-reviewer/http-vs-ws-parity.md diff --git a/.claude/agent-memory/code-reviewer/message-envelope-pattern.md b/.agents/agent-memory/code-reviewer/message-envelope-pattern.md similarity index 100% rename from .claude/agent-memory/code-reviewer/message-envelope-pattern.md rename to .agents/agent-memory/code-reviewer/message-envelope-pattern.md diff --git a/.claude/agent-memory/code-reviewer/mobile-layout-patterns.md b/.agents/agent-memory/code-reviewer/mobile-layout-patterns.md similarity index 100% rename from .claude/agent-memory/code-reviewer/mobile-layout-patterns.md rename to .agents/agent-memory/code-reviewer/mobile-layout-patterns.md diff --git a/.claude/agent-memory/code-reviewer/patterns-deep.md b/.agents/agent-memory/code-reviewer/patterns-deep.md similarity index 100% rename from .claude/agent-memory/code-reviewer/patterns-deep.md rename to .agents/agent-memory/code-reviewer/patterns-deep.md diff --git a/.claude/agent-memory/deep-reviewer/MEMORY.md b/.agents/agent-memory/deep-reviewer/MEMORY.md similarity index 100% rename from .claude/agent-memory/deep-reviewer/MEMORY.md rename to .agents/agent-memory/deep-reviewer/MEMORY.md diff --git a/.claude/agents/code-reviewer.md b/.agents/agents/code-reviewer.md similarity index 100% rename from .claude/agents/code-reviewer.md rename to .agents/agents/code-reviewer.md diff --git a/.claude/agents/deep-reviewer.md b/.agents/agents/deep-reviewer.md similarity index 100% rename from .claude/agents/deep-reviewer.md rename to .agents/agents/deep-reviewer.md diff --git a/.claude/agents/dev.md b/.agents/agents/dev.md similarity index 100% rename from .claude/agents/dev.md rename to .agents/agents/dev.md diff --git a/.claude/commands/interrogate-eng.md b/.agents/commands/interrogate-eng.md similarity index 100% rename from .claude/commands/interrogate-eng.md rename to .agents/commands/interrogate-eng.md diff --git a/.claude/commands/interrogate-ux.md b/.agents/commands/interrogate-ux.md similarity index 100% rename from .claude/commands/interrogate-ux.md rename to .agents/commands/interrogate-ux.md diff --git a/.claude/settings.json b/.agents/settings.json similarity index 100% rename from .claude/settings.json rename to .agents/settings.json diff --git a/.claude/skills/commit/SKILL.md b/.agents/skills/commit/SKILL.md similarity index 100% rename from .claude/skills/commit/SKILL.md rename to .agents/skills/commit/SKILL.md diff --git a/.claude/skills/debug/SKILL.md b/.agents/skills/debug/SKILL.md similarity index 100% rename from .claude/skills/debug/SKILL.md rename to .agents/skills/debug/SKILL.md diff --git a/.claude/skills/deep-review/SKILL.md b/.agents/skills/deep-review/SKILL.md similarity index 100% rename from .claude/skills/deep-review/SKILL.md rename to .agents/skills/deep-review/SKILL.md diff --git a/.claude/skills/design-explore/SKILL.md b/.agents/skills/design-explore/SKILL.md similarity index 100% rename from .claude/skills/design-explore/SKILL.md rename to .agents/skills/design-explore/SKILL.md diff --git a/.agents/skills/deus-code-style/SKILL.md b/.agents/skills/deus-code-style/SKILL.md new file mode 100644 index 000000000..a5b4c13ad --- /dev/null +++ b/.agents/skills/deus-code-style/SKILL.md @@ -0,0 +1,59 @@ +--- +name: deus-code-style +description: "Deus Machine internal code style and conventions. Use when writing, reviewing, or modifying code in this project. Covers Tailwind v4, component patterns, animations, and performance. Triggers on: writing code, styling, components, CSS, tailwind, shadcn, animation, performance, database query, polling, rendering, zustand, react query." +--- + +# Deus Code Style + +Internal conventions for writing code in the Deus Machine codebase. + +## Quick Reference + +| Topic | Guide | When to use | +|---|---|---| +| [Tailwind & Styling](tailwind.md) | Tailwind v4 gotchas, global CSS rules, color system | Writing any CSS or styling | +| [Components](components.md) | Shadcn, file locations, architecture patterns | Creating or modifying UI components | +| [Animations](animations.md) | Easing defaults, CSS vs Framer Motion, performance | Adding motion or transitions | +| [Performance](performance.md) | DB rules, polling, rendering, git subprocess | Backend queries, frontend lists, data fetching | + +## Core Conventions + +### ts-pattern for Discriminated Unions + +Use `ts-pattern` instead of switch/case or if/else chains on `.type`, `.status`, `.state` fields: + +```tsx +import { match, P } from "ts-pattern"; + +return match(block) + .with({ type: "text" }, (b) => ) + .with({ type: "tool_use" }, (b) => ) + .exhaustive(); // catches missing cases at compile time +``` + +- `.exhaustive()` — all cases must be handled +- `.otherwise()` — intentional fallback for open-ended matching + +### State Management Split + +- **Zustand** — UI state only (modals, selections, layout, sidebar) +- **TanStack Query v5** — Server state (workspaces, sessions, repos, messages, settings) + +Feature hooks: `src/features/{feature}/api/{feature}.queries.ts` and `.service.ts`. Never put server data in Zustand. + +### File Organization + +```text +src/features/{feature}/ui/ # Feature-scoped components (default) +src/shared/components/ # Cross-feature reusable compositions +src/components/ui/ # Shadcn base primitives (edit freely) +src/platform/ # Platform abstraction (Electron IPC, socket) +``` + +Default to feature-scoped. Only promote to `shared/` when a second feature needs it. + +### Git Diff Semantics + +- Branch resolution always prefers **remote** (`origin/{branch}`) over local — never change to local-first +- Diffs use git CLI against **working directory** (committed + staged + unstaged) — `diff_tree_to_tree` would miss uncommitted changes +- All git calls use `spawn()` with timeouts (5s short ops, 15s diffs) diff --git a/.agents/skills/deus-code-style/animations.md b/.agents/skills/deus-code-style/animations.md new file mode 100644 index 000000000..7a5336be3 --- /dev/null +++ b/.agents/skills/deus-code-style/animations.md @@ -0,0 +1,32 @@ +# Animations + +## Project Defaults + +- **Default easing:** `ease-out-quart` — `cubic-bezier(.165, .84, .44, 1)` +- **Default duration:** 200-300ms. Never exceed 1s. +- **Hover transitions:** `200ms ease` for color/background/opacity. Disable on touch with `@media (hover: hover) and (pointer: fine)`. +- **Don't use built-in CSS easings** (`ease-out`, `ease-in`) except `ease` for hover and `linear` for constant-speed. Always custom cubic-bezier. + +## CSS vs Framer Motion + +**CSS/Tailwind** for: +- Hover/focus transitions +- Infinite loops (spinners, shimmers) +- Tooltip/popover enter/exit +- Simple opacity/transform keyframes + +**Framer Motion** for: +- Mount/unmount transitions (`AnimatePresence` + `initial`/`animate`/`exit`) +- Layout animations (items shifting after reorder) +- Staggered lists (`staggerChildren`) +- Height auto (CSS can't animate to `auto`) + +## Rules + +- Animate only `transform` and `opacity` — never width, height, top, left, margin, padding +- `will-change` only for: transform, opacity, clipPath, filter +- No blur above 20px +- Co-locate animation config with the component, not in global.css +- Never define `@keyframes` in global.css for a single component — use Framer Motion inline +- Reuse: `{ duration: 0.2, ease: [0.165, 0.84, 0.44, 1] }` (ease-out-quart) +- Always wrap conditional renders in `AnimatePresence` when exit animations are needed diff --git a/.agents/skills/deus-code-style/components.md b/.agents/skills/deus-code-style/components.md new file mode 100644 index 000000000..4047f817b --- /dev/null +++ b/.agents/skills/deus-code-style/components.md @@ -0,0 +1,51 @@ +# Components + +## Shadcn — You Own the Code + +Files in `src/components/ui/` are starter code you're meant to customize. Editing them directly is the intended workflow. + +### Edit `components/ui/*` directly when: +- Changing default styles, adding project-wide variants, fixing a11y, adjusting animations + +### Create feature components when: +- Adding app-specific behavior, combining shadcn primitives into domain patterns, adding business logic + +### Shadcn Rules + +1. **Theme first** — try CSS variables in `global.css` before editing components. If you're overriding the same className everywhere, edit the component once. +2. **Keep standard props** — preserve `className`, `variant`, `size`, `asChild`. Don't embed domain logic in `ui/*`. +3. **Refresh from upstream** with `bunx shadcn@canary add --overwrite`, then reapply customizations. + +## Component Architecture + +### Encapsulate Self-Contained Concerns + +If a piece of UI involves data derivation + rendering + state, make it a component. Don't scatter utilities across the parent. + +```tsx +// Bad — parent wires up avatar logic manually +function Item({ repo }) { + const owner = getRepoOwner(repo.name); + const url = getGitHubAvatarUrl(owner); + return ...; +} + +// Good — component owns its concern +function Item({ repo }) { + return ; +} +``` + +### Extract vs Keep Inline + +**Extract when:** combines data + rendering, has own state/hooks, reusable, 10+ lines distracting from parent. + +**Keep inline when:** pure layout div, one-liner, only makes sense in this parent. + +### Where Components Live + +| Location | What goes here | +|---|---| +| `src/features/{feature}/ui/` | Default. Feature-scoped components. | +| `src/shared/components/` | Cross-feature reusable compositions (only when 2+ features need it) | +| `src/components/ui/` | Shadcn base primitives only | diff --git a/.agents/skills/deus-code-style/performance.md b/.agents/skills/deus-code-style/performance.md new file mode 100644 index 000000000..8ffc305bf --- /dev/null +++ b/.agents/skills/deus-code-style/performance.md @@ -0,0 +1,52 @@ +# Performance + +The app manages tens of repos, hundreds of workspaces, and multiple concurrent agent sessions. Naive patterns compound at this scale. + +## Database + +- **Index every query pattern** — all indexes in `shared/schema.ts`. Add one for any new query. +- **No N+1** — never subquery per row. Use `sessions.last_user_message_at` directly. Batch or denormalize. +- **Paginate unbounded collections** — messages, file lists. Default 50-100 items. +- **Auto-update triggers** for `updated_at` columns. +- **Column deprecation** — rename with `DEPRECATED_` prefix, never drop. +- **PRAGMA optimize** on startup and graceful shutdown. + +## Polling Discipline + +- **WebSocket push over polling** — all data resources use WS subscriptions. Never poll data that has a subscription. +- **Budget:** <5 HTTP req/sec steady state. Only pollers: git diffs on working sessions (2-5s). +- **Gate polling on state** — don't poll idle workspaces. + +| Frequency | What | +|---|---| +| 2-5s | Git diff hooks (only when session status = "working") | +| 30s+ / on-demand | Settings, repos, config, PR status | +| Never poll | Workspaces, stats, sessions, messages (WS push) | + +## Frontend Rendering + +- **Virtualize unbounded lists** — anything >30 items uses `@tanstack/react-virtual` (sidebar, messages, file tree) +- **Zustand selector discipline** — never destructure entire store. Always individual selectors: + ```tsx + // Bad: const { x, y } = useStore(); + // Good: const x = useStore((s) => s.x); + ``` + Use `useShallow` for structurally-equal objects/arrays. +- **Memoize list items** — `React.memo()` on components in `.map()` loops +- **Batch queries** — use bulk endpoints (e.g. `useBulkDiffStats`), not per-item hooks + +## Git + Subprocess + +- Treat git calls as expensive — deduplicate aggressively +- Use bulk endpoints (one call per repo interval), not per-item hooks +- Cache diff results with short TTL (5-10s) +- Cap concurrent git subprocesses to prevent CPU spikes + +## Read-Layer Priority + +When optimizing, tackle in this order: +1. `GET /workspaces/by-repo` (heaviest — joins repos + workspaces + sessions) +2. `GET /stats` (consolidated count query) +3. `GET /sessions/:id` +4. `GET /sessions/:id/messages` (paginated, cursor-based) +5. On-demand reads (repos, settings, config, PR status) diff --git a/.agents/skills/deus-code-style/tailwind.md b/.agents/skills/deus-code-style/tailwind.md new file mode 100644 index 000000000..fe3106ebb --- /dev/null +++ b/.agents/skills/deus-code-style/tailwind.md @@ -0,0 +1,71 @@ +# Tailwind & Styling + +## Tailwind CSS v4 — Key Differences + +v4 is NOT v3. These are the traps: + +- **No JavaScript config.** All config lives in `src/global.css` using `@theme` directive. Never create `tailwind.config.js`. +- **No `@layer`** — `@layer base/components/utilities` is not supported in v4. +- **No `@apply`** — use vanilla CSS instead. +- **No `@theme inline`** — put everything in the main `@theme` block. +- **No `tailwindcss-animate`** — animations are built-in. +- **Vite plugin:** `@tailwindcss/vite` (not `@tailwindcss/postcss`). + +### Color System: OKLCH + +All colors use OKLCH, not HSL/RGB. Semantic colors in `:root` and `.dark`: + +```css +@theme { + --color-background: var(--background); + --color-primary: var(--primary); + --font-family-sans: "Helvetica Neue", -apple-system, ...; +} +``` + +For semi-transparent: `color-mix(in oklch, var(--primary) 25%, transparent)`. + +## What Goes Where + +### Global CSS (`src/global.css`) — ONLY: + +1. `@theme` block (design tokens) +2. `@keyframes` (GPU-accelerated animations shared across components) +3. Global element styles (`html`, `body`, `#root`, scrollbars) +4. Complex effects Tailwind can't do (vibrancy, backdrop filters, markdown content styling) +5. `@media (prefers-reduced-motion)`, `@media (hover: hover)` + +### Never add to global CSS: + +Simple utilities that Tailwind already handles — spacing, shadows, typography, layout, colors. If Tailwind does it in 2-3 classes, don't make a custom utility. + +### Component variants (`src/components/ui/*`): + +Repeated patterns: size variations (`size="sm"`), style variations (`variant="outline"`), state variations (`data-state="active"`). + +### Inline Tailwind: + +Layout, one-off adjustments, responsive, state variants — the usual. + +## Specificity & Overrides + +- Never use `!important` — if you need it, the specificity architecture is wrong +- `cn()` / twMerge only merges classes with **identical modifiers**. `has-[>svg]:px-3` and `has-[&>svg]:px-1` coexist instead of overriding. Always match the exact modifier string from the base component. +- When debugging spacing, always read the base component source (`components/ui/*.tsx`) to see what CVA defaults you're inheriting + +## Debugging Layout Issues + +Before touching CSS: + +1. Outline everything: `* { outline: 1px solid rgba(255,0,0,0.3) !important; }` in DevTools +2. Trace the full component tree (parent + element + children across files) +3. Check parent/grandparent for `p-*`, `gap-*`, flex alignment +4. Check compound spacing (parent padding + child margin + flex gap) +5. Read the shadcn base component source for hidden defaults + +## General Rules + +- All colors via CSS variables/tokens, never hardcoded (`bg-blue-500`, `#3b82f6`) +- Consistent 16px default padding (dense product) +- Use container queries (`@container`) over media queries for reusable components +- Prefer logical properties (`margin-inline`, `padding-block`) for future-proofing diff --git a/.claude/skills/dev/SKILL.md b/.agents/skills/dev/SKILL.md similarity index 100% rename from .claude/skills/dev/SKILL.md rename to .agents/skills/dev/SKILL.md diff --git a/.claude/skills/explore/SKILL.md b/.agents/skills/explore/SKILL.md similarity index 100% rename from .claude/skills/explore/SKILL.md rename to .agents/skills/explore/SKILL.md diff --git a/.claude/skills/generate-deus-json/SKILL.md b/.agents/skills/generate-deus-json/SKILL.md similarity index 100% rename from .claude/skills/generate-deus-json/SKILL.md rename to .agents/skills/generate-deus-json/SKILL.md diff --git a/.claude/skills/pr/SKILL.md b/.agents/skills/pr/SKILL.md similarity index 100% rename from .claude/skills/pr/SKILL.md rename to .agents/skills/pr/SKILL.md diff --git a/.agents/skills/remotion-best-practices/SKILL.md b/.agents/skills/remotion-best-practices/SKILL.md deleted file mode 100644 index 702d276b2..000000000 --- a/.agents/skills/remotion-best-practices/SKILL.md +++ /dev/null @@ -1,56 +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. - -## Captions - -When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information. - -## Using FFmpeg - -For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information. - -## Audio visualization - -When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information. - -## How to use - -Read individual rule files for detailed explanations and code examples: - -- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber -- [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/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props -- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny -- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts) -- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata -- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny -- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion -- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny -- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny -- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny -- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline -- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component -- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks -- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion -- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion -- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow -- [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/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion -- [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 -- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it diff --git a/.agents/skills/remotion-best-practices/rules/3d.md b/.agents/skills/remotion-best-practices/rules/3d.md deleted file mode 100644 index c9d254f12..000000000 --- a/.agents/skills/remotion-best-practices/rules/3d.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -name: 3d -description: 3D content in Remotion using Three.js and React Three Fiber. -metadata: - tags: 3d, three, threejs ---- - -# Using Three.js and React Three Fiber in Remotion - -Follow React Three Fiber and Three.js best practices. -Only the following Remotion-specific rules need to be followed: - -## Prerequisites - -First, the `@remotion/three` package needs to be installed. -If it is not, use the following command: - -```bash -npx remotion add @remotion/three # If project uses npm -bunx remotion add @remotion/three # If project uses bun -yarn remotion add @remotion/three # If project uses yarn -pnpm exec remotion add @remotion/three # If project uses pnpm -``` - -## Using ThreeCanvas - -You MUST wrap 3D content in `` and include proper lighting. -`` MUST have a `width` and `height` prop. - -```tsx -import { ThreeCanvas } from "@remotion/three"; -import { useVideoConfig } from "remotion"; - -const { width, height } = useVideoConfig(); - - - - - - - - -; -``` - -## No animations not driven by `useCurrentFrame()` - -Shaders, models etc MUST NOT animate by themselves. -No animations are allowed unless they are driven by `useCurrentFrame()`. -Otherwise, it will cause flickering during rendering. - -Using `useFrame()` from `@react-three/fiber` is forbidden. - -## Animate using `useCurrentFrame()` - -Use `useCurrentFrame()` to perform animations. - -```tsx -const frame = useCurrentFrame(); -const rotationY = frame * 0.02; - - - - -; -``` - -## Using `` inside `` - -The `layout` prop of any `` inside a `` must be set to `none`. - -```tsx -import { Sequence } from "remotion"; -import { ThreeCanvas } from "@remotion/three"; - -const { width, height } = useVideoConfig(); - - - - - - - - -; -``` diff --git a/.agents/skills/remotion-best-practices/rules/animations.md b/.agents/skills/remotion-best-practices/rules/animations.md deleted file mode 100644 index 619591e8e..000000000 --- a/.agents/skills/remotion-best-practices/rules/animations.md +++ /dev/null @@ -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
Hello World!
; -}; -``` - -CSS transitions or animations are FORBIDDEN - they will not render correctly. -Tailwind animation class names are FORBIDDEN - they will not render correctly. diff --git a/.agents/skills/remotion-best-practices/rules/assets.md b/.agents/skills/remotion-best-practices/rules/assets.md deleted file mode 100644 index a5d40152e..000000000 --- a/.agents/skills/remotion-best-practices/rules/assets.md +++ /dev/null @@ -1,78 +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 ; -}; -``` - -The function returns an encoded URL that works correctly when deploying to subdirectories. - -## Using with components - -**Images:** - -```tsx -import { Img, staticFile } from "remotion"; - -; -``` - -**Videos:** - -```tsx -import { Video } from "@remotion/media"; -import { staticFile } from "remotion"; - -