Prototypes

ui-demo vous aide à enregistrer des démos d’app web soignées avec Playwright, un mouvement de curseur visible et un rythme naturel. Utilisez la skill ui-demo pour des démonstrations pas à pas, des vidéos d’onboarding, des présentations de fonctionnalités et des enregistrements de type tutoriel. Suivez le workflow découvrir, répéter, puis enregistrer pour obtenir des résultats fiables, en particulier sur des prototypes et des interfaces qui évoluent vite.

frontend-slides vous aide à créer des présentations HTML riches en animations, à partir de zéro ou en convertissant des fichiers PowerPoint. Utilisez le skill frontend-slides pour des conférences, des pitch decks, des ateliers, des démos internes et frontend-slides pour la conception d’interface quand vous voulez explorer visuellement, obtenir un rendu navigateur sans dépendance et des slides qui tiennent sur une seule vue.

algorithmic-art aide à créer des œuvres génératives originales en p5.js avec un flux en deux étapes : définir une philosophie algorithmique, puis produire des fichiers `.html` et `.js` exécutables avec hasard déterministe, contrôles de paramètres et visualiseur interactif.

ux-designer est une skill de conception UX structurée dédiée à la recherche, à l’accessibilité, à l’architecture de l’information, aux parcours d’interaction, au cadrage de wireframes et à la rédaction UX. Elle aide les équipes à transformer des idées produit encore floues en décisions de design plus claires et fondées sur des critères, grâce à `AGENTS.md` et à des fichiers de règles ciblés.

Le skill prototype vous aide à créer du code jetable qui répond à une question précise avant de vous engager dans une vraie implémentation. Utilisez-le pour tester la logique, les transitions d’état, la forme des données ou une orientation UI avec un prototype exécutable qui respecte les conventions du dépôt hôte. Il est idéal quand vous avez besoin d’un guide de prototype rapide, pas d’une fonctionnalité finale.

Utilisez figma pour extraire le contexte design, les captures d’écran, les variables et les assets depuis le serveur MCP Figma, puis traduire les nœuds Figma en décisions d’UI prêtes à implémenter. Cette compétence figma est idéale si vous avez une URL Figma ou un ID de nœud et que vous avez besoin d’une utilisation précise de figma pour un travail design-to-code, la configuration ou le dépannage.

brandkit est une skill haut de gamme de génération d’images pour kits de marque, pensée pour les travaux de branding : systèmes de logos, dossiers d’identité, planches de guidelines visuelles et présentations de marque avec direction artistique. Elle est conçue pour produire des résultats cohérents, au style studio, pour les startups, les outils pour développeurs, la cybersécurité, le gaming, les apps grand public et les concepts luxe. Utilisez brandkit quand vous voulez un univers de marque soigné plutôt qu’un moodboard IA générique.

shader-dev est un skill GLSL pratique pour des visuels temps réel à la ShaderToy. Utilisez le skill shader-dev pour créer ou déboguer du ray marching, des scènes SDF, l’éclairage, des particules, le mouvement fluide, le post-traitement et le shader-dev pour la conception d’interface, avec moins d’approximation qu’avec un prompt générique.

Utilisez le skill remotion pour transformer des écrans de projet Stitch en vidéos de démonstration soignées, avec transitions, zooms et superpositions de texte. Il inclut les étapes d’installation, des fichiers d’exemple et un guide remotion reproductible pour le montage vidéo et des compositions prêtes au rendu.

pol-probe-advisor aide les chefs de produit à choisir la bonne sonde Proof of Life (PoL) pour une hypothèse, un risque et un niveau de ressources donnés. Utilisez la compétence pol-probe-advisor pour éviter de surconcevoir et aligner la méthode de validation la moins coûteuse qui reste utile avec le véritable objectif d’apprentissage. Idéal pour pol-probe-advisor en Product Management, avec un guide pratique et des indications d’usage.

La skill storyboard transforme une idée produit en un récit en six vignettes, qui va du problème à la solution. Utilisez-la pour aligner les parties prenantes, passer en revue un concept, préparer des démos et faire un storyboard pour les prototypes lorsque vous avez besoin d’une méthode rapide et centrée sur l’humain pour vérifier si une idée résonne.

pol-probe vous aide à définir une probe Proof of Life pour tester à moindre coût une hypothèse risquée avant de construire un vrai produit. Utilisez la skill pol-probe pour réduire le théâtre du prototype, fixer des critères de réussite exigeants, choisir le bon type de probe et prévoir sa mise au rebut après apprentissage.

hyperframes-registry vous aide à installer et à brancher des éléments de registre HyperFrames réutilisables avec moins d’hésitation. Utilisez-le pour exécuter `hyperframes add`, distinguer les blocks des components, fusionner des extraits, relier des blocks dans `index.html` et suivre les mappages de chemins de `hyperframes.json` pour l’implémentation design et la découverte du registre.

gsap est une référence pratique d’animation pour les compositions HyperFrames. Elle vous aide à choisir entre `gsap.to()`, `from()`, `fromTo()` et `gsap.timeline()`, puis à appliquer les bons `vars`, `easing`, `stagger`, transformations et patterns de performance. Utilisez ce guide gsap quand vous avez besoin d’animations prêtes à implémenter pour des entrées, des transitions et des effets de design réutilisables.

excalidraw-diagram crée des diagrammes JSON Excalidraw qui défendent une idée visuellement, au lieu de simplement afficher des boîtes et des flèches. Utilisez-le pour des workflows, des architectures, des enchaînements de séquences, des parcours de décision et des diagrammes de concepts lorsque la structure, la lisibilité et les relations réelles comptent. Il inclut des indications d’installation, des vérifications adaptées au rendu et un flux de travail pratique pour améliorer la qualité des diagrammes.

infocard vous aide à créer des cartes d’information au style éditorial en Markdown, en intégrant directement du HTML et du CSS dans la page. C’est utile pour des résumés, des aperçus de sujets, des panneaux de mise en avant, des cartes d’événements, des blocs de comparaison et d’autres contenus pensés pour un design UI soigné. En revanche, ce n’est pas adapté aux schémas ni à la visualisation de données ; utilisez plutôt une compétence dédiée aux diagrammes ou aux graphiques.

canvas crée des diagrammes JSON Canvas avec positionnement libre et coordonnées x/y explicites. Utilisez-le pour des cartes mentales, graphes de connaissances, cartes conceptuelles, tableaux de planification et autres workflows de diagramme où la disposition spatiale compte plus que l’ordre de lecture. Ce n’est pas le bon choix pour les organigrammes ou les graphiques de données. Utilisez la skill canvas lorsque vous avez besoin de nœuds modifiables, de liens et d’une structure de mise en page.

imagegen-frontend-mobile est un skill de direction d’images pour des écrans d’apps mobiles premium et des parcours multi-écrans. Il aide à créer des visuels natifs d’application pour iOS, Android et des concepts multiplateformes, avec une hiérarchie claire, un texte lisible, une palette maîtrisée et des maquettes de téléphone discrètes. À utiliser pour la génération d’images, pas pour du code, des sites web ou des interfaces desktop.

gpt-taste est une skill orientée design pour créer des pages UI soignées, avec une direction artistique éditoriale, une discipline des espacements et des animations GSAP. Utilisez la skill gpt-taste pour des pages marketing, des landing pages et des sites vitrine lorsque vous voulez plus de variété dans les mises en page, un meilleur contrôle de la typographie et moins de patterns front-end génériques. Le guide inclut des notes d’installation et d’utilisation pour une mise en œuvre pratique.

Le skill hand-drawn-diagrams transforme des prompts en langage naturel en diagrammes Excalidraw dessinés à la main, schémas de flux, explications visuelles, wireframes et maquettes de pages. Il valide la sortie et peut renvoyer une URL d’édition ainsi que des images exportables. Idéal pour diagrammer rapidement quand vous voulez un rendu esquissé, pas un visuel vectoriel léché.

world-builder est un skill centré sur la conception, destiné à créer et gérer des zones de jeu génératives dans l’overworld façon Pokémon de Dorothy. Utilisez le skill world-builder pour transformer un thème, un concept ou une idée de lieu en carte jouable, avec ambiance, disposition, terrain, placement des PNJ et logique spatiale pour Design Implementation.

gif-sticker-maker transforme des photos en 4 stickers GIF animés dans un style Funko Pop / Pop Mart, à l’aide de MiniMax Image Generation, MiniMax Video Generation et ffmpeg. Cette skill gif-sticker-maker couvre les prérequis d’installation, les modèles de prompts, les légendes et tout le flux de travail de l’image au GIF.

figma-create-new-file crée un nouveau fichier Figma ou FigJam vierge dans les brouillons, avec des valeurs par défaut pour le type d’éditeur et le nom du fichier. Ce skill figma-create-new-file aide à l’implémentation de design, au prototypage rapide et au démarrage d’une toile vierge avant use_figma. Il gère aussi la résolution de planKey via whoami lorsque c’est nécessaire.

figma-use est la compétence requise pour exécuter en toute sécurité des appels `use_figma` dans les workflows de l’API des plugins Figma. Utilisez la compétence figma-use pour l’installer et la charger avant d’écrire, mettre à jour, inspecter ou structurer des fichiers Figma avec JavaScript. Elle est particulièrement utile pour l’implémentation de design, le travail sur les composants, les variables, l’auto layout et la lecture programmatique de fichiers.