En los propios términos del Skill
Guía la implementación de Material Design 3 (Material You) de Google con Jetpack Compose Material3 como objetivo principal, además de Flutter y una ruta web limitada mediante @material/web. Cubre el sistema de tokens md.sys para color, escala tipográfica, forma, elevación y movimiento, una referencia rápida a más de 30 componentes con sus variantes, diseño adaptable y navegación, theming y color dinámico, la matriz de plataforma M3 Expressive, y accesibilidad.
Un modo de auditoría califica una app o una página de 0 a 10 en diez categorías y produce un informe de cumplimiento. Está pensado para diseñadores y desarrolladores que necesitan valores predeterminados concretos de MD3: cinco clases de tamaño de ventana, elevación tonal en lugar de sombras, un sistema de espaciado de 8dp y anchos de contenido máximos en ventanas grandes.
Qué produce
- Un informe de cumplimiento MD3 en markdown con una puntuación general y puntuaciones por categoría, problemas críticos, advertencias, elementos que cumplen y correcciones priorizadas.
- Un tema de Compose construido a partir de MaterialTheme con un colorScheme provisto por dynamicLightColorScheme, lightColorScheme o código de tema generado.
- Un bloque de tema CSS de propiedades personalizadas md-sys, incluida una variante de tema oscuro aplicada mediante media query o clase.
Cómo funciona
- 01Empezar por Compose a Menos que la Pila Indique lo Contrario
El archivo trata Jetpack Compose Material3 como la ruta predeterminada, y el Árbol de Decisión dirige shells de aplicación, componentes individuales, temas, formularios, navegación y visualización de datos a secciones y archivos de referencia específicos antes de escribir cualquier código.
- 02Aplicar la Capa de Tokens
Todos los tokens de MD3 viven en el espacio de nombres md.sys; Compose mapea los mismos roles semánticos sobre MaterialTheme.colorScheme, typography y shapes, mientras que web los mapea sobre custom properties de CSS con el prefijo md-sys.
- 03Elija Components desde la Quick Reference
La tabla de componentes enumera el nombre del elemento web de cada componente, sus variantes clave y categoría, y marca cuáles no tienen implementación en @material/web para poder construirse a partir de custom properties de CSS con HTML estándar en su lugar.
- 04Ensamble con los Common Patterns
Los patrones App Shell, Card Grid y Form Layout se proporcionan en HTML más CSS, incluyendo un breakpoint que convierte el navigation rail en bottom navigation en anchos compactos.
- 05Audite Cuando se le Solicite
Al invocarse con audit, el skill inspecciona una URL, archivos fuente o una aplicación en ejecución y puntúa diez categorías de 0 a 10 antes de redactar el informe.