106.9K+Download
Zur Nutzungsanleitung springen
CSS Animationvon neonwatty

CSS Animation Skill.

Erstelle HTML/CSS-Funktionsdemos auf Basis der Oberfläche einer realen Anwendung.

  • CSS
  • Keyframes
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · css-animationSKILL.md
Aufgabe Erstelle HTML/CSS-Funktionsdemos auf Basis der Oberfläche einer realen Anwendung. Ergebnisse Ein strukturiertes Briefing mit Design-Tokens, Geometrie und Szenentiming. Vor dem Start Der vorgesehene Workflow erwartet Claude-in-Chrome und eine zugängliche App. Eine andere Host-Umgebung benötigt einen gleichwertigen Prüfweg oder muss fehlende Nachweise benennen.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Erstelle HTML/CSS-Funktionsdemos auf Basis der Oberfläche einer realen Anwendung

Recherchiere eine App, schreibe ein Demo-Briefing und baue HTML/CSS-Walkthroughs mit getrennten Desktop-/Mobilansichten und Prüfung eingefrorener Zustände.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

css-animation erstellt browserbasierte Demonstrationen realer Anwendungsfunktionen. Zuerst untersucht der Skill die visuelle Sprache und das Layout der App. Danach plant er entweder eine Vorher-Aktion-Nachher-Demonstration oder ein Karussell aus mehreren Ansichten. Die Ausgabe ist eine eigenständig lauffähige HTML/CSS-Animation mit begleitendem Briefing.

Die Prüfung trennt die Korrektheit statischer Zustände vom Timing. Vorher- und Nachher-Layouts werden eingefroren und geprüft; anschließend wird der gesamte Loop abgespielt, um das Tempo abzustimmen. Desktop und Mobilgerät erhalten separate Kompositionen. Die mobile Variante vereinfacht die Szene und ersetzt den Mauszeiger durch eine Tippanzeige.

Erwartete Ergebnisse

  • Ein strukturiertes Briefing mit Design-Tokens, Geometrie und Szenentiming.
  • Eine eigenständig lauffähige HTML-Funktionsdemo oder ein Bildschirmkarussell.
  • Separate Desktop- und Mobil-Dateien, wenn beide angefordert werden.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Die echte Oberfläche untersuchen

    Untersuche die zugängliche App und ihre relevanten Zustände. Halte Farben, Typografie, Abstände und tatsächliche Geometrie im vorgesehenen Viewport fest.

  2. 02
    Die Demonstration planen und bauen

    Wähle eine einzelne Funktionsveränderung oder ein Karussell aus mehreren Ansichten. Schreibe das Briefing, berechne Elementpositionen und verwende CSS mit einer kleinen klassenbasierten Loop-Steuerung.

  3. 03
    Erst Standbilder, dann Timing prüfen

    Friere wichtige Zustände ein, um Layout und Beschriftungen zu prüfen. Sobald diese stimmen, spiele den gesamten Loop ab und passe gezielt die Phase an, die zu schnell oder langsam ist.

02 Einsatzbereiche

Wann einsetzen?

Der vorgesehene Workflow erwartet Claude-in-Chrome und eine zugängliche App. Eine andere Host-Umgebung benötigt einen gleichwertigen Prüfweg oder muss fehlende Nachweise benennen.

Gut geeignet

  • Eine echte Funktion braucht eine MarketingdemoDer Workflow leitet die visuelle Sprache aus der Anwendung ab, statt eine generische Oberfläche zu erfinden.
  • Mobilgeräte brauchen eine gezielte ErklärungDie Quelle vereinfacht das Layout ausdrücklich, statt die Desktop-Szene lediglich zu verkleinern.

Zu prüfende Grenzen

  • Recherche setzt Browserwerkzeuge vorausDer vorgesehene Workflow erwartet Claude-in-Chrome und eine zugängliche App. Eine andere Host-Umgebung benötigt einen gleichwertigen Prüfweg oder muss fehlende Nachweise benennen.
  • HTML ist das primäre ErgebnisDie dokumentierte Ausgabe ist eine Webanimation, keine codierte GIF- oder MP4-Datei.
  • Das Briefing ist ein PrüfpunktDie Quelle verlangt die Freigabe des Briefings vor der Generierung. Bestehende Nutzerfreigaben und der lokale Workflow bestimmen weiterhin, wie diese Prüfung erfolgt.

Diese Eingaben mitbringen

  • Zugriff auf die AppStelle die Funktions-URL oder eine lokale Vorschau sowie Zugriff auf die erforderlichen Zustände bereit.
  • FunktionsablaufBenenne Ausgangszustand, Aktion und das nützliche sichtbare Ergebnis.
  • Viewport und EinsatzortGib Desktop, Mobilgerät oder beides sowie den vorgesehenen Einsatzort der Dateien an.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. App-spezifisches Erscheinungsbild

    Gemessene Farben, Typografie und Geometrie machen die Demo wiedererkennbar.

  2. Nachvollziehbare Überarbeitung

    Das Briefing dokumentiert Layout- und Timingentscheidungen zusammen mit dem HTML.

  3. Getrennte Prüfprobleme

    Eingefrorene Zustände zeigen Layoutfehler, während die Wiedergabe Tempoprobleme sichtbar macht.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Quelle und Einrichtung prüfen

Stelle die Funktions-URL oder eine lokale Vorschau sowie Zugriff auf die erforderlichen Zustände bereit.

Upstream-Quelldatei
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Demonstriere mit css-animation die Gruppierungsfunktion meiner lokal laufenden Planungs-App. Untersuche die tatsächliche Funktion, bevor du eine Vorher-Aktion-Nachher-Animation entwirfst: ungruppierte Elemente, die Nutzeraktion, danach das geordnete Ergebnis. Übernimm Farben und Typografie der App und erhalte die tatsächlichen Beschriftungen. Erstelle ein Desktop-Briefing und eine separate mobile Komposition mit Fokus auf die Kernaktion. Verwende mobil eine Tippanzeige. Prüfe eingefrorene Anfangs-, Verarbeitungs- und Endzustände, bevor du den vollständigen Loop abstimmst. Liefere Briefing und HTML-Dateien und benenne App-Verhalten, das du nicht untersuchen konntest.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Vergleiche eingefrorene Layouts und Beschriftungen mit der tatsächlichen Anwendung.
  • Prüfe die Inhaltsgrenzen der Desktop- und Mobilkomposition unabhängig voneinander.
  • Sieh dir nach den Zustandskorrekturen den gesamten Loop an, um das Tempo zu bewerten.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
neonwatty
Repository
neonwatty/css-animation-skill
Skill-Datei
SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-11-02 · 68580a34101c
Redaktionelle Quellenzusammenfassung
Erstelle HTML/CSS-Funktionsdemos auf Basis der Oberfläche einer realen Anwendung.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Ist das Ergebnis ein Video?

Das primäre Ergebnis der Quelle ist eigenständiges HTML/CSS mit minimalem JavaScript. Die Videocodierung gehört nicht zum dokumentierten Standardumfang.

Können Desktop und Mobilgerät dasselbe skalierte Layout nutzen?

Die Quelle empfiehlt getrennte Dateien und eine gezielte mobile Vereinfachung, darunter weniger Elemente und auf Berührung ausgelegte Aktionsanzeigen.

Was passiert, wenn sich die App nicht untersuchen lässt?

Die ursprünglichen Anweisungen legen die Lücke bei den Browserwerkzeugen offen und erlauben, anhand einer Nutzerbeschreibung fortzufahren. Ein solches Ergebnis darf keine durch Beobachtung belegte Übereinstimmung mit einer unzugänglichen App beanspruchen.

OpenDesign

Briefing und Designarbeit an einem Ort.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md