Communitygithub.com

podo/design-agent-skills

Erstelle programmatische Videos mit React. Offizielles Remotion-Skill-Paket – Videos sequenziell mit React-Komponenten erstellen, mit Federphysik animieren und als MP4/GIF rendern. Ideal für Produktdemos, Erklärvideos und datengetriebene Videos.

Was ist design-agent-skills?

Dieses Skill-Paket bietet die offizielle Remotion-Integration für KI-Agenten wie Claude Code, Cursor und Codex. Es ermöglicht die Erstellung programmatischer Videos mit React: Video-Sequenzen werden als React-Komponenten definiert, mit Federphysik und Interpolation animiert und als MP4, WebM oder GIF gerendert. Das Paket enthält fokussierte Sub-Skills wie Best Practices, Projekt-Scaffolding, Rendering, Untertitel, Interaktivität, Markup, SaaS-Integration und Versions-Upgrades. Entwickler können so präzise, versionierbare Videoinhalte erstellen, die sich ideal für Produktdemos, datengetriebene Visualisierungen und Erklärvideos eignen. Nach der Installation über `npx skills add remotion-dev/skills` stehen die Skills über Trigger-Phrasen wie "remotion", "programmatisches Video" oder "React-Video" zur Verfügung.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/podo/design-agent-skills/tree/HEAD/skills/remotion
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

remotion

Katalog-Stub – vollständiges Paket: remotion-dev/skills

Hinweis: Der Upstream hat das einzelne remotion-Skill in ein Paket mit fokussierten Sub-Skills umstrukturiert – remotion-best-practices, remotion-create, remotion-render, remotion-captions, remotion-docs, remotion-interactivity, remotion-markup, remotion-saas, remotion-upgrade sowie mediabunny. Installieren Sie das Paket, um alle zu erhalten.

Entscheidungsbaum

  1. Ist das Paket bereits installiert? Prüfen: Das Skills-Verzeichnis Ihres Agenten enthält die remotion-*-Skills mit Inhalt über diesen Stub hinaus.

    • Ja → rufen Sie das relevante remotion-*-Skill auf und fahren Sie fort
    • Nein → gehen Sie zu Schritt 2

  2. Welchen Agenten verwenden Sie?

    • Claude Code → npx skills add remotion-dev/skills – oder senden Sie ! npx skills add … als Chat-Nachricht (fügen Sie -g für global hinzu, lassen Sie es für projektspezifisch weg)
    • Cursor → npx skills add remotion-dev/skills
    • Andere → npx skills add remotion-dev/skills oder siehe GitHub README

Installationsbefehl

npx skills add remotion-dev/skills

Installiert alle Remotion-Sub-Skills. Um nur eines zu installieren, hängen Sie seinen Namen an, z.B. npx skills add remotion-dev/skills --skill remotion-best-practices.

Nach der Installation aufrufen

  • Skill-Namen: remotion-best-practices, remotion-create, remotion-render, remotion-captions, remotion-docs, remotion-interactivity, remotion-markup, remotion-saas, remotion-upgrade, mediabunny
  • Trigger-Phrasen: "remotion", "programmatisches Video", "React-Video", "animiertes Video", "Video rendern"

Was es tut

Offizielles Remotion-Skill-Paket zum Erstellen programmatischer Videos mit React. Video-Sequenzen als React-Komponenten zusammensetzen, mit Federphysik und Interpolation animieren und als MP4, WebM oder GIF rendern. Sub-Skills decken Best Practices, das Erstellen neuer Projekte (remotion-create), Rendering (remotion-render), Untertitel, Interaktivität, Markup, SaaS-Integration und Versions-Upgrades ab. Am besten geeignet für Produktdemos, datengetriebene Visualisierungen und Erklärvideos, die eine codegesteuerte Präzision erfordern.

Wann NICHT verwenden

  • Einfache CSS/JS-Animation ohne Video-Export (verwenden Sie gsap-skills oder framer-motion-skills)
  • Nicht-React-Video-Pipelines (verwenden Sie hyperframes für HTML-zu-Video)

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

podo/design-agent-skills

Write HTML. Render video." — 11 skills for composition authoring, TTS/transcription, CLI workflow, asset registry, URL capture, and GSAP/Anime.js/CSS/Lottie/Three.js/WAAPI animation. Built specifically for AI coding agents. Requires HeyGen account for media generation.

podo/design-agent-skills

Design interfaces that survive translation, RTL scripts, and cultural difference. Per-language text-expansion table, full RTL mirroring rules, non-Latin typography, logical CSS properties, and cultural color/icon traps.

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community