Design Systems

Utilisez frontend-design pour créer des interfaces frontend distinctives, prêtes pour la production, avec une vraie intention visuelle. Ce skill frontend-design est pensé pour les landing pages, les dashboards, les shells d’app et les composants où la hiérarchie, la typographie, le mouvement et la finition comptent autant que l’implémentation. Il inclut des নির্দেশications d’installation et d’utilisation pour un travail UI centré sur le design.

compose-multiplatform-patterns est un guide pratique pour Compose Multiplatform et Jetpack Compose dans les applications KMP. Il couvre la gestion d’état, la navigation, le theming, les performances et des patterns d’UI réutilisables pour Android, iOS, Desktop et le Web, afin d’aider les équipes frontend à construire des écrans partagés maintenables.

frontend-design transforme des idées d’interface floues en UIs distinctives, prêtes pour la prod, avec du vrai code frontend, une direction esthétique claire et moins de style IA générique.

brand-guidelines fournit aux agents les couleurs et règles typographiques de la marque Anthropic pour retravailler documents, slides, HTML et autres contenus textuels. À utiliser après la rédaction pour appliquer une mise en forme cohérente, une hiérarchie typographique claire et une palette fidèle à la marque.

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.

vercel-react-native-skills est une skill React Native et Expo pensée pour le développement frontend orienté performance. Utilisez-la pour améliorer le rendu des listes, les animations, la navigation, les patterns d’interface, la gestion d’état et la mise en place de modules natifs. Elle propose des règles concrètes, des conseils d’installation et des schémas d’utilisation pour traiter les goulots d’étranglement des applications mobiles avec moins d’hésitation.

La compétence layout aide à améliorer l’espacement, la hiérarchie et la composition lorsqu’une interface paraît plate, surchargée ou agencée de façon trop mécanique. Utilisez-la pour les problèmes de mise en page, d’alignement et de rythme visuel, avec un guide pratique de layout pour le design UI plutôt qu’un simple conseil de style générique. Elle est particulièrement utile quand vous avez besoin de corrections structurelles, d’un regroupement plus clair et d’un meilleur ordre de lecture.

impeccable vous aide à créer des interfaces frontend distinctives, prêtes pour la production, plutôt que des UI génériques au rendu typiquement IA. Il prend en charge les workflows craft, teach et extract pour des pages, composants web, surfaces d’application, affiches et autres frontends fortement orientés design, ce qui en fait une compétence utile pour le design UI, la mise en place du contexte de design et l’extraction de patterns réutilisables.

figma-code-connect-components aide à faire correspondre des composants de design Figma avec les composants de code adéquats via Figma Code Connect. Utilisez-le pour aligner l’implémentation du design, faire correspondre variantes et props, et trouver le bon composant local avant de créer des correspondances. Idéal pour les flux de travail de connexion, de mise en correspondance ou de liaison au code, pas pour la rédaction sur canvas ni la génération de pages complètes.

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.

teach-impeccable est un skill de configuration ponctuelle pour le design UI : il analyse votre dépôt, pose des questions UX ciblées et enregistre des consignes de design persistantes pour les sessions suivantes.

Le skill react:components transforme les designs Stitch en composants Vite et React modulaires pour le développement frontend. Il s’appuie sur la recherche, des vérifications des fichiers locaux et une validation basée sur l’AST afin de garder la sortie alignée avec les design tokens, les fichiers existants et les contraintes du projet. Utilisez ce guide react:components lorsque vous avez besoin d’un code de composants structuré, pas d’un simple dump JSX ponctuel.

La skill enhance-prompt transforme des idées d’interface floues en prompts plus clairs, prêts pour Stitch, avec une structure plus solide, un vocabulaire UI/UX plus précis et un contexte de design system. Utilisez ce guide enhance-prompt pour rendre vos prompts plus spécifiques, réduire l’approximation et obtenir des résultats plus cohérents pour la rédaction de prompts et la génération d’interface.

vue-best-practices est une skill Vue 3 dédiée à la génération de code, à la revue et au refactoring. Elle oriente les agents vers la Composition API, `<script setup lang="ts">`, des flux de données explicites, des choix compatibles SSR, ainsi que vers les références essentielles sur la réactivité, les SFC, les composables, Router, Pinia et les applications basées sur Vite.

fireworks-tech-graph est une skill de diagramme qui transforme des descriptions de systèmes en diagrammes SVG et PNG prêts pour la production. Elle inclut des consignes d’installation, des scripts d’assistance, des validations, des modèles et des références de style pour les diagrammes techniques, les organigrammes d’architecture, les vues de séquence et les workflows visuels associés.

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.

Architecture est une skill de diagrammation pour créer des vues de systèmes en couches en HTML et CSS, avec des sections codées par couleur, des mises en page en grille et une hiérarchie claire des composants. Elle convient particulièrement aux diagrammes utilisateur/application/données/infrastructure, aux cartographies de microservices et à l’architecture d’entreprise. Utilisez-la à la place d’invites génériques lorsque vous voulez une architecture rapide, modifiable et adaptée à la sortie Diagramming.

makepad-2.0-design-judgment est le premier skill Makepad 2.0 à charger pour le jugement de conception, l’architecture, les frontières des composants, les flux de données et la stratégie de rendu. Utilisez le skill makepad-2.0-design-judgment pour orienter les demandes vers le bon skill de conformité Makepad et prendre de meilleures décisions de conception avant l’implémentation.

Créez des diagrammes d’architecture soignés, sur fond sombre, sous forme de fichiers HTML autonomes avec SVG intégré. Le skill architecture-diagram est conçu pour les diagrammes d’architecture système, d’infrastructure, de cloud, de sécurité et de topologie réseau, afin de vous offrir un rendu visuel prêt pour le navigateur, avec des couleurs sémantiques, des relations claires entre composants et un style technique cohérent.

figma-designer analyse des fichiers Figma ou des captures d’écran via Figma MCP afin d’extraire les spécifications visuelles, les design tokens, les composants et un handoff PRD exploitable par les équipes de design UI.

stitch-design-taste est un skill Google Stitch pour la mise en œuvre de design systems. Il génère un fichier DESIGN.md clair et exploitable par un agent, avec des consignes pour créer une interface premium et non générique : typographie soignée, palette calibrée, mises en page asymétriques, règles de motion et motifs interdits. À privilégier si vous voulez un guide stitch-design-taste réutilisable plutôt qu’un prompt ponctuel.

makepad-2.0-widgets vous aide à trouver les bons widgets Makepad 2.0, leurs propriétés et les bons schémas de composition pour l’implémentation d’interfaces. Utilisez-le quand vous avez besoin d’un usage de makepad-2.0-widgets, d’une recherche dans un catalogue de widgets ou d’un guide pratique pour construire des layouts, des listes, des dialogues et des patterns avancés en syntaxe Splash.

baseline-ui aide à passer en revue ou à générer des interfaces UI basées sur Tailwind selon une baseline exigeante pour l’espacement, la typographie, l’accessibilité et le mouvement. Utilisez la compétence baseline-ui lorsque vous avez besoin d’une sortie de composants plus sûre, de décisions de UI Design plus claires et de moins de dérive par rapport aux primitives existantes. Elle est particulièrement adaptée aux workflows React/Tailwind et aux vérifications pratiques du guide baseline-ui.