Erstellen Sie animierte GIFs, die den Slack-Größenbeschränkungen entsprechen. Erstellen Sie Animationen mit zusammensetzbaren Primitiven wie Schütteln, Hüpfen, Drehen, Pulsieren, Ein-/Ausblenden, Zoomen und Explodieren. Validiert Dateigröße und Abmessungen für Emoji- und Nachrichten-GIFs.

Bilder verlieren oft während der Komprimierung oder Bearbeitung an Qualität. Dieser Skill verbessert Auflösung, Schärfe und Klarheit, während die Originale erhalten bleiben. Perfekt für die Erstellung professioneller Grafiken aus jedem Bild.

Die Erstellung visueller Assets erfordert spezialisierte Tools und Designfähigkeiten. Diese Fähigkeit ermöglicht KI-gestützte Bilderstellung und -bearbeitung über OpenRouter und unterstützt FLUX- und Gemini-Modelle für die Erstellung von Fotos, Illustrationen, Kunstwerken und visuellen Konzepten.

Generischer KI-generierter Frontend-Code mangelt oft an kreativer Vision und einprägsamer Ästhetik. Diese Skill leitet Claude an, produktionsreife, visuell beeindruckende Oberflächen mit mutigen Designentscheidungen, einzigartiger Typografie und kohärenter ästhetischer Ausrichtung zu erstellen.

Benutzer haben Schwierigkeiten, anspruchsvolle visuelle Designs in Museumsqualität zu erstellen. Diese Skill bietet einen strukturierten Ansatz zur Designphilosophie, der die Erstellung originaler, künstlerischer visueller Werke im PNG- oder PDF-Format unterstützt.

Erstellen Sie professionelle Dokumente und Präsentationen mit der Markenidentität von Anthropic. Diese Skill stellt offizielle Farb- und Typografierichtlinien bereit, um eine konsistente visuelle Gestaltung all Ihrer Artefakte zu gewährleisten.

Web-Barrierefreiheits-Probleme können Nutzer mit Behinderungen vom Zugang zu Ihrer Website ausschließen. Diese Anleitung bietet umfassende Unterstützung für die Implementierung von WCAG 2.1-Standards, ARIA-Attributen und Tastaturnavigation, um inklusive Erlebnisse für alle Nutzer zu schaffen.

Das manuelle Extrahieren von Design-Tokens aus Screenshots und Mockups ist zeitaufwändig und fehleranfällig. Diese Fähigkeit verwendet einen 7-Pass-KI-Prozess, um systematisch Farben, Typografie, Abstände, Komponenten und Barrierefreiheitsdetails in das standardisierte W3C DTCG-JSON-Format zu extrahieren, das für die Codegenerierung bereit ist.

Generische Schriftarten machen Designs amateurhaft. Diese Fähigkeit bietet Experten-Richtlinien für Typografie, um visuell ansprechende und professionelle Text-Layouts mit kuratierten Schriftempfehlungen zu erstellen.

KI-Assistenten erzeugen oft generische, visuell langweilige Frontends, die Nutzer als 'KI-Einheitsbrei' bezeichnen. Diese Skill bietet Designanleitung für Typografie, Farbschemata, Bewegung und Hintergründe, um unverwechselbare, ausgefeilte Oberflächen zu schaffen, die herausstechen.

Figma MCP generiert Code mit proprietären Variablen wie var(--spacing-4), die Wartungsprobleme verursachen. Diese Skill bietet klare Konvertierungsregeln, um diese Variablen in standard Tailwind CSS-Klassen umzuwandeln, für sauberen, wartungsfreundlicheren Frontend-Code.

Web-Animationen scheitern oft an Barrierefreiheitstests und beeinträchtigen die Performance. Diese Skill bietet produktionsreife GSAP-Muster, die Benutzerpräferenzen respektieren und 60fps aufrechterhalten.

Erstellen Sie visuell konsistente Präsentationen mit professionell kuratierten Farbpaletten und Schriftkombinationen. Sparen Sie Zeit, indem Sie fertige Themes anwenden, anstatt von Grund auf neu zu gestalten.

Das Erstellen animierter GIFs für Slack ist aufgrund strenger Größenbeschränkungen und Formatanforderungen herausfordernd. Dieser Skill bietet Validatoren zur Überprüfung von Slack-Einschränkungen, zusammensetzbare Animationsprimitive und Dienstprogramme zum Erstellen professioneller animierter GIFs und Emojis, die den Plattformspezifikationen entsprechen.

Benutzer haben Schwierigkeiten, komplexe visuelle Designkonzepte an KI-Assistenten zu kommunizieren. Diese Skill bietet ein strukturiertes Design-Philosophie-Framework, das abstrakte Ideen in anspruchsvolle visuelle Kunst im PNG- oder PDF-Format umwandelt.

Fügen Sie polierte Animationen zu Landingpages und Demos hinzu, ohne Leistung oder Barrierefreiheit zu beeinträchtigen. Die Visual Engine Skill übernimmt automatisch Timing, Easing und sichere Bewegungsmuster.

Marketingteams haben Schwierigkeiten, Ideen in videofähige Pläne umzusetzen. Dieser Skill bietet strukturierte Frameworks für Hooks, Skripte, Shotlists und plattformspezifische Richtlinien für YouTube, TikTok, Instagram und LinkedIn.

Generiert konsistente, barrierefreie UI-Komponenten, die den Richtlinien des Design-Systems folgen. Gewährleistet visuelle Unterscheidbarkeit, Markenkonformität und Barrierefreiheit für jede Komponente.

Die Erstellung konsistenter und responsiver Styles für React-Anwendungen erfordert das Verständnis mehrerer CSS-Ansätze. Diese Fähigkeit bietet sofort einsetzbare Patterns für Tailwind CSS, CSS Modules und Komponentenvarianten, die die Entwicklungsgeschwindigkeit verbessern.

Schluss mit dem manuellen Programmieren von UI-Komponenten von Grund auf. Dieser Skill generiert barrierefreie, responsive UI-Komponenten und Feedback-Formulare mit shadcn/ui und modernen Best Practices.