Skill pro Claude Code: Material Design 3 UI

Claude Code jako expert na Material Design 3: dovednost pro generování a audit UI

Dovednost material-3-skill pro Claude Code usnadňuje tvorbu UI komponent, témat a kontrolu kódu podle specifikací MD3. Instaluje se do složky ~/.claude/skills/ a aktivuje příkazem /material-3. Prioritně podporuje Jetpack Compose, částečně Flutter a omezeně web.

Čtyři hlavní režimy práce:

• Generování komponent podle popisu.
• Vytváření ColorScheme ze seed barvy.
• Tvorba adaptivního Scaffold.
• Audit zdrojového kódu aplikace.

Příklad generování přihlašovacího formuláře:

/material-3 component Vytvoř přihlašovací formulář s poli email a heslo

Výsledek je Compose kód s MaterialTheme, OutlinedTextField, FilledButton, správnými okraji a elevací podle specifikací MD3.

Generování témat a Scaffold

Příkaz pro téma generuje kompletní ColorScheme:

/material-3 theme Vygeneruj téma ze seed barvy #1A73E8

Výstup: primary, secondary, tertiary, surface, error s variantami onPrimary, primaryContainer atd., včetně tmavého režimu podle algoritmu tonálních palet Material You.

Pro kostru aplikace:

/material-3 scaffold Vytvoř responzivní shell s navigací

Vygeneruje se adaptivní layout: spodní navigace na mobilech, navigation rail na tabletech, navigation drawer na desktopu s breakpointy MD3.

Struktura referenčních souborů

Dovednost obsahuje destilované údaje z dokumentace m3.material.io a 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)

Soubory zahrnují tabulky tokenů, šablony 30+ komponent s mapováním na Compose, breakpointy a kanonické layouty.

Audit kódu: 10 kategorií kontroly

Audit prohledá složku, např. ./app/src/main, a hodnotí kód podle kritérií:

• Color tokens — použití MaterialTheme.colorScheme.primary místo hardcoded hodnot.
• Typography — styly z MaterialTheme.typography.
• Shape — tokeny small, medium, large, extraLarge.
• Elevation — úrovně stínů podle komponent.
• Components — standardní místo vlastních.
• Layout — adaptivita a kanonické layouty.
• Navigation — typ podle velikosti obrazovky.
• Motion — expresivní přechody.
• Accessibility — kontrast, touch targety, popisy obsahu.
• Theming — dynamické barvy, tmavý režim.

Zpráva obsahuje hodnocení, poznámky a návrhy oprav s uvedením řádků kódu.

Podpora platforem a M3 Expressive

| Platforma | Úroveň podpory |

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

| Jetpack Compose | Plná, včetně Expressive |

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

| Web | Omezená, bez Expressive |

M3 Expressive (od května 2025) přidává důraz v typografii, morphing tvarů a pohyb. Dovednost má matici podpory: plná v Compose, částečná ve Flutteru, chybí na webu.

Instalace a omezení

Klonování a kopírování:

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

Nebo symlink pro aktualizace:

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

Omezení:

• Priorita Compose, sekundárně Flutter/web.
• Destilace specifikací — může zastarat při aktualizacích Google.
• Nenahrazuje designové rozhodnutí (výběr seed barvy, umístění FAB).

Co je důležité

• Dovednost generuje kód striktně podle tokenů MD3, šetří čas manuální kontroly dokumentace.
• Audit odhaluje nesrovnalosti v 10 kategoriích s konkrétními opravami.
• Podpora M3 Expressive s maticí podle platforem pro středně pokročilé/senior developery.
• Struktura referenčních souborů jako přehled pro rychlý přístup ke specifikacím.
• Čestné hodnocení podpory webu — bez falešných slibů.

— Editorial Team