Compétence pour Claude Code : Interface Material Design 3

Expert Material Design 3 de Claude Code : Compétence pour la génération et l'audit d'interfaces

La compétence material-3-skill pour Claude Code simplifie la création de composants d'interface, la thématisation et les audits de code pour respecter les spécifications MD3. Installez-la dans ~/.claude/skills/ et activez-la avec /material-3. Elle privilégie Jetpack Compose, avec un support partiel pour Flutter et une compatibilité web limitée.

Quatre modes principaux :

• Génération de composants à partir de descriptions.
• Création de ColorScheme à partir d'une couleur de base.
• Construction de Scaffold adaptatifs.
• Audit du code source d'une application.

Exemple de génération d'un formulaire de connexion :

/material-3 component Créez un formulaire de connexion avec champs email et mot de passe

Résultat : Code Compose avec MaterialTheme, OutlinedTextField, FilledButton, espacements corrects et élévation MD3.

Génération de thèmes et de scaffolds

La commande thème génère un ColorScheme complet :

/material-3 theme Génèrez un thème à partir de la couleur de base #1A73E8

Sortie : primary, secondary, tertiary, surface, error avec variantes onPrimary, primaryContainer, etc., y compris le mode sombre via les palettes tonales Material You.

Pour les squelettes d'applications :

/material-3 scaffold Créez une coquille responsive avec navigation

Génère des mises en page adaptatives : navigation inférieure sur mobile, barre de navigation sur tablettes, tiroir de navigation sur desktop, en utilisant les points de rupture MD3.

Structure des fichiers de référence

La compétence inclut des données distillées de m3.material.io et AndroidX Compose Material3 :

material-3-skill/
├── SKILL.md
├── references/
│   ├── color-system.md
│   ├── component-catalog.md
│   ├── theming-and-dynamic-color.md
│   ├── typography-and-shape.md
│   ├── navigation-patterns.md
│   └── layout-and-responsive.md
├── CONTRIBUTING.md
└── LICENSE (MIT)

Les fichiers couvrent les tableaux de tokens, plus de 30 templates de composants mappés sur Compose, points de rupture et mises en page standard.

Audit de code : 10 catégories de vérification

L'audit scanne des répertoires comme ./app/src/main et évalue le code selon :

• Tokens de couleurs — utilisez MaterialTheme.colorScheme.primary plutôt que des valeurs codées en dur.
• Typographie — styles issus de MaterialTheme.typography.
• Formes — tokens small, medium, large, extraLarge.
• Élévation — niveaux d'ombre spécifiques aux composants.
• Composants — standards plutôt que personnalisés.
• Mise en page — réactivité et patterns standards.
• Navigation — type selon la taille d'écran.
• Animations — transitions expressives.
• Accessibilité — contraste, cibles tactiles, descriptions de contenu.
• Thématisation — couleurs dynamiques, mode sombre.

Le rapport inclut des scores, des problèmes et des corrections ligne par ligne.

Support des plateformes et Material Design 3 Expressive

| Plateforme | Niveau de support |

|------------------|--------------------------------|

| Jetpack Compose | Complet, y compris Expressive |

| Flutter | ThemeData(useMaterial3: true), ColorScheme.fromSeed |

| Web | Limité, sans Expressive |

Material Design 3 Expressive (depuis mai 2025) ajoute une emphase typographique, morphing des formes et animations. La compétence fournit une matrice de support : complet en Compose, partiel en Flutter, absent sur web.

Installation et limitations

Clonez et copiez :

git clone https://github.com/hamen/material-3-skill.git
cp -r material-3-skill ~/.claude/skills/material-3

Ou créez un lien symbolique pour les mises à jour :

ln -s /path/to/material-3-skill ~/.claude/skills/material-3

Limitations :

• Priorité à Compose, Flutter/web secondaires.
• Distillation des specs peut accuser du retard sur les mises à jour Google.
• Ne remplace pas les décisions de design (choix de couleur de base, position du FAB).

Points clés

• Génère du code strictement selon les tokens MD3, évitant les vérifications manuelles des specs.
• Audite 10 catégories avec corrections ciblées.
• Matrice de support pour M3 Expressive destinée aux devs intermédiaires/seniors.
• Fichiers de référence pour une consultation rapide des specs.
• Évaluation honnête du support web — sans exagération.

— Editorial Team