amirlehmam/amir-motion

Was macht amir-motion?

Amirs Hausregeln für Produktfilme. Der Film erklärt ein Produkt einem nicht-technischen Entscheidungsträger in 30 bis 60 Sekunden: ein Satz pro Schritt, das Produkt spricht, der Ton liegt am Bild, ein sauberer Schnitt in jedem Format und jeder Sprache, und nichts darin, was nicht uns gehört.

<skill-dir> unten ist der Ordner dieser Datei: ~/.claude/skills/amir-motion für Claude Code, ~/.agents/skills/amir-motion für Pi und andere Agenten.

"Einen Skill aufrufen" unten bedeutet: das Skill-Werkzeug in Claude Code, /skill:<name> in Pi, oder andernfalls <skills folder>/<name>/SKILL.md lesen und befolgen.

Drei Skills, ein Film. amir-motion besitzt die Regeln, die Vorlage, den Ton und das Gate. Es ruft zwei Skills an festgelegten Schritten auf:

Skill	Besitzt	Aufgerufen bei
stageshow	wie die Produkt-UI aussieht: Zurückhaltung, Bildausschnitt, Zuschnitt, Fokusobjekt, Cursor-Geschichte, Postergrafik	Schritte 1, 4
remotion-best-practices	wie Remotion verwendet wird: Projekt, Markup, Studio, Rendern, Untertitel, Upgrade (leitet zu remotion-* weiter)	Schritte 2, 5, 8

Wenn einer von ihnen einer Regel unten widerspricht, gewinnt die Regel (z. B. die zeitbasierte Act-API von stageshow kommt nie in einen Film: Regel 6).

Die 10 Regeln (bindend)

#	Regel	Harte Grenze
1	Weniger reden	Ein Satz pro Schritt, maximal 10 Wörter, einfache Worte für einen Entscheidungsträger. Eine Sache bewegt sich auf einmal. Insgesamt 30–60 s.
2	Zeit zum Lesen	Jeder Satz bleibt ≥ 1,5 s + 0,3 s pro Wort auf dem Bildschirm, ≤ 17 Zeichen pro Sekunde, in realen Sekunden nach dem Tempo. Text bewegt sich nie, während er gelesen wird.
3	Zeigen, nicht schreiben	Das Produkt erklärt; die Bildunterschrift benennt nur den Schritt. Baue die Produkt-UI in React nach (niemals ein Screenshot). Integrationen = Logos. Zahlen = Zähler oder Diagramme, nur echte.
4	Schrift passt zum Thema	Maximal 3 Familien (Display-Serife, UI-Sans, Mono). 3 Textgrößen (Display, Bildunterschrift, Label) aus theme.ts. Bildunterschrift ≥ 48 px, jedes UI-Wort, auf das die Geschichte zeigt, ≥ 30 px oder durch die Kamera herangeholt.
5	Kein Rot, eine Akzentfarbe	Rot nur für einen Fehler oder eine destruktive Aktion, es sei denn, es ist in der Markenfarbpalette. Eine Akzentfarbe, und sie bedeutet etwas (das Ergebnis, die Veränderung). Farben leben nur in theme.ts.
6	Eine Uhr	Jeder Beat ist eine Zahl in der eigenen Uhr seiner Szene. Bild, Bildunterschriften und Ton lesen dieselben Zahlen. Alles leitet sich vom Frame ab: keine CSS-Animation, kein Timer, Math.random, Date, keine stageshow Act-Laufzeit.
7	Reisen, nicht auflösen	Szenen bewegen sich wie eine Kamera (steigen, sinken, hineindrücken, zurückziehen), niemals ein grauer Überblendung. Sanfte Starts und Stopps (nur Tokens), Exits ≈ halber Eintritt, ein Held-Moment pro Film.
8	Ton ist die Hälfte des Films	Original synthetisierte Partitur in einer Tonart, auf der Zeitleiste aufgebaut; ein Cue für jede Ankunft, jeden Klick und jeden Höhepunkt, keiner für träge Bewegung. Master bei -14 LUFS integriert, Spitze ≤ -1 dBFS.
9	Jedes Format ist ein anderer Schnitt	16:9-Master plus ein neu komponiertes 9:16 (kein Zuschnitt), DE und EN aus einer Kopie-Datei. Frame 0 ist ein echtes Miniaturbild. Lesbar stummgeschaltet. Text innerhalb von 80 % des Bildrahmens.
10	Nichts, das nicht uns gehört	Kein früherer Kunde, internes Tool oder Marke Dritter irgendwo (Code, Kopie, Dateinamen, Bilder, Metadaten). Jedes Asset hat eine Quelle in ASSETS.md. Keine erfundene Zahl, kein Logo oder Erfahrungsbericht.

Vollständige Details und Zahlen: references/rules.md. Woher sie kommen: references/source.md.

Arbeitsablauf

0. Anamnese. node <skill-dir>/scripts/doctor.mjs. Es prüft Node (22.18+) und installiert stageshow und die Remotion-Skills aus ihren offiziellen Quellen, falls sie fehlen. Es installiert für Claude Code und Pi; --agent <id> für einen anderen Agenten. Wenn es etwas installiert hat, sag es: Die neuen Skills laden in der nächsten Sitzung; lies in der Zwischenzeit ihre SKILL.md-Dateien direkt.
1. Briefing. Fülle BRIEF.md mit dem Benutzer: Ziel, Zielgruppe, Versprechen (≤ 8 Wörter), Formate, Länge, Marke und ihre Quellen, Beweis. Dann das Beat-Sheet: eine Zeile pro Schritt (Bildunterschrift, was das Produkt zeigt, Ton). Handlungsbogen und Beispiele: references/brief.md. Für jede Produktszene plane sie auf die stageshow-Art: rufe stageshow auf und schreibe pro Szene das Fokusobjekt, die Aktion, den Höhepunkt, was weggelassen wird, und das nächstgelegene Goldbeispiel (hero-demo, payout-flow, choreography, table-edit, loading…). Zeige das Beat-Sheet und hole ein Ja, bevor eine Szene gebaut wird (Amir entscheidet über den Inhalt).
2. Gerüstbau. Rufe remotion-best-practices auf und halte seinen Router für den gesamten Build offen. Dann:

   node <skill-dir>/scripts/new.mjs <folder> --name "Product" --forbid "Former Client,internal.host" --install
   cd <folder> && npm run score && npm run dev
   

   Die Vorlage ersetzt den „Erstelle ein neues Projekt“-Schritt des Routers; folge seinem „Öffne die Vorschau“-Schritt (remotion-studio), damit der Benutzer den Build verfolgt. Verwende einen kurzen Pfad unter Windows (C:/Users/<ich>/<name>-motion): Headless Chrome scheitert nach 260 Zeichen. Karte der Vorlage: references/architecture.md.
3. Branding. Setze die Palette des Produkts, die Display-Schriftart und das Logo in theme.ts und public/, jeweils mit ihrer Quellenzeile in ASSETS.md. Bilde die eigenen Tokens des Produkts so ab, wie stageshows references/looks.md es tut. Keine Markenquelle? Frage nach. Erfinde niemals eine.
4. Produktszenen (stageshow). Für jede Szene, die das Produkt zeigt: Öffne das Goldbeispiel, das du in Schritt 1 benannt hast (<stageshow>/examples/<gold>/) und lies stageshows references/craft.md (Zurückhaltung, Typografie, Abstände, Symbole), references/framing.md (Zuschnitt, Ränder, Layouts) und references/motion.md (Geschichte, Cursor, Werte, die sich ändern). Baue es in Remotion mit theme.ts, AppWindow, cursorAt und toStage, übersetze jede stageshow-Bewegung mit der Tabelle in references/faux-ui.md. Kopiere die Struktur und Proportionen des Goldbeispiels, niemals seine Produktidentität.
5. Remotion-Markup. Bevor du Szenencode schreibst, lade remotion-markup über den Router; verwende remotion-captions für Wort-für-Wort-Untertitel, remotion-multimedia für echtes Filmmaterial, remotion-maps für Karten, remotion-interactivity, um Props im Studio verfügbar zu machen. Unter diesen Regeln.
6. Ton. Schreibe Cues in cues.ts auf denselben Beat-Nummern, lege das Arrangement in scripts/score.mts fest, führe npm run score aus. Details: references/sound.md.
7. Tägliche Kontaktabzüge. npm run stills rendert einen Kontaktabzug pro Schnitt (jede Szene nach ihrem Landen, ihre Mitte, bevor sie verlässt, plus Frame 0). Öffne die PNGs und betrachte sie mit stageshows Prüfungsblick (references/review.md dort): Wo landet das Auge zuerst, ist es das Ergebnis, ist irgendetwas eingerahmt, flach oder leer? Behebe und wiederhole. Beurteile Bewegung niemals in einem Browser auf einem Rechner mit reduzierter Bewegung.
8. Gate und Rendern. npm run lint, dann npm run audit. Behebe jedes FEHLER, gewichte jede WARNUNG. Dann npm run finish (Render-Optionen: remotion-render über den Router) und npm run audit erneut: Es misst Lautstärke, Größe und fps jeder MP4. Die Regeln 1, 3, 4 und 7 brauchen ein menschliches Auge: references/checklist.md.
9. Prüfung und Auslieferung. Gib die Blätter und das Briefing an einen Prüfer mit sauberem Kontext, bevor etwas das Haus verlässt. Liefere die MP4s, die Blätter, die verbleibenden WARNUNGEN und was nicht geprüft wurde. Formate und Benennung: references/delivery.md.

Rote Flaggen, stoppen und beheben

• Eine Bildunterschrift mit über 10 Wörtern oder zwei Bildunterschriften auf dem Bildschirm, die der Betrachter auf einmal lesen muss.
• Ein Satz, der erklärt, was das Produkt durch Handeln zeigen könnte.
• Ein Screenshot des Produkts, ein echter Kundenname, eine echte Ticketnummer, ein Logo, das nicht uns gehört.
• Ein stageshow Act, a.click() oder setTimeout, das in eine Szene eingefügt wurde, anstatt in Beats übersetzt zu werden.
• Eine Produktszene, die ohne ein benanntes stageshow-Goldbeispiel gebaut wurde.
• Ein Hex-Wert oder eine Schriftgröße, die innerhalb einer Szene eingegeben wurden.
• interpolate() ohne Easing bei etwas, das startet oder stoppt; alles, das gleichzeitig einblendet.
• Eine Frame-Nummer, die in Soundtrack.tsx eingegeben wurde, oder ein Ton, der zwischen zwei Beats landet.
• Ein Überblendung zwischen zwei dunklen Fenstern (grauer Nebel).
• Der 9:16-Schnitt, der durch Zuschneiden des 16:9 erstellt wurde.
• Ein leerer oder halb gezeichneter Frame 0.
• „Es sieht gut im Studio aus“: Nichts ist erledigt, bevor der Kontaktabzug und das Audit vorliegen.