material-3von hamen

Material 3 Skill.

Ein Claude Code und Codex skill für Mobile-App-Design: implementiert Material Design 3 Tokens, Komponenten und adaptive Layouts.

Mobile Apps
UI-Code

OpenDesign herunterladen Anleitung ansehen

hamen/material-3-skill · skills/material-3/SKILL.mdSKILL.md

--- name: material-3 description: Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming, M3 Expressive (platform matrix), and accessibility. Use when: "material design", "MD3", "material you", "Jetpack Compose", "MaterialTheme", "material component", … --- ## Philosophy ## Current Updates: Google I/O 2026 ## Decision Tree ## Design Token System ## Jetpack Compose (primary) ## Web (limited): @material/web

Frontmatter und Abschnittsüberschriften aus der Upstream-Datei vom 14.09.2026 · 31.218 Zeichen insgesamt

01 Was es tut

Was der material-3-Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Leitet die Umsetzung von Googles Material Design 3 (Material You) mit Jetpack Compose Material3 als primärem Ziel, ergänzt durch Flutter und einen begrenzten Web-Pfad über @material/web. Es umfasst das md.sys-Token-System für Farbe, Schriftskala, Form, Elevation und Bewegung, eine Kurzreferenz zu über 30 Komponenten mit ihren Varianten, adaptives Layout und Navigation, Theming und dynamische Farbe, die M3-Expressive-Plattformmatrix sowie Barrierefreiheit.

Ein Audit-Modus bewertet eine App oder Seite in zehn Kategorien auf einer Skala von 0-10 und erstellt einen Compliance-Bericht. Er richtet sich an Designer und Entwickler, die konkrete MD3-Standards benötigen: fünf Window-Size-Klassen, tonale Elevation statt Schatten, ein 8dp-Abstandssystem und maximale Inhaltsbreiten bei großen Fenstern.

Was er erzeugt

Ein Markdown-MD3-Compliance-Bericht mit einer Gesamtbewertung und Bewertungen je Kategorie, kritischen Problemen, Warnungen, bestandenen Punkten und priorisierten Korrekturen.
Ein Compose-Theme, aufgebaut aus MaterialTheme mit einem colorScheme, das von dynamicLightColorScheme, lightColorScheme oder generiertem Theme-Code bereitgestellt wird.
Ein CSS-Theme-Block aus md-sys Custom Properties, einschließlich einer Dark-Theme-Variante, die per Media Query oder Klasse angewendet wird.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Starten Sie mit Compose, sofern der Stack nichts anderes vorgibt
Die Datei behandelt Jetpack Compose Material3 als Standardpfad, und der Entscheidungsbaum leitet App-Shells, einzelne Komponenten, Themes, Formulare, Navigation und Datenanzeige an spezifische Abschnitte und Referenzdateien weiter, bevor Code geschrieben wird.
02
Wenden Sie die Token-Ebene an
Alle MD3-Tokens befinden sich im Namespace md.sys; Compose ordnet dieselben semantischen Rollen MaterialTheme.colorScheme, Typografie und Formen zu, während Web sie auf CSS Custom Properties mit dem Präfix md-sys abbildet.
03
Komponenten über die Quick Reference auswählen
Die Komponententabelle listet für jede Komponente den Web-Elementnamen, die wichtigsten Varianten und die Kategorie auf und kennzeichnet, welche keine @material/web-Implementierung haben, sodass sie stattdessen mit CSS Custom Properties und Standard-HTML gebaut werden können.
04
Mit den Common Patterns zusammensetzen
Die Patterns App Shell, Card Grid und Form Layout werden als HTML plus CSS bereitgestellt, einschließlich eines Breakpoints, der die Navigation Rail bei kompakten Breiten in eine Bottom Navigation umwandelt.
05
Auf Anfrage prüfen
Mit dem Argument audit aufgerufen, untersucht der Skill eine URL, Quelldateien oder eine laufende App und bewertet zehn Kategorien von 0 bis 10, bevor der Bericht geschrieben wird.

02 Finden Sie Ihren Favoriten

Wann Sie den material-3 Skill verwenden sollten

Verwenden Sie den material-3-Skill in Claude Code oder Codex, wenn es um mobile App-Designs dieser Art geht. Eignung und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

Erstellen eines neuen Android-Screens oder einer neuen App in Jetpack Compose mit androidx.compose.material3-Composables wie Scaffold, Button und NavigationBar.
Erzeugen eines Themes aus dem Hintergrundbild des Nutzers mit dynamischer Farbe ab Android 12, mit Rückfall auf statische helle und dunkle Schemata bei älteren Versionen.
Ein Layout, das sich über Smartphone, Foldable, Desktop, Watch und XR anpasst, statt eines festen Phone-first-Designs.
Prüfen einer bestehenden App oder Seite gegen MD3 und Erhalten eines bewerteten Berichts als Arbeitsgrundlage.
Theming einer Web-UI durch Setzen von MD3-CSS-Custom-Properties auf dem Root- oder einem beliebigen übergeordneten Element.

Grenzen kennen

Erwarten von M3-Expressive-Funktionen im Web, da Material Web nur noch gewartet wird und Expressive dort nicht implementiert ist.
Server-seitiges Rendering ohne Hydration-Strategie, da die Web Components Custom Elements sind, die JavaScript benötigen.
Projekte, die noch Material-2- und Material-3-Bibliotheken mischen, deren APIs und Styling inkompatibel sind.
Reine Smartphone-Layouts, die große Bildschirme und Foldables ignorieren, einschließlich interaktiver Inhalte, die über eine Scharnierlinie platziert werden.

Was Sie bereitstellen sollten

Ein Task-ArgumentDer Skill nimmt ein Argument component, theme, layout, scaffold oder audit entgegen, gefolgt von einer kurzen Beschreibung oder einer URL, die festlegt, welchem Abschnitt oder welcher Referenzdatei zu folgen ist.
Ein zu prüfendes ZielFür Audit-Arbeiten geben Sie eine URL für die Browser-Inspektion an, Dateipfade, aus denen der Quellcode gelesen werden soll, oder Zugriff auf eine laufende App.
Eine Seed-Farbe für individuelles ThemingEine einzelne Seed-Farbe reicht aus, um ein vollständiges Farbschema abzuleiten; die Datei verweist auf das Paket material-color-utilities zur Generierung der Werte.
Quelldateien für Code-AuditsCompose-Audits lesen Kotlin-Dateien, um MaterialTheme-Verwendung, Composables, rohe Color-Werte, hart codierte Dp-Angaben und fehlende Semantik zu finden.

03 Innerhalb des Skills

Regeln, die der material-3-Skill Claude Code und Codex gibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Compose First für neue Material-Arbeit
Für neue Android-Arbeiten schreibt die Datei vor, Jetpack Compose Material3 für Komponenten, expressive APIs, adaptive Scaffolds und die Integration der Styles API zu bevorzugen; Android Views sind nur in bestehenden Apps akzeptabel.
Farben niemals hart codieren
Verwenden Sie die md-sys-color-Token statt roher Hex- oder RGB-Werte, da hartcodierte Farben dynamisches Theming, Dark Mode und Kontrastanpassung zerstören.
Beabsichtigte Tonpaare beibehalten
Kombinieren Sie Farben nur wie vorgesehen, etwa primary mit on-primary und surface-container mit on-surface; beliebige Paarungen zerstören den Kontrast im dynamischen Farbmodus und im Hochkontrastmodus.
Trennlinien verwenden outline-variant
Trennlinien werden mit outline-variant gezeichnet; outline ist wichtigen Begrenzungen wie Textfeldrändern vorbehalten.
Web Components einzeln importieren
Importieren Sie das Paket @material/web niemals als Ganzes; importieren Sie nur die verwendeten Komponentenmodule, da ein vollständiger Import die Bundle-Größe zerstört.
Breite bei großen Fenstern begrenzen
Bei Large- (1200dp+) und Extra-large-Fenstern (1600dp+) ist der Inhalt auf eine maximale Breite von 840-1040dp begrenzt, da endlos breite Textzeilen unlesbar sind.
Erhöhung ist tonal, nicht schattiert
MD3 kommuniziert Erhöhung durch tonale Oberflächenfarbe statt durch Schatten; Schatten werden nur hinzugefügt, wenn ein Element zusätzliche Trennung von einem unruhigen Hintergrund benötigt.
Roboto ist in MD3 korrekt
Roboto oder Roboto Flex ist die Standard-Material-Schrift, und der frontend-design-Ratschlag, Roboto zu vermeiden, gilt hier nicht; ersetzen Sie sie nur bei einer bewussten Anpassung der Schriftskala.

04 In Betrieb nehmen

material-3 in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

material-3 zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/hamen/material-3-skill --skill material-3

Generische skills-CLI-Form für skills/material-3/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

Geben Sie dem Skill eine erste Mobile-App-Design-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

We're moving our [Android app] from Material 2 to MD3. Set up MaterialTheme with dynamic color on Android 12+ and wire the md.sys color, type and shape tokens, then rebuild [screen name] as a Scaffold with a navigation rail on medium and expanded window size classes. We ship on foldables too, so keep interactive content off the hinge and constrain content width on large windows.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Überprüfen Sie Kontrastverhältnisse und Touch-Ziele, nicht nur die Verwendung von MD3-Rollen.
Durchsuchen Sie die Web-Stylesheets nach hartcodierten Hex-Farben.
Durchsuchen Sie Kotlin-Quellen nach rohen Color-Werten.
Durchsuchen Sie JavaScript und TypeScript nach verbliebenen Material-2-Importen.
Ändern Sie die Größe des Viewports oder nutzen Sie den responsiven Modus, um das Layout an jedem Breakpoint zu prüfen.

In OpenDesign importieren Sie material-3 über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: hamen
Repository: github.com/hamen/material-3-skill Branch master
Skill-Datei: skills/material-3/SKILL.md Inhalts-Checksum bei Verifikation aufgezeichnet; Commit 14385f2
License: MIT Aus LICENSE.
Repository-Sterne: 1.384 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository hamen/material-3-skill. Keine Bewertung oder Nutzungszahl für material-3.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

PhilosophieDrei Prinzipien, personal, adaptive und expressive, die dynamische Farbe, Fenstergrößenklassen und Spring-Motion definieren.
EntscheidungsbaumLeitet je nach dem, was Sie entwickeln, und der Plattform zu Abschnitten und Referenzdateien weiter.
Design-Token-Systemmd.sys-Token für Farbe, Typografie, Form, Erhöhung und Motion mit Compose- und CSS-Zuordnungen.
Komponenten-KurzreferenzTabelle mit über 30 Komponenten samt Web-Elementen, wichtigsten Varianten und Kategorie.
Jetpack Compose (primär)Einrichtung von androidx.compose.material3, MaterialTheme, dynamische Farben, adaptive UI und Insets.
Web (eingeschränkt): @material/webWeb-Komponenten im Maintenance-Modus, einzelne Imports, Theming über CSS Custom Properties und Dark Theme.
Gängige MusterSnippets für App-Shell, Card-Grid und Formular-Layout in HTML und CSS.
Anti-PatternsStrikte Verbote, die die Vermischung mit MD2 abdecken

Die eigene Beschreibung des Skills

„Implementieren Sie Googles Material Design 3 (Material You) UI-System. Primär: Jetpack Compose Material3 (MaterialTheme, Komponenten, adaptives Layout). Auch Flutter und eingeschränkt Web (@material/web, Maintenance-Mode). Umfasst Tokens, 30+ Komponenten, Layout, Theming, M3 Expressive (Plattform-Matrix) und Barrierefreiheit. Verwenden bei: „material design", „MD3", „material you", „Jetpack Compose", „MaterialTheme", „material component", „md3 button"."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 31.218 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

Material 3

material-3 bei einer echten Mobile-App-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie material-3 über dessen SKILL.md-Link, fügen Sie die obige Eingabe ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/hamen/material-3-skill --skill material-3

Was der material-3-Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den material-3 Skill verwenden sollten

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der material-3-Skill Claude Code und Codex gibt

Compose First für neue Material-Arbeit

Farben niemals hart codieren

Beabsichtigte Tonpaare beibehalten

Trennlinien verwenden outline-variant

Web Components einzeln importieren

Breite bei großen Fenstern begrenzen

Erhöhung ist tonal, nicht schattiert

Roboto ist in MD3 korrekt