Communitygithub.com

empro-labs-animations

Entwirft und erstellt erstklassige Web-Animationen als eigenständige, selbst enthaltene Demoseiten. Nutzt eine Wissensdatenbank aus 22 getesteten Beispielen, einer Mechanik-Bibliothek, einer Designsprache, einer Techniksammlung, Immobilien-Anwendungen und einer Qualitätsschwelle, um über die Beispiele hinaus neue Animationen zu entwickeln. Verwenden, wenn der Benutzer eine andere oder neue Animation, eine hochwertige animierte Website oder einen Abschnitt, einen Hover-, Scroll- oder Motion-Effekt im Referenzstil oder eine Animation für eine Immobilien- oder andere Geschäftsseite anfordert. Nicht geeignet für Produktions-Frameworks, Backend-Arbeiten oder Videorendering.

Was ist empro-labs-animations?

Dieses Skill für KI-Agenten (wie Claude Code, Cursor, Codex) ermöglicht das Entwerfen und Erstellen einer neuen, einzigartigen Web-Animation pro Seite, die als lokale Demo läuft. Es ist ideal für Entwickler, die anspruchsvolle, interaktive Effekte wie Hover, Scroll, 3D-Layer oder Physik-Animationen für Websites, insbesondere im Immobilienbereich, benötigen. Die Stärke liegt in der Fähigkeit, neue Animationen zu erfinden, anstatt bestehende zu kopieren, unterstützt durch eine umfangreiche Wissensdatenbank mit Referenzen zu Mechaniken, Designtechniken und Qualitätsstandards. Der Workflow umfasst das Lesen der Wissensdatenbank, das Skizzieren des Konzepts, die Auswahl von Schriftart und Farbpalette, die Implementierung der Mechanik, das Testen auf Fehler und Barrierefreiheit sowie die Qualitätskontrolle. Das Skill läuft lokal und erfordert Python für den Testserver. Es ist nicht für Produktionsumgebungen oder Backend-Aufgaben gedacht und erstellt nur Platzhalter-Markeninhalte.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aj9599995/Empro-Labs-Animation/tree/HEAD
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Empro Labs Animation

Entwirft und erstellt eine neue Animationsmechanik pro Seite. Jede Seite ist eine lokale, eigenständige Demo mit Platzhalter-Markentexten, sodass sie an jedes Unternehmen, einschließlich Immobilien, angepasst werden kann.

Anfrage

Die Benutzeranfrage aus dem Slash-Befehl:

$ARGUMENTS

Wenn die obige Anfrage leer ist, stellen Sie eine Frage: Welche Mechanik oder welcher Abschnitt soll erstellt werden, oder von welcher Referenz sollen wir lernen? Starten Sie dann den Workflow.

Wissensdatenbank (Lesen, nicht raten)

DateiLesen, wenn
references/thinking-process.mdImmer, bevor eine Mechanik ausgewählt wird. Wie man eine erfindet und begründet
references/used-designs.mdImmer. Bereits verwendete Familien, Schriftarten und Paletten, um Wiederholungen zu vermeiden
references/mechanic-library.mdImmer. 25 erstellte Familien und etwa 26 getestete Ideen, die noch nicht umgesetzt wurden
references/design-language.mdSchritt 3. Schriftpaarung, Palette, Layout- und Textregeln sowie was zu vermeiden ist
references/technique-recipes.mdSchritt 4. Funktionierende Bausteine: Tilt, FLIP, Partikel, Physik, WebGL, Audio und mehr
references/real-estate-applications.mdWenn das Briefing für einen Immobilien- oder Grundstücksabschnitt ist
references/premium-quality-bar.mdSchritt 6. Die Muss- und Soll-Liste sowie die Berichtsvorlage
references/build-and-test-process.mdSchritte 5 und 6. Benennungsregeln, Test-Checkliste, bereits bekannte Fehler
references/mechanics-catalogue.mdWenn Sie die Details eines bestehenden Beispiels benötigen
references/layered-stack-hyperframe.mdDie Anfrage ist ein geschichteter oder gestapelter 3D-Hover-Effekt

Regeln

  1. Erfinden, nicht wiederholen. Wählen Sie eine Mechanikfamilie, die nicht in used-designs.md ist, oder ändern Sie die Eingabe und die visuelle Idee genug, um den Neuheitstest in thinking-process.md zu bestehen.
  2. Nachbauen, nicht kopieren. Wenn der Benutzer auf eine Referenzseite verweist, studieren Sie ihr Verhalten und ihre Technik, schreiben Sie dann neuen Code, Texte und Layout. Kopieren Sie niemals Code, Text, Logo, Schriftarten oder Bilder einer anderen Seite.
  3. Platzhalter-Marke. Verwenden Sie erfundene Markentexte, es sei denn, der Benutzer liefert eine Marke. Fügen Sie keine E-Mails, Telefonnummern, Kundennamen oder echte Zahlen hinzu. Kennzeichnen Sie jede Demo als Konzept.
  4. Nur lokal. Server-Seiten auf localhost. Stellen Sie keine Verbindung zu GitHub, Vercel oder einem anderen Host her, es sei denn, der Benutzer fragt danach.
  5. Ein signifikanter Moment pro Seite. Alles andere bleibt ruhig.
  6. Vor dem Berichten testen. Keine Konsolenfehler, die Interaktion funktioniert, ein 375-Pixel-Bildschirm hat kein horizontales Scrollen, reduzierte Bewegung wird behandelt, und der Inhalt lesen sich ohne Bewegung. Sagen Sie, was Sie nicht getestet haben.
  7. Eindeutige IDs und präfixierte Klassennamen. Generische Namen wie .top oder .unit span zerstören Seiten.

Workflow

  1. Wissensdatenbank lesen für die Anfrage: thinking-process.md, used-designs.md, mechanic-library.md.
  2. Skizzieren Sie die Seite in der Antwort: Besucher und Ziel, Primitiv, Eingabe, signifikanter Moment, unterstützende Bewegung, Fallbacks. Verwenden Sie thinking-process.md Abschnitt 4.
  3. Designsprache auswählen: eine Anzeigeschriftart, die nicht in den letzten drei Zeilen von used-designs.md verwendet wurde, eine Akzentfarbe, eine Palette mit 4,5:1 Textkontrast. Verwenden Sie design-language.md.
  4. Ordner erstellen <mechanik>-site/. Kopieren Sie templates/starter-site/ hinein, ersetzen Sie dann den Text, die Palette, die Schriftarten und den signifikanten Moment. Bauen Sie die Mechanik aus technique-recipes.md.
  5. Server starten und testen mit python -m http.server <port> im Ordner. Verwenden Sie den nächsten freien Port ab 8000 aufwärts. Führen Sie die Checkliste in build-and-test-process.md bei 1440 px und 375 px aus.
  6. Bewerten gegen premium-quality-bar.md. Beheben Sie jedes fehlgeschlagene Muss-Element, bevor Sie berichten.
  7. Berichten mit der Vorlage in premium-quality-bar.md.
  8. Protokollieren: Wenn der Benutzer die Seite behält, fügen Sie eine Zeile zu used-designs.md hinzu und, wenn es sich um eine neue Familie handelt, markieren Sie sie als erstellt in mechanic-library.md.

Beispiele

examples/ enthält 25 ausführbare Demos, einschließlich des neutralen Layered-Stack-Beispiels. Um sie auszuprobieren, führen Sie python -m http.server 8000 in examples/ aus, öffnen Sie dann einen Ordner, z. B. http://localhost:8000/layered-stack-hyperframe/.

Vorlagen

OrdnerVerwendung
templates/starter-site/Ausgangspunkt für jede neue Seite. Layout, Tokens, Reveals, Tilt und reduzierte Bewegung sind bereits eingebunden

Fallback-Kette

  • Der Benutzer nennt eine Referenz, gibt aber keine Seite zum Studieren → nach der URL oder einer Bildschirmaufnahme fragen. Die Mechanik nicht aus dem Namen erraten.
  • Eine Mechanik benötigt eine Funktion, die der Browser nicht hat (WebGL, Web Audio, scroll-gesteuertes CSS) → zuerst den Fallback bauen, dann die Funktion, und angeben, welche Browser getestet wurden.
  • Keine Anfrage → zwei Familien aus mechanic-library.md vorschlagen, die noch nicht erstellt sind, und fragen, welche.
  • Die Anfrage betrifft eine reale Immobilie (echte Einträge, echte Preise, echte Fotos) → Platzhalterdaten verwenden, dies angeben und nach dem echten Inhalt fragen, bevor die Seite live geht.

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community