Nelle parole della skill
Guida all’implementazione del Material Design 3 (Material You) di Google, con Jetpack Compose Material3 come target principale, oltre a Flutter e a un percorso web limitato tramite @material/web. Copre il sistema di token md.sys per colore, typescale, forma, elevazione e movimento, un riferimento rapido a oltre 30 componenti con le loro varianti, layout adattivo e navigazione, theming e colore dinamico, la matrice della piattaforma M3 Expressive, e l’accessibilità.
Una modalità di audit valuta un’app o una pagina da 0 a 10 su dieci categorie e produce un report di conformità. È pensata per designer e sviluppatori che necessitano di valori predefiniti MD3 concreti: cinque classi di dimensione della finestra, elevazione tonale invece delle ombre, un sistema di spaziatura a 8dp e larghezze massime del contenuto sulle finestre grandi.
Che cosa produce
- Un report di conformità MD3 in markdown con un punteggio complessivo e punteggi per categoria, problemi critici, avvisi, elementi conformi e correzioni prioritarie.
- Un tema Compose costruito a partire da MaterialTheme con un colorScheme fornito da dynamicLightColorScheme, lightColorScheme o da codice di tema generato.
- Un blocco di tema CSS di proprietà personalizzate md-sys, inclusa una variante di tema scuro applicata tramite media query o classe.
Come funziona
- 01Partire da Compose a Meno che lo Stack non Indichi Altrimenti
Il file considera Jetpack Compose Material3 come il percorso predefinito e l’Albero Decisionale indirizza shell dell’app, singoli componenti, temi, form, navigazione e visualizzazione dei dati verso sezioni specifiche e file di riferimento prima di scrivere qualsiasi codice.
- 02Applicare lo Strato di Token
Tutti i token MD3 vivono nel namespace md.sys; Compose mappa gli stessi ruoli semantici su MaterialTheme.colorScheme, typography e shapes, mentre il web li mappa su custom properties CSS con prefisso md-sys.
- 03Scegliere i componenti dal Quick Reference
La tabella dei componenti elenca per ciascun componente il nome dell'elemento web, le varianti principali e la categoria, e segnala quali non hanno un'implementazione @material/web, così da poterli costruire con custom properties CSS e HTML standard.
- 04Assemblare con i Common Patterns
I pattern App Shell, Card Grid e Form Layout sono forniti come HTML più CSS, incluso un breakpoint che trasforma la navigation rail in bottom navigation alle larghezze compatte.
- 05Eseguire l'audit quando richiesto
Invocata con audit, la skill esamina un URL, i file sorgente o un'app in esecuzione e assegna un punteggio da 0 a 10 a dieci categorie prima di scrivere il report.