Skill für Claude Code: Material Design 3 UI

Claude Codes Material Design 3-Experte: Skill für UI-Generierung und -Prüfung

Der material-3-skill für Claude Code vereinfacht die Erstellung von UI-Komponenten, Theming und Code-Prüfungen nach MD3-Spezifikationen. Installieren Sie ihn in ~/.claude/skills/ und aktivieren Sie ihn mit /material-3. Er priorisiert Jetpack Compose, bietet teilweisen Flutter-Support und begrenzte Web-Kompatibilität.

Vier Kernmodi:

• Generieren von Komponenten aus Beschreibungen.
• Erstellen eines ColorScheme aus einer Startfarbe.
• Aufbau adaptiver Scaffolds.
• Prüfung des App-Quellcodes.

Beispiel für die Generierung eines Login-Formulars:

/material-3 component Erstelle ein Login-Formular mit E-Mail- und Passwortfeldern

Ergebnis: Compose-Code mit MaterialTheme, OutlinedTextField, FilledButton, korrekten Abständen und MD3-Elevation.

Theming und Scaffold-Generierung

Der Theme-Befehl erzeugt ein vollständiges ColorScheme:

/material-3 theme Generiere Theme aus Startfarbe #1A73E8

Ausgabe: primary, secondary, tertiary, surface, error mit onPrimary, primaryContainer-Varianten usw., inklusive Dark Mode über Material You Tonal Palettes.

Für App-Skelette:

/material-3 scaffold Erstelle responsive Hülle mit Navigation

Erzeugt adaptive Layouts: Bottom-Nav auf Mobilgeräten, Navigation Rail auf Tablets, Navigation Drawer auf Desktops unter Verwendung von MD3-Breakpoints.

Referenzdateistruktur

Der Skill enthält destillierte Daten von m3.material.io und 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)

Dateien umfassen Token-Tabellen, über 30 Komponenten-Templates für Compose, Breakpoints und Standard-Layouts.

Code-Prüfung: 10 Kategorien

Die Prüfung scannt Verzeichnisse wie ./app/src/main und bewertet den Code nach:

• Farb-Token — MaterialTheme.colorScheme.primary statt Hardcoding.
• Typografie — Stile aus MaterialTheme.typography.
• Formen — small, medium, large, extraLarge-Token.
• Elevation — komponentenspezifische Schattenstufen.
• Komponenten — Standard vor Custom.
• Layout — Responsivität und Standardmuster.
• Navigation — Typ je Bildschirmgröße.
• Motion — expressive Übergänge.
• Barrierefreiheit — Kontrast, Berührziele, Inhaltsbeschreibungen.
• Theming — dynamische Farben, Dark Mode.

Bericht mit Bewertungen, Problemen und zeilenspezifischen Korrekturen.

Plattform-Support und M3 Expressive

| Plattform | Support-Niveau |

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

| Jetpack Compose | Voll, inkl. Expressive |

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

| Web | Begrenzt, kein Expressive |

M3 Expressive (ab Mai 2025) fügt Typografie-Betonung, Form-Morphing und Motion hinzu. Der Skill bietet eine Support-Matrix: voll in Compose, teilweise in Flutter, keine auf Web.

Installation und Einschränkungen

Klonen und kopieren:

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

Oder Symlink für Updates:

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

Einschränkungen:

• Compose-Priorität, Flutter/Web sekundär.
• Spezifikationsdestillation kann Google-Updates hinterherhinken.
• Ersetzt keine Designentscheidungen (Startfarbe, FAB-Platzierung).

Wichtige Erkenntnisse

• Generiert Code strikt nach MD3-Token, spart manuelle Spezifikationsprüfungen.
• Prüft 10 Kategorien mit gezielten Korrekturen.
• M3 Expressive-Support-Matrix für Mid-/Senior-Entwickler.
• Referenzdateien als schneller Spezifikationsnachschlag.
• Ehrliche Web-Support-Bewertung — kein Hype.

— Editorial Team