Agents Skills design

Utilisez le skill design-system pour générer ou auditer un système UI, extraire des tokens depuis du code existant et vérifier la cohérence du style dans de vrais dépôts.

La skill design-md analyse les projets Stitch et transforme leurs écrans en une source de vérité sémantique DESIGN.md pour garantir la cohérence de la mise en page, du ton, des couleurs et du langage des composants. Utilisez design-md pour les Design Systems quand vous avez besoin d’indications exploitables pour de futures générations Stitch, et pas seulement d’un aperçu visuel.

La skill web-component-design aide les équipes à concevoir des composants UI réutilisables pour React, Vue et Svelte, avec des modèles d’API solides, des repères d’accessibilité et des références sur les compromis de style pour les design systems.

design-system-patterns aide les équipes à concevoir des bases d’interface évolutives grâce à une structure de tokens, une architecture de thèmes et des patterns d’API de composants réutilisables pour les design systems et les bibliothèques de composants.

ckm:design-system aide à créer des tokens en trois couches, des specs de composants, des variables CSS, des mappings Tailwind et des slides cohérents avec la marque à partir d’une architecture de tokens claire.

mobile-android-design aide les agents à fournir des recommandations d’interface Android natives avec Material Design 3, Jetpack Compose, la gestion des thèmes, la navigation et des modèles de mise en page adaptative pour les téléphones, tablettes et appareils pliables.

visual-design-foundations aide les équipes à construire des systèmes d’interface concrets avec des échelles typographiques, des tokens de couleur, des règles d’espacement et des recommandations d’iconographie. Utilisez-la pour poser une base de design solide, créer des guides de style, auditer la hiérarchie visuelle et produire des variables CSS prêtes à l’implémentation à partir de contraintes de design clairement définies.

Utilisez la skill tailwind-design-system pour créer des design systems Tailwind CSS v4 avec tokens, theming, variants, accessibilité et conseils de migration de v3 vers v4.

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.

La skill interaction-design aide les équipes à concevoir et mettre en œuvre des animations d’interface utiles, des micro-interactions, des transitions, des états de chargement et des patterns de feedback, avec des références pratiques orientées React et des conseils d’usage concrets.

ckm:design est une skill de design structurée pour orienter et produire logos, maquettes CIP, bannières, slides et icônes SVG. Elle inclut des références concrètes, des options basées sur CSV et des scripts Python pour des workflows reproductibles, au-delà de simples prompts génériques.

frontend-design est une skill centrée sur le contexte pour créer un code UI frontend distinctif. Utilisez-la pour traduire l’audience, le cas d’usage et le ton de marque en choix plus solides de mise en page, typographie, couleur, motion, états d’interaction et UX writing pour des pages, des composants et des parcours.

frontend-design est une skill orientée design pour créer des interfaces frontend soignées, avec un meilleur sens du contexte, de la hiérarchie, de l’accessibilité et du responsive. Utilisez-la pour installer la skill, consulter les références essentielles et appliquer des conseils concrets afin d’améliorer vos composants, pages et écrans d’application.

react-native-design est une skill ciblée pour les patterns d’interface React Native, avec une couverture de la mise en forme via StyleSheet, de React Navigation typé et de l’usage de Reanimated 3 pour des écrans cross-platform.

canvas-design aide à créer des visuels statiques originaux en deux étapes : rédiger une intention de design en Markdown, puis la rendre en `.png` ou `.pdf`. Idéal pour affiches, cover art, visuels de concept et créations de campagne proches de l’UI avec peu de texte.

La skill mobile-ios-design aide les agents à produire des recommandations d’interface fidèles aux usages natifs d’iOS, en s’appuyant sur les principes Apple HIG, les patterns SwiftUI, la navigation, l’accessibilité et les mises en page adaptatives pour iPhone et iPad.

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.

design-system-starter aide les équipes à poser les bases d’un design system avec des tokens, des composants atomiques, du theming, des recommandations WCAG 2.1 AA, des checklists et des templates compatibles React pour la documentation et le code de démarrage.

ckm:banner-design aide à créer des bannières, couvertures, en-têtes, publicités display et visuels hero web grâce à des briefs structurés, un workflow adapté aux formats et plusieurs directions artistiques. Idéal pour le design UI, les créations marketing et les concepts de bannières par plateforme avec SKILL.md et la référence des tailles et styles.

La compétence normalize audite une fonctionnalité UI et la réaligne sur votre design system. Découvrez dans quel contexte installer normalize, la préparation /frontend-design requise et son usage concret pour les pages, routes et composants.

Utilisez la compétence responsive-design pour concevoir et mettre en œuvre des interfaces adaptatives avec les container queries, la typographie fluide, CSS Grid, Flexbox et des breakpoints mobile-first issus du dépôt wshobson/agents.

liquid-glass-design vous aide à mettre en œuvre le système Liquid Glass d’Apple sur iOS 26 avec SwiftUI, UIKit et WidgetKit. Servez-vous-en pour créer des boutons, cartes, barres d’outils, conteneurs et widgets à effet verre, avec des conseils sur les formes, la teinte, l’interactivité et les cas où cet effet convient réellement à une interface.

bolder est une skill de design d’interface UI conçue pour donner plus d’impact aux interfaces ternes ou trop prudentes, avec davantage de contraste, de hiérarchie et de personnalité. Utilisez-la après la phase de cadrage `/frontend-design`, ou après `/teach-impeccable` lorsqu’aucun contexte de design n’existe, afin d’obtenir des améliorations plus nettes et plus exploitables sans compromettre l’utilisabilité.

design-an-interface vous aide à concevoir des modules et des surfaces d’API en cadrant les besoins, en générant au moins 3 options très différentes, puis en comparant les compromis avant l’implémentation.