Compétences emil-design-eng
📦

emil-design-eng

Sûr

Créez des interfaces soignées avec les conseils d'experts en design

La plupart des interfaces manquent des détails invisibles qui rendent un logiciel agréable à utiliser. Cette compétence applique des principes éprouvés d'ingénierie de design pour les animations, les transitions et la finition des composants afin de vous aider à créer des interfaces que les utilisateurs adorent.

Prend en charge: Claude Codex Code(CC)
🥉 72 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "emil-design-eng". Review this modal transition code: .modal { transition: all 300ms ease-in; transform: scale(0); transform-origin: center; }

Résultat attendu:

  • Change transition: all to transition: transform 200ms ease-out for GPU acceleration
  • Replace scale(0) with scale(0.95) and opacity: 0 for a more natural entrance
  • Switch ease-in to ease-out or a custom curve like cubic-bezier(0.23, 1, 0.32, 1)

Utilisation de "emil-design-eng". Should my sidebar navigation animate when expanding and collapsing?

Résultat attendu:

  • Apply the Animation Decision Framework: users interact with sidebar navigation tens of times per day. Consider a subtle height transition or skip animation entirely for keyboard-initiated toggles.
  • If animating: use ease-out at 200ms max duration, animate only transform and opacity, and ensure the animation is interruptible with CSS transitions.

Audit de sécurité

Sûr
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
Fichiers analysés
680
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
100
Sécurité
78
Conformité aux spécifications

Ce que vous pouvez construire

Polir les composants d'interface de production

Un développeur frontend examine ses composants modaux, tiroirs et info-bulles selon le Cadre de Décision d'Animation pour garantir un assouplissement, un timing et une interruptibilité appropriés.

Établir les normes d'animation du système de design

Un ingénieur designer utilise les sections Philosophie de Base et Maîtrise des Transformations CSS pour définir des jetons d'animation cohérents pour une bibliothèque de composants.

Résoudre les problèmes de performance d'animation

Un développeur rencontrant des images supprimées pendant le chargement des pages applique les conseils d'accélération matérielle et d'animation CSS vs JavaScript pour résoudre le goulot d'étranglement.

Essayez ces prompts

Examiner mon composant d'interface 
Examine ce composant bouton et dis-moi quelles améliorations d'animation et de transition le rendraient plus soigné.
Décider si cela devrait être animé 
Je construis une palette de commandes que les utilisateurs ouvrent plus de 100 fois par jour. Devrais-je ajouter une animation d'ouverture et de fermeture ? Applique le Cadre de Décision d'Animation pour décider.
Résoudre mes problèmes de performance d'animation 
Mes animations de tableau de bord supprimment des images pendant le chargement. J'utilise Framer Motion avec les propriétés abrégées x et y. Montre-moi comment corriger cela pour l'accélération matérielle.
Construire un système personnalisé de notifications toast 
Je veux construire un composant toast comme Sonner. Guide-moi à travers la stratégie de transition, le positionnement du toast avec translateY, le rejet basé sur l'élan et la gestion des cas limites pour la visibilité des onglets et les états de survol empilés.

Bonnes pratiques

  • Spécifiez toujours les propriétés CSS exactes dans les transitions au lieu d'utiliser transition: all
  • Utilisez les transitions CSS plutôt que les images clés pour tout élément d'interface qui peut être déclenché rapidement
  • Testez les animations sur de vrais appareils à pleine vitesse, au ralenti et image par image avant de livrer

Éviter

  • Utiliser transition: all qui déclenche des calculs de mise en page et de peinture coûteux
  • Animer depuis scale(0) qui semble naturel car rien dans le monde réel ne disparaît et réapparaît complètement
  • Utiliser ease-in pour les animations d'interface qui démarre lentement et donne l'impression que l'interface est lente

Foire aux questions

Qu'est-ce que le Cadre de Décision d'Animation ?
Un processus en quatre étapes pour évaluer chaque animation : 1) Doit-elle être animée en fonction de la fréquence d'utilisation, 2) Quel est le but, 3) Quel assouplissement utiliser selon l'entrée ou la sortie, 4) Quelle vitesse en fonction du type d'élément. Cela empêche les animations inutiles ou mal synchronisées.
Pourquoi éviter transition: all en CSS ?
Utiliser transition: all déclenche les étapes de mise en page et de peinture pour chaque changement de propriété. Spécifier des propriétés exactes comme transition: transform 200ms ease-out s'exécute sur le GPU et évite les recalculs coûteux, gardant les animations fluides.
Quand dois-je utiliser les animations CSS par rapport aux animations JavaScript ?
Utilisez les animations CSS pour les animations prédéterminées et statiques qui s'exécutent hors du thread principal. Utilisez les animations JavaScript comme Framer Motion pour les animations dynamiques et interruptibles qui répondent aux entrées utilisateur. Le CSS reste fluide sous charge tandis que le JavaScript peut supprimer des images.
Quelle courbe d'assouplissement dois-je utiliser pour les interactions d'interface ?
Utilisez ease-out pour les éléments qui entrent et ease-in-out pour les mouvements sur écran. Évitez les assouplissements CSS par défaut et utilisez des courbes personnalisées comme cubic-bezier(0.23, 1, 0.32, 1) pour une sensation plus forte et plus intentionnelle. N'utilisez jamais ease-in pour les animations d'interface.
Comment rendre les animations Framer Motion accélérées par le matériel ?
Évitez les propriétés abrégées x, y et scale qui s'exécutent sur le thread principal. Au lieu de cela, utilisez la chaîne de transformation complète comme animate={{ transform: 'translateX(100px)' }} qui s'exécute sur le GPU et reste fluide pendant les chargements de page.
Dois-je désactiver toutes les animations pour les utilisateurs sensibles au mouvement ?
Non. La réduction de mouvement signifie moins d'animations et plus douces, pas zéro. Conservez les transitions d'opacité et de couleur qui aident à la compréhension. Supprimez les animations de mouvement et de position en utilisant la requête média prefers-reduced-motion.

Détails du développeur

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📄 SKILL.md