Dans les termes du Skill
Guide l'implémentation du Material Design 3 (Material You) de Google avec Jetpack Compose Material3 comme cible principale, plus Flutter et une voie web limitée via @material/web. Il couvre le système de tokens md.sys pour la couleur, l'échelle typographique, la forme, l'élévation et le mouvement, une référence rapide à plus de 30 composants avec leurs variantes, la mise en page adaptative et la navigation, la théming et la couleur dynamique, la matrice de plateforme M3 Expressive, ainsi que l'accessibilité.
Un mode d'audit note une application ou une page de 0 à 10 sur dix catégories et produit un rapport de conformité. Il s'adresse aux designers et développeurs qui ont besoin de valeurs par défaut MD3 concrètes : cinq classes de taille de fenêtre, une élévation tonale au lieu d'ombres, un système d'espacement de 8dp, et des largeurs de contenu maximales sur grandes fenêtres.
Ce qu'il produit
- Un rapport de conformité MD3 en markdown avec un score global et des scores par catégorie, les problèmes critiques, les avertissements, les éléments conformes et les corrections prioritaires.
- Un thème Compose construit à partir de MaterialTheme avec un colorScheme fourni par dynamicLightColorScheme, lightColorScheme ou du code de thème généré.
- Un bloc de thème CSS de propriétés personnalisées md-sys, incluant une variante de thème sombre appliquée par media query ou classe.
Fonctionnement
- 01Partir de Compose sauf indication contraire de la stack
Le fichier considère Jetpack Compose Material3 comme la voie par défaut, et l'arbre de décision oriente les coquilles d'application, composants uniques, thèmes, formulaires, navigation et affichage de données vers des sections et fichiers de référence spécifiques avant toute écriture de code.
- 02Appliquer la couche de tokens
Tous les tokens MD3 vivent dans l'espace de noms md.sys ; Compose associe les mêmes rôles sémantiques à MaterialTheme.colorScheme, typography et shapes, tandis que le web les associe à des propriétés personnalisées CSS préfixées md-sys.
- 03Choisir les composants avec la Référence rapide
Le tableau des composants liste le nom de l'élément web de chaque composant, ses variantes clés et sa catégorie, et signale ceux qui n'ont pas d'implémentation @material/web afin qu'ils puissent être construits avec des propriétés personnalisées CSS et du HTML standard à la place.
- 04Assembler avec les Patterns communs
Les patterns App Shell, Card Grid et Form Layout sont fournis en HTML et CSS, avec un breakpoint qui transforme le rail de navigation en navigation basse sur les largeurs compactes.
- 05Auditer sur demande
Invoqué avec audit, le skill inspecte une URL, des fichiers source ou une application en cours d'exécution et note dix catégories de 0 à 10 avant de rédiger le rapport.