Nouvelle compétence publiée par le designer Benji Taylor : permet aux agents de créer, avec React et CSS, des interfaces simplifiées « ressemblant à de vrais produits » pour les en-têtes de pages marketing, les cartes de fonctionnalités et les illustrations de documentation. Il peut s'agir d'illustrations statiques ou d'animations de démonstration de 10 à 16 secondes avec simulation de curseur. L'ensemble inclut une bibliothèque de composants, plusieurs dizaines d'exemples et des scripts d'enregistrement, permettant à l'agent de capturer le résultat final pour auto-vérification.
Audit de sécurité : Non audité
- Pas encore scanné
Justification
- Écrire le plan avant le code : définir la position et les dimensions (les références fournies par l'auteur sont d'environ 720 × 340 pour les en-têtes accompagnés de texte, et 400 × 300 pour les cartes), puis définir le thème et le niveau de fidélité, ensuite écrire 3 à 5 étapes (beats) plus un résultat final ; les versions destinées à s'intégrer dans une barre mobile nécessitent une variante compacte distincte.
- Exiger de partir d'un exemple « gold standard » le plus proche (cartes statiques, chat IA, erreurs de formulaire, réorganisation par glisser-déposer, interaction avec graphiques, édition de tableaux, etc.), utiliser
node scripts/film.mjspour capturer des images fixes et des séquences complètes, et les comparer côte à côte avec les exemples. - Lister les échecs courants : surcharge d'informations, aspect fil de fer (wireframe), fenêtre entière avec marges égales autour de la carte, tous les éléments ayant la même importance visuelle, ainsi que les icônes IA génériques violettes avec effets scintillants ; le texte réel ne doit apparaître que là où il est pertinent pour le récit, généralement à 3 à 7 endroits, le reste étant remplacé par des barres de remplissage.
- Le dossier
kit/fournit des composants tels que Stage, Window, Phone, et le script de curseur Act ; le répertoire de la compétence précise la licence MIT. - La compétence a été ajoutée à skills.sh il y a seulement 1 jours, avec 804 installations en 24 heures (indiquant uniquement le niveau d'attention).
Utilisation
- La commande d'installation s'affichera une fois l'audit réussi ; elle est déclenchée lorsqu'il est demandé de créer des animations de démonstration produit, des illustrations de cartes de fonctionnalités ou des interfaces factices (faux UI).
- Aucun compte ou service externe n'est requis ; nécessite React, react-dom et lucide-react. Les exemples utilisent
npm installetnpm run devpour la prévisualisation.
Risques
- Non audité pour cette période, classé fixe en niveau C, la commande d'installation n'est pas affichée ; SKILL.md demande à l'agent d'installer les dépendances via npm et d'exécuter le script d'enregistrement
film.mjsinclus dans la compétence, mais ces scripts n'ont pas été scannés ; la page skills.sh n'affiche ni SKILL.md ni les résultats d'audits tiers, cette lecture a été effectuée directement depuis le texte original sur GitHub. - Les exemples incluent des interfaces imitant des produits réels tels que Figma, Linear, Slack et Gmail, ainsi que leurs logos réels. SKILL.md exige d'emprunter uniquement les interactions, sans usurper l'identité d'autres produits ; lors de l'utilisation sur des pages propres, éviter toute confusion avec des captures d'écran d'autres produits.
- Le dépôt vient d'être publié et compte moins de dix étoiles ; le processus est long (planification, tournage, comparaison, relecture, rédaction de REHEARSAL.md), ce qui entraîne une forte consommation de tokens.