Guide de lecture localisé
emil-design-engObjectif, utilisation et source
Cette compétence incarne la philosophie d'Emil Kowalski en matière de finition de l'interface utilisateur, de conception des composants, de choix d'animation et des détails invisibles qui rendent un logiciel agréable à utiliser.
Source récupérée:
- Dépôt source
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- Étoiles du dépôt
- 5,871
- Mise à jour du dépôt
- 2026-08-29
- Catégories de capacités
- Flux de travail de l'agent
- Dernière collecte
Licence : MIT
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Cette compétence incarne la philosophie d'Emil Kowalski en matière de finition de l'interface utilisateur, de conception des composants, de choix d'animation et des détails invisibles qui rendent un logiciel agréable à utiliser.
Comment fonctionne le flux de travail en amont
Quand utiliser des ressorts
Interactions par glisser-déposer avec inertie ; éléments qui doivent paraître « vivants » (comme Dynamic Island d’Apple) ; gestes pouvant être interrompus en cours d’animation ; interactions décoratives avec suivi de la souris.
passage en amont · L143 ↗Ingénierie de conception
Vous êtes un ingénieur concepteur doté d'un sens aigu du détail. Vous créez des interfaces où chaque élément contribue à une expérience utilisateur harmonieuse. Vous savez que, dans un monde où tous les logiciels se valent, c'est le goût qui fait la différence.
passage en amont · L6 ↗Le goût s'acquiert, il n'est pas inné.
Le bon goût n'est pas une question de préférence personnelle. C'est un instinct cultivé : la capacité de voir au-delà des apparences et de reconnaître ce qui sublime. On le développe en s'entourant d'œuvres remarquables, en réfléchissant profondément aux raisons de cette sensation de bien-être et en pratiquant sans relâche. Lors de la conception d'interfaces utilisateur, ne vous contentez pas de les rendre fonctionnelles. Analysez les mécanismes qui font le succès des meilleures interfaces. Décryptez les animations. Examinez les interactions. Soyez curieux.
passage en amont · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)Configuration requise
Aucun extrait de configuration n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sans dépendances. Consultez les instructions de configuration du dépôt et les fichiers référencés.
Limites et contrôles de qualité
Ne jamais animer à partir de l'échelle (0)
Rien dans le monde réel ne disparaît et ne réapparaît complètement. Les éléments s'animent à partir descale(0)On dirait qu'ils surgissent de nulle part. Commencez parscale(0.9)ou plus, combiné à une opacité. Même une échelle initiale à peine visible rend l'entrée plus naturelle, comme un ballon qui conserve une forme visible même dégonflé.
Commencez par un essai sans danger
- Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
- Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
- Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
- Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.
Pour en savoir plus, consultez la source.
- Ingénierie de conception
- Le goût s'acquiert, il n'est pas inné.
- Des détails invisibles s'assemblent
- La beauté est un levier
- Format de révision (obligatoire)
- Cadre de décision en matière d'animation
- 1Devrait-on animer cela ?
- 2Quel est le but ?
- 3Quel mécanisme d'amortissement doit-il utiliser ?
- 4À quelle vitesse devrait-elle être ?
- Performance perçue
- Animations printanières
- Quand utiliser des ressorts
- Interactions de souris basées sur le ressort
- Configuration du printemps
- Avantage d'interruptibilité
- Les boutons doivent offrir une bonne réactivité.
- Ne jamais animer à partir de l'échelle (0)
- Faites des popovers en tenant compte de leur origine
- Infobulles : suppression du délai lors des survols suivants
- Utilisez des transitions CSS sur les images clés pour une interface utilisateur interruptible.
- Utilisez le flou pour masquer les transitions imparfaites.
- Animez les entrées dans les états avec @starting-style
- translateY avec des pourcentages
- scale() met également à l'échelle les enfants.
- 3Transformations D pour la profondeur
- transform-origine
- chemin de découpage pour l'animation
- La forme encastrée
- Onglets avec des transitions de couleurs parfaites
Compétences connexes
Traduction et étendue
Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.
Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.
- Source épinglée
- Lire l'original ↗
- Source récupérée
- Commit source
cf865e94de7729751c747171785b6ce57e7b178c- Source SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b