Aktivierungsvertrag
Verwendung für Webseiten/Landingpages (beliebiges Stack) oder Code-renderte Videos (Showreel, Promo, Launch-Clip) in der Motion-Designer-Sprache: bündige flache Farbschnitte, ultra-fette breite Kapitälchen, Mono-HUD-Ecken, beat-getimte kinetische Bewegungen oder 3D-Riso-Druck-Shader. Nicht für Dashboards, Dokumentationsseiten oder formularlastige Apps.
Harte Regeln
- Alle nachfolgenden Pfade sind relativ zum Ordner dieser Skill-Konfiguration (
SKILL_DIR); Tools ausführen alsnode "$SKILL_DIR/assets/palette/palette.mjs" …. - Antworten in der Sprache des Benutzers; Webseiten-/Videotexte in der Sprache des Projekts schreiben.
- Intake VOR Design oder Code abschließen. Nie Hex-Werte hardcoden: Farbe kommt von
palette.mjs-Rollen-Tokens (ink,bone,action,machine,on-*,hud-on-*). - Text auf einer Fläche verwendet
on-<field>; niemals eineforbiddenPairs-Kombination als Text/Hintergrund rendern. - Ein Signature-Move pro Szene; laut/leise abwechseln; nie 3 gleiche Rollen-Felder hintereinander; Key-Posen halten ≥1 Beat; eine Easing-Familie.
- Web: transform/opacity animieren;
prefers-reduced-motionbeachten (statische Endzustände, keine Loops, keine Pins); Offscreen-Canvas pausieren; nur ab ≥1024px pinnen; kein Überlauf bei 375px. - Niemals Testimonials, Metriken oder Kunden erfinden; vorhandene Inhalte beibehalten.
- Anti-Slop-Liste ablehnen (
references/design-system.md§8).
Entscheidungsgates
| Situation | Aktion |
|---|---|
| Typografiegetrieben, flache Farbschnitte | Swiss Kinetic: design-system.md, assets/web, assets/video |
| 3D, haptisch, Poster/Druck | Riso Shader: shader-print.md, assets/shader/ |
| Beides | Hybrid: Shader-Feld hinter kinetischer Typografie auf flachen Flächen (on-*-Tokens) |
| Markenfarbe bekannt | `palette.mjs --brand "#HEX" --format css |
| Preset | --list (Name, Tags, Swatches anzeigen) → --preset <name> |
| Überrasch mich | Branche/Stimmung aus README, Kopie, CSS, Benutzerwörtern ableiten → --surprise --mood "<tags>" --seed <n>; Begründung angeben; ein erneuter Wurf via --exclude <name> |
| Webseite | references/web-techniques.md; assets/web/* an den Stack anpassen |
| Video | assets/video/reel-template/ kopieren; references/video-pipeline.md |
| Web + Video | Zuerst Video als Storyboard, dann Webseite aus denselben Szenen |
Ausführungsschritte
- Output erkennen (Web/Video/Beides) und Stack; vorhandene Inhalte und Marken-Assets einlesen.
- Intake, EINE Frage pro Runde: Stil (Swiss Kinetic / Riso Shader / Hybrid / Überrasch mich), dann Palette (Markenfarbe / Preset / Überrasch mich).
- Schriftarten aus Preset
fontPairingoderdesign-system.md§2. BPM: 120 bevorzugen (ganze Frames pro Beat bei 30 und 60fps; 144/150 bei 60fps); andere Tempi runden Beats auf Frames. - Szenentabelle schreiben
# | Szene | Feldrolle | Signature Move | Beatsmit dem kanonischen Rhythmus (§7). - Aus den passenden Assets bauen.
- QA: Web →
assets/qa/qa-screenshots.js(1440 + 390, Überlauf, Konsole), erst beurteilen, nachdem Animationen abgeschlossen sind; Video → Testframes, Vollrender,ffprobe, Kontaktbogen. - Ergebnisse melden und was nicht verifiziert werden konnte (z. B. Audio wird nie abgehört).
Output-Vertrag
Zurückgeben: Palette (+ Überraschungsgrund) und Kontrastzusammenfassung, Szenentabelle, erstellte/geänderte Dateien, QA-Nachweispfade, bekannte Einschränkungen.
Referenzen
references/design-system.md— Rollen, Typografie, Timing, Easing, Moves, Rhythmus, Anti-Slop.references/palettes.md— Intake, Presets, Token-Formate.references/web-techniques.md— GSAP/Lenis/Canvas, a11y, Performance.references/video-pipeline.md— deterministisches Canvas → Headless-Browser → ffmpeg, Audio.references/shader-print.md— WebGL2-Raytracing, 3-Farben-Halftone, Registerfehler.