Menü
Best practices for Remotion — programmatic video creation in React. Use when working with Remotion code, creating video compositions, adding animations, captions, audio, or rendering video.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Generate images using OpenAI (default) or Gemini. Use when asked to generate, create, or make images. Supports text-to-image and image editing with reference images.
Plans, audits, and implements scalable programmatic SEO systems with URL inventory, intent mapping, metadata, schema, internal linking, sitemaps, ISR/static rendering, and quality gates. Use when the user mentions 'programmatic SEO,' 'pSEO,' '100k pages,' 'generate SEO pages,' 'scaled landing pages,' 'template pages,' 'SEO page factory,' 'dynamic SEO routes,' 'sitemap shards,' 'keyword cannibalization,' 'doorway pages,' or 'thin content at scale.' Does not replace general SEO audits, AI SEO citation work, or llms.txt tasks unless PSEO scale is central.
Use when setting up, deploying, or debugging Nia's Twilio-based channels: voice (phone), SMS, and WhatsApp. All three share one Twilio number, one webhook server, and one set of credentials under channels.twilio. Covers config schema, cloudflared named-tunnel setup, Twilio Console webhook wiring, `nia phone` CLI, `place_call` / `send_message` MCP tools, the WhatsApp Sandbox 24h customer-service window, and the shared TwilioWebhookServer's dedup + rate-limit middleware. Trigger on mentions of "phone", "call", "voice", "sms", "whatsapp", "twilio", "realtime", "media stream", "cloudflared", or when deploying Nia to a new machine and a Twilio surface needs to come up.
Persistent task management via Beads CLI (bd). Use when user mentions tasks, todos, issues, or tracking work. Check `which bd` first — if missing, offer: `npm install -g @beads/bd`. All commands: run from `$BEATS_DIR` (for example `~/.niahere/beads`) and use `bd <command>`. Always label: `--label project:<project-name>`. Run `bd --help` or `bd help --all` for available commands. Not for ephemeral in-conversation tracking.
QA test a web application using Playwright. Use when asked to "qa", "QA", "test this site", "find bugs", "dogfood", "verify frontend behavior", "check UI rendering", "test user flows", "debug visual issues", "take a snapshot", "take a screenshot", "browser automation", "Playwright MCP", "ref system", or review quality of any web app (local or deployed). Five modes: diff-aware (auto on feature branches), full (systematic exploration), quick (30-second smoke test), single-page (verify one page or component), regression (compare against baseline). Produces structured report with health score, screenshots, and repro steps. Uses Playwright MCP tools or CLI fallback. Includes Playwright MCP reference (tool selection, ref system, token optimization, session management).
Transcribe or subtitle audio/video files using whisper.cpp (whisper-cpp), with a default medium model path and ffmpeg-based extraction.
| name | remotion |
| description | Best practices for Remotion — programmatic video creation in React. Use when working with Remotion code, creating video compositions, adding animations, captions, audio, or rendering video. |
Use this skill when dealing with Remotion code for domain-specific knowledge on video creation in React.
interpolate() and spring() for smooth animationsFor detailed rules and code examples, load the relevant rule file from rules/:
rules/animations.md) — Fundamental animation patterns, interpolation, spring physicsrules/text-animations.md) — Typography and text animation patternsrules/transitions.md) — Scene transition patternsrules/timing.md) — Interpolation curves: linear, easing, springrules/sequencing.md) — Sequencing patterns for multi-scene videosrules/compositions.md) — Defining compositions, stills, folders, default propsrules/assets.md) — Importing images, videos, audio, and fontsrules/videos.md) — Embedding videos: trimming, volume, speed, looping, pitchrules/audio.md) — Using audio and soundrules/audio-visualization.md) — Spectrum bars, waveforms, bass-reactive effectsrules/subtitles.md) — Caption handling and stylingrules/fonts.md) — Loading Google Fonts and local fontsrules/images.md) — Embedding images with the Img componentrules/gifs.md) — Displaying GIFs synchronized with timelinerules/charts.md) — Chart and data visualization patternsrules/3d.md) — 3D content using Three.js and React Three Fiberrules/lottie.md) — Embedding Lottie animationsrules/light-leaks.md) — Light leak overlay effectsrules/maps.md) — Add maps using Mapbox and animate themrules/transparent-videos.md) — Rendering with transparencyrules/trimming.md) — Trimming patternsrules/tailwind.md) — Using TailwindCSS in Remotionrules/parameters.md) — Make videos parametrizable with Zod schemasrules/calculate-metadata.md) — Dynamically set duration, dimensions, propsrules/measuring-text.md) — Text dimensions, fitting, overflow checkingrules/measuring-dom-nodes.md) — Measuring DOM element dimensionsrules/ffmpeg.md) — Video operations: trimming, silence detectionrules/voiceover.md) — AI-generated voiceover with ElevenLabs TTSrules/sound-effects.md) — Using sound effectsrules/get-video-duration.md) — Getting video duration with Mediabunnyrules/get-audio-duration.md) — Getting audio duration with Mediabunnyrules/get-video-dimensions.md) — Getting video width/height with Mediabunnyrules/can-decode.md) — Check browser decode support with Mediabunnyrules/extract-frames.md) — Extract frames at specific timestamps