Communitygithub.com

berhjoan/motion-system

Meister-Guide für visuelle Produktion und Motion Design in JEDEM Projekt – MOTION.md als visuelle Verfassung, Brief und Storyboard vor der Animation, Musik als redaktionelle Uhr, deterministisches und editierbares Motion (HyperFrames für Videostücke, After Effects via MCP nur bei .aep) und der QA-Zyklus für Frames und Render. Vor dem Entwerfen, Animieren, Generieren, Bearbeiten oder Rendern visueller oder bewegter Elemente verwenden (Produktvideos, Demos, Launches, Reels, UI-Animationen, Hilfevideos), bei der Vorbereitung eines Repositorys als „MOTION-READY“ oder wenn der Benutzer MOTION.md, HyperFrames, Motion Design oder After Effects erwähnt.

Was ist motion-system?

Das Claude Motion System ist ein umfassender Agenten-Skill für die Produktion von Motion Design und visuellen Inhalten. Es stellt sicher, dass jede Bewegung – ob in Produktvideos, Demos, Reels, UI-Animationen oder Hilfevideos – die Information, Hierarchie, Erzählung und Marke verstärkt, anstatt bloße Dekoration oder generische KI-Demo zu sein. Der Skill ist für Claude Code, Cursor, Codex und ähnliche KI-Assistenten konzipiert. Er definiert einen strengen Workflow: Zuerst wird das Projekt analysiert und klassifiziert (A: kein Motion nötig, B: App mit Demo-Potenzial, C: aktives Motion/Video mit HyperFrames, D: After Effects mit MCP). Dann wird eine `MOTION.md` (die visuelle Verfassung) erstellt oder aktualisiert, gefolgt von `BRIEF.md` und `STORYBOARD.md`. Die Musik dient als redaktionelle Uhr. Die Implementierung erfolgt deterministisch und editierbar mit HyperFrames oder dem vorhandenen Motion-Engine des Projekts. Ein obligatorischer QA-Pipeline (doctor → lint → check → Snapshots → Preview → Render → ffprobe) stellt die Qualität sicher. Der Skill vermeidet technische Schulden, indem er keine Video-Abhängigkeiten in Nicht-Video-Projekten installiert und nur mit echten Marken-Assets arbeitet.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/berhjoan/claqueta/tree/HEAD/library/skills-propias/motion-system

In Ihrer bevorzugten KI fragen

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

Dokumentation

Claude Motion System — Meister-Guide für den Benutzer

Der vollständige Guide befindet sich in GUIA-MAESTRA.md (gleicher Ordner, 20 Abschnitte). Lade ihn nicht vollständig: lies den Abschnitt, den die Aufgabe benötigt (suche die Überschrift # N. mit Grep und lies diesen Abschnitt).

Hauptregel (§0)

Bevor du ein visuelles Element eines Projekts entwirfst, generierst, animierst, editierst oder renderst, lies MOTION.md vollständig (Stammverzeichnis des Repositorys). Wenn es nicht existiert, leer ist oder nicht mehr das tatsächliche Design repräsentiert, führe zuerst ein Audit des Projekts durch und erstelle oder aktualisiere es. Motion verstärkt Information, Hierarchie, Erzählung und Marke; es ist niemals Dekoration oder eine generische KI-Demo.

Routine

  1. Entdecken (§3): README, CLAUDE.md, package.json, CSS/Tailwind-Tokens, Komponenten und Layouts, Logos, Schriftarten, Assets, Screenshots, Figma, vorhandene Videos und Audio. Beantworte: Persönlichkeit, dominante und funktionale Farben, tatsächliche Schriftarten, Hierarchie, welche Bewegung konsistent ist und was sich nie ändern darf.
  2. Klassifizieren (§3): A ohne Bewegungsbedarf (nichts installieren) · B App mit Demo-Potenzial (MOTION.md erstellen, ohne Videoprojekt) · C aktives Motion/Video (HyperFrames und QA vorbereiten) · D mit After Effects (zusätzlich AE-MCP).
  3. MOTION.md (§5): Zweck, Identität, Farbe, Typografie, Raster, Bewegungssprache (Principien, Timing, Easing, Verbote), Motion pro Komponente, Kamera/3D, Audio, Schnitte, Formate und Qualitätsanforderung. Wird ausgehend von der ECHTEN Identität erstellt; ergänzt das Designsystem, ersetzt es nicht. Wenn sich das Produkt geändert hat, wird es vor der Produktion korrigiert.
  4. Neues Stück: BRIEF.md (§6) → STORYBOARD.md (§7). Jede Szene erfüllt eine narrative, informative oder markenbezogene Funktion.
  5. Audio (§8): die Musik ist die redaktionelle Uhr – zuverlässige Beats, Phrasen, Drops, Stille; kein Aufzwingen eines Beat-Rasters.
  6. Implementieren (§9): HyperFrames (/hyperframes als Eingabe) oder die Engine, die das Projekt bereits hat. Keine Engines duplizieren (§13): Wenn das Repository bereits eine eigene Motion-Engine hat, wird diese verwendet.
  7. QA (§11): doctor → lint → check → Snapshots kritischer Frames (ansehen) → vollständige Vorschau → Render → ffprobe und Überprüfung der finalen Datei. Nie „fertig“ nur weil es kompiliert.
  8. Kriterium „sieht nicht billig aus“ (§12) und Definition von „fertig“ (§17): MOTION-READY und DELIVERY-READY.

Sicherheitsregeln und technische Schulden

  • Keine Video-Abhängigkeiten in Projekten installieren, die kein Video produzieren (§3, §13).
  • npx von Drittanbietern (HyperFrames, After Effects MCP) nur bei Produktion und mit Zustimmung der Benutzerin verwenden.
  • After Effects per MCP nur, wenn eine .aep-Datei existiert oder die Ausgabe es erfordert; vor dem Bearbeiten Backup erstellen (§10).
  • Echte Marken-Assets verwenden; niemals Logos, Daten, Screenshots oder Behauptungen erfinden (§15). Kundendaten niemals in visuellen Stücken ohne Genehmigung verwenden.
  • Formatabhängig neu komponieren (16:9, 9:16, 1:1), niemals blind zuschneiden (§16).

Index des Guides

§Thema
0Meisterordnung
1Was das Video lehrt (HyperFrames, MOTION.md, Musik, After Effects)
2Globale + projektbezogene Architektur
3Bootstrap: Entdecken und Klassifizieren
4HyperFrames installieren/überprüfen
5Vorlage für MOTION.md
6BRIEF.md
7STORYBOARD.md
8Audio als redaktionelle Uhr
9Implementierung mit HyperFrames
10After Effects per MCP
11Verbindliche QA-Pipeline
12Kriterium „sieht nicht billig aus“
13Keine technischen Schulden
14Empfohlene Organisation
15Asset-Richtlinie
16Multiformat
17Definition von „fertig“
18Einzigartiger Prompt zur Vorbereitung eines Repositorys
19Referenzbefehle
20Abschließendes Prinzip

Individual skills in this repo

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

Verwandte Skills