Was macht cinematic-scroll-skill?
Agent-Fähigkeit zum Erstellen kinoreifer, scrollgesteuerter Websites anhand eines Briefings: visuelle Systeme, Bewegungs-Storyboards, Vanilla/GSAP-Demos und Next.js-Release-Seiten-Vorlagen.
Überblick
Diese Skill-Vorlage befähigt KI-Agenten, aus einem kreativen Briefing vollständige, kinoreife Scroll-Websites zu generieren. Sie gliedert den Workflow in vier klare Phasen: Entwicklung eines visuellen Systems, Erstellung eines Bewegungs-Storyboards, Bau einer funktionalen Vanilla-JavaScript- oder GSAP-Demo sowie die finale Umsetzung als Next.js-Release-Seite.
Workflow
- Visuelles System – Definiere Farbpalette, Typografie, Assets und Layoutraster basierend auf dem Briefing.
- Bewegungs-Storyboard – Skizziere Scroll-Trigger, Animationen und Übergänge für jede Sektion.
- Vanilla/GSAP Demo – Erstelle eine funktionale, interaktive Demo mit reinem JavaScript oder GSAP.
- Next.js Release-Seite – Verpacke die finale Version als Next.js-Komponente mit optimiertem Rendering.
Verwendung
# Skill in deinem Agenten laden (Beispiel für Claude Code)
claude use MustBeSimo/cinematic-scroll-skill
Voraussetzungen
- Node.js 18+
- npm oder yarn
- Grundkenntnisse in HTML/CSS/JavaScript
- Optional: GSAP für fortgeschrittene Animationen
Lizenz
MIT