emil-design-eng
Peaufiner les interfaces avec les principes de l’ingénierie du design
Les détails d’interface peuvent sembler incohérents, lents ou visuellement déconnectés. Cette compétence applique des conseils pratiques sur le mouvement, l’interaction, les performances et l’accessibilité afin d’améliorer la finition de l’UI.
Installer avec mon Agent
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "emil-design-eng" from https://skillstore.io/skills/emilkowalski-emil-design-eng.md and its manifest at https://skillstore.io/api/skills/emilkowalski-emil-design-eng/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Ressources lisibles par les agents
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Tester
Utilisation de « emil-design-eng ». Examine un dropdown qui s’ouvre avec ease-in pendant 400ms et change d’échelle à partir de zéro.
Résultat attendu:
- Remplace l’entrée lente par une transition ease-out plus courte pour un retour immédiat.
- Commence près de la taille complète avec une opacité réduite afin que le dropdown conserve une continuité visuelle.
- Utilise la position du déclencheur comme origine de transformation.
Utilisation de « emil-design-eng ». Recommande le comportement d’animation pour une command palette ouverte de nombreuses fois chaque jour.
Résultat attendu:
Ouvre et ferme la palette sans animation. Les actions fréquentes au clavier doivent répondre immédiatement et éviter tout délai visuel répété.
Utilisation de « emil-design-eng ». Audite un drawer draggable qui s’arrête brusquement et ignore les paramètres de mouvement réduit.
Résultat attendu:
- Ajoute un amortissement progressif au-delà de la limite du drawer afin d’éviter un arrêt brutal.
- Capture le pointeur actif et ignore les touches supplémentaires pendant le glissement.
- Supprime le mouvement de position lorsque le mouvement réduit est activé, tout en conservant un retour d’opacité utile.
Audit de sécurité
SûrAll 97 static findings are false positives after contextual review of SKILL.md. The 90 command findings are Markdown delimiters or browser UI examples, not shell execution. The remaining findings are ordinary hyperlinks and design prose; no malicious intent or prompt injection was found.
Facteurs de risque
⚙️ Commandes externes (50)
🌐 Accès réseau (2)
Partager et citer ce rapport
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
Copier le lien du rapport
https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/emilkowalski-emil-design-eng?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/emilkowalski-emil-design-eng?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-emil-design-eng/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Carte intégrable
<iframe src="https://skillstore.io/embed/skills/emilkowalski-emil-design-eng.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citations académiques (APA · BibTeX · CFF)
Citation APA
emilkowalski. (2026). emil-design-eng security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5Citation BibTeX
@techreport{emilkowalski-emilkowalski-emil-design-eng-2026,
author = {emilkowalski},
title = {emil-design-eng security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "emil-design-eng security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "emilkowalski"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5"
identifiers:
- type: other
value: "skillstore:emilkowalski-emil-design-eng:audit:5"
description: "Skillstore immutable audit report identifier"
Score Skillstore
Pourquoi ce score Niveau de confiance des preuves: ÉlevéCe que vous pouvez créer
Examiner un composant frontend
Repérer les problèmes de mouvement, de retour utilisateur, d’accessibilité et de performances dans un composant avant sa publication.
Définir le mouvement du produit
Créer des règles d’animation cohérentes pour les interactions courantes dans une interface produit.
Affiner une bibliothèque de composants
Améliorer le comportement par défaut des buttons, tooltips, popovers, drawers, toasts et gestures.
Essayez ces prompts
Examine cette interaction de button. Il change d’échelle lors de l’appui et utilise une animation de 300ms. Identifie les améliorations ayant le plus d’impact.
Examine le code de composant suivant à l’aide d’un tableau markdown Avant, Après et Pourquoi. Concentre-toi sur l’easing, la durée, l’origine de transformation, le comportement hover et le mouvement réduit : [paste code]
Conçois le comportement du mouvement pour [component or workflow], utilisé [frequency]. Recommande ce qui doit être animé, le timing, l’easing, l’interruptibilité, l’accessibilité et l’approche de performance.
Audite les buttons, tooltips, popovers, drawers, toasts et drag gestures. Priorise les problèmes selon leur impact utilisateur. Explique les compromis et propose une spécification de mouvement cohérente : [paste requirements]
Bonnes pratiques
- Fournissez le code du composant, la fréquence d’interaction, les appareils cibles et le contexte produit.
- Testez le mouvement proposé avec du contenu réel, les paramètres de mouvement réduit, les entrées tactiles et du matériel moins performant.
- Utilisez les recommandations comme des hypothèses mesurables, puis comparez la vitesse perçue et l’accomplissement des tâches.
Éviter
- N’ajoutez pas d’animation uniquement à des fins décoratives aux actions fréquemment répétées.
- N’appliquez pas de valeurs de timing sans vérifier la personnalité du produit et l’objectif de l’interaction.
- Ne traitez pas les conseils d’animation comme un substitut aux tests de compatibilité navigateur et d’accessibilité.
Foire aux questions
Que vérifie cette compétence ?
Génère-t-elle des composants complets ?
Quelles technologies d’animation couvre-t-elle ?
Peut-elle examiner un système de design existant ?
Comment gère-t-elle le mouvement réduit ?
Ses recommandations de timing sont-elles universelles ?
Détails du développeur
Auteur
emilkowalskiLicence
MIT
Révision Skillstore
r2
Avis de version
L’auteur n’a déclaré aucune version.
Réf
c43861a65bb95efcae259cd161c9d6f4dc7eec6f
Récence de maintenance
25/07/2026
Utilisation
12 téléchargements · 100 vues
Structure de fichiers
📄 SKILL.md