Skill dla Claude Code: Material Design 3 UI

Claude Code jako ekspert od Material Design 3: skill do generowania i audytu UI

Skill material-3-skill dla Claude Code ułatwia tworzenie komponentów UI, motywów i sprawdzanie kodu pod kątem zgodności ze specyfikacjami MD3. Instaluje się w katalogu ~/.claude/skills/ i aktywuje poleceniem /material-3. Priorytetowo wspiera Jetpack Compose, z częściową kompatybilnością dla Flutter i ograniczoną dla web.

Cztery główne tryby pracy:

• Generowanie komponentów na podstawie opisu.
• Tworzenie ColorScheme z koloru bazowego (seed).
• Budowa adaptacyjnego Scaffold.
• Audyt kodu źródłowego aplikacji.

Przykład generowania formularza logowania:

/material-3 component Stwórz formularz logowania z polami email i hasło

Wynik to kod Compose z MaterialTheme, OutlinedTextField, FilledButton, odpowiednimi wcięciami i elevacjami zgodnymi ze specyfikacją MD3.

Generowanie motywów i Scaffold

Polecenie dla motywu generuje pełny ColorScheme:

/material-3 theme Wygeneruj motyw z koloru bazowego #1A73E8

Wynik: primary, secondary, tertiary, surface, error z wariantami onPrimary, primaryContainer itp., w tym tryb ciemny według algorytmu tonalnych palet Material You.

Dla szkieletu aplikacji:

/material-3 scaffold Stwórz responsywny szkielet z nawigacją

Wygeneruje adaptacyjny layout: dolna nawigacja na urządzeniach mobilnych, navigation rail na tabletach, navigation drawer na desktopach z punktami przerw MD3.

Struktura plików referencyjnych

Skill zawiera destylowane dane z dokumentacji m3.material.io i 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)

Pliki zawierają tabele tokenów, szablony ponad 30 komponentów z mapowaniami na Compose, punkty przerw i kanoniczne layouty.

Audyt kodu: 10 kategorii sprawdzenia

Audyt skanuje katalog, np. ./app/src/main, i ocenia kod według kryteriów:

• Tokeny kolorów — używanie MaterialTheme.colorScheme.primary zamiast hardcoded.
• Typografia — style z MaterialTheme.typography.
• Kształty — tokeny small, medium, large, extraLarge.
• Elevacja — poziomy cieni dla komponentów.
• Komponenty — standardowe zamiast customowych.
• Layout — adaptacyjność i kanoniczne layouty.
• Nawigacja — typ zależny od rozmiaru ekranu.
• Animacje — wyraziste przejścia (Expressive transitions).
• Dostępność — kontrast, cele dotykowe, opisy treści.
• Motywy — dynamiczne kolory, tryb ciemny.

Raport zawiera ocenę, uwagi i sugestie poprawek z wskazaniem linii kodu.

Obsługa platform i M3 Expressive

| Platforma | Poziom wsparcia |

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

| Jetpack Compose | Pełny, w tym Expressive |

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

| Web | Ograniczony, bez Expressive |

M3 Expressive (od maja 2025) dodaje podkreślenia w typografii, morphing kształtów i animacje. Skill zawiera matrycę wsparcia: pełna w Compose, częściowa w Flutter, brak na web.

Instalacja i ograniczenia

Klonowanie i kopiowanie:

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

Lub symlink dla aktualizacji:

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

Ograniczenia:

• Priorytet Compose, drugorzędnie Flutter/web.
• Destylowana specyfikacja — może się zestarzeć przy aktualizacjach Google.
• Nie zastępuje decyzji projektowych (wybór koloru bazowego, pozycja FAB).

Co najważniejsze

• Skill generuje kod ściśle według tokenów MD3, oszczędzając czas na ręczne sprawdzanie dokumentacji.
• Audyt wykrywa niezgodności w 10 kategoriach z konkretnymi poprawkami.
• Obsługa M3 Expressive z matrycą per platforma dla średniozaawansowanych/seniorów.
• Struktura plików referencyjnych jako szybki spis specyfikacji.
• Uczciwa ocena wsparcia web — bez fałszywych obietnic.

— Editorial Team