Fähigkeiten emil-design-eng
📦

emil-design-eng

Sicher

Erstellen Sie professionelle Benutzeroberflächen mit Expertenwissen für Design

Die meisten Oberflächen vermissen die unsichtbaren Details, die Software sich richtig anfühlen lassen. Dieser Skill wendet bewährte Design-Engineering-Prinzipien für Animationen, Übergänge und Komponenten-Polish an, um Ihnen zu helfen, Oberflächen zu erstellen, die用户 lieben.

Unterstützt: Claude Codex Code(CC)
🥉 72 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "emil-design-eng". Überprüfen Sie diesen Modal-Übergangscode: .modal { transition: all 300ms ease-in; transform: scale(0); transform-origin: center; }

Erwartetes Ergebnis:

  • Ändern Sie transition: all zu transition: transform 200ms ease-out für GPU-Beschleunigung
  • Ersetzen Sie scale(0) durch scale(0.95) und opacity: 0 für einen natürlicheren Eintritt
  • Wechseln Sie von ease-in zu ease-out oder einer benutzerdefinierten Kurve wie cubic-bezier(0.23, 1, 0.32, 1)

Verwendung von "emil-design-eng". Sollte meine Seitenleisten-Navigation beim Erweitern und Reduzieren animieren?

Erwartetes Ergebnis:

  • Wenden Sie das Animationsentscheidungs-Framework an: Benutzer interagieren mehrmals täglich mit Seitenleisten-Navigation. Erwägen Sie einen subtilen Höhenübergang oder überspringen Sie die Animation vollständig für tastaturinitiierte Umschalter.
  • Bei Animation: Verwenden Sie ease-out bei maximal 200ms Dauer, animieren Sie nur transform und opacity und stellen Sie sicher, dass die Animation mit CSS-Übergängen unterbrechbar ist.

Sicherheitsaudit

Sicher
v1 • 4/15/2026

All 153 static analyzer findings are false positives. The skill is a single markdown file (SKILL.md) containing design engineering documentation with CSS and JavaScript code examples. The backtick characters flagged as 'external_commands' are markdown code fence delimiters, not shell execution. URLs flagged as 'network' are documentation hyperlinks (animations.dev, easing.dev, easings.co), not runtime network requests. Blocker findings for 'weak cryptographic algorithm' and 'system reconnaissance' have no basis in this file which contains only UI design guidelines. No prompt injection or malicious content detected.

1
Gescannte Dateien
680
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
78
Spezifikationskonformität

Was du bauen kannst

Produktions-UI-Komponenten optimieren

Ein Frontend-Entwickler überprüft seine Modal-, Drawer- und Tooltip-Komponenten gegen das Animationsentscheidungs-Framework, um ordnungsgemäßes Easing, Timing und Unterbrechbarkeit sicherzustellen.

Designsystem-Animationsstandards festlegen

Ein Design-Ingenieur verwendet die Abschnitte Kernphilosophie und CSS-Transformations-Meisterung, um konsistente Animations-Tokens für eine Komponentenbibliothek zu definieren.

Animationsleistungsprobleme beheben

Ein Entwickler, der während des Seitenladens Bildabfälle erlebt, wendet die Hardwarebeschleunigung und die CSS-gegen-JavaScript-Animationsberatung an, um den Engpass zu lösen.

Probiere diese Prompts

Überprüfen Sie meine UI-Komponente 
Überprüfen Sie diese Button-Komponente und sagen Sie mir, welche Animations- und Übergangsverbesserungen sie optimierter machen würden.
Entscheiden Sie, ob dies animiert werden sollte 
Ich erstelle eine Befehlspalette, die用户 mehr als 100-mal pro Tag öffnen. Sollte ich eine Öffnungs- und Schließanimation hinzufügen? Wenden Sie das Animationsentscheidungs-Framework an, um zu entscheiden.
Beheben Sie meine Animationsleistung 
Meine Dashboard-Animationen verlieren Frames während des Seitenladens. Ich verwende Framer Motion mit den x- und y-Kurzeigenschaften. Zeigen Sie mir, wie ich dies für Hardwarebeschleunigung korrigiere.
Erstellen Sie ein benutzerdefiniertes Toast-Benachrichtigungssystem 
Ich möchte eine Toast-Komponente wie Sonner erstellen. Leiten Sie mich durch die Übergangsstrategie, Toast-Positionierung mit translateY, impulsbasiertes Schließen und Edge-Case-Handling für Tab-Sichtbarkeit und gestapelte Hover-Zustände.

Bewährte Verfahren

  • Geben Sie immer genaue CSS-Eigenschaften in Übergängen an, anstatt transition: all zu verwenden
  • Verwenden Sie CSS-Übergänge statt Keyframes für jedes UI-Element, das schnell ausgelöst werden kann
  • Testen Sie Animationen auf echten Geräten mit voller Geschwindigkeit, in Zeitlupe und Bild für Bild vor der Auslieferung

Vermeiden

  • Verwendung von transition: all, was teure Layout- und Paint-Berechnungen auslöst
  • Animation von scale(0), was unnatürlich wirkt, da nichts in der realen Welt vollständig verschwindet und wieder erscheint
  • Verwendung von ease-in für UI-Animationen, was langsam beginnt und die Oberfläche träge erscheinen lässt

Häufig gestellte Fragen

Was ist das Animationsentscheidungs-Framework?
Ein vierstufiger Prozess zur Bewertung jeder Animation: 1) Sollte sie überhaupt basierend auf Nutzungshäufigkeit animieren, 2) Was ist der Zweck, 3) Welches Easing basierend auf Eintritt oder Austritt, 4) Wie schnell basierend auf Elementtyp. Dies verhindert unnötige oder schlecht zeitlich abgestimmte Animationen.
Warum transition: all in CSS vermeiden?
Die Verwendung von transition: all löst Layout- und Paint-Schritte für jede Eigenschaftsänderung aus. Die Angabe genauer Eigenschaften wie transition: transform 200ms ease-out läuft auf der GPU und vermeidet teile Neuberechnungen, hält Animationen glatt.
Wann sollte ich CSS-Animationen gegenüber JavaScript-Animationen verwenden?
Verwenden Sie CSS-Animationen für vorbestimmte, statische Animationen, die außerhalb des Hauptthreads laufen. Verwenden Sie JavaScript-Animationen wie Framer Motion für dynamische, unterbrechbare Animationen, die auf Benutzereingaben reagieren. CSS bleibt unter Last glatt, während JavaScript Frames verlieren kann.
Welche Easing-Kurve sollte ich für UI-Interaktionen verwenden?
Verwenden Sie ease-out für eintretende Elemente und ease-in-out für Bildschirmbewegungen. Vermeiden Sie die Standard-CSS-Easing und verwenden Sie benutzerdefinierte Kurven wie cubic-bezier(0.23, 1, 0.32, 1) für ein stärkeres, gezielteres Gefühl. Verwenden Sie niemals ease-in für UI-Animationen.
Wie mache ich Framer Motion-Animationen hardwarebeschleunigt?
Vermeiden Sie die Kurzeigenschaften x, y und scale, die auf dem Hauptthread laufen. Verwenden Sie stattdessen den vollständigen Transformationsstring wie animate={{ transform: 'translateX(100px)' }}, der auf der GPU läuft und während Seitenladens glatt bleibt.
Sollte ich alle Animationen für Benutzer mit Bewegungsempfindlichkeit deaktivieren?
Nein. Reduzierte Bewegung bedeutet weniger und sanftere Animationen, nicht null. Behalten Sie Deckkraft- und Farbübergänge bei, die das Verständnis unterstützen. Entfernen Sie Bewegungs- und Positionsanimationen mithilfe der prefers-reduced-motion-Medienabfrage.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/emilkowalski/skill/tree/main/skills/emil-design-eng/

Ref

main

Dateistruktur

📄 SKILL.md