Habilidad para Claude Code: UI de Material Design 3

Experto en Material Design 3 de Claude Code: Habilidad para generar y auditar UI

La habilidad material-3-skill de Claude Code agiliza la creación de componentes UI, temas y auditorías de código para cumplir con las especificaciones de MD3. Instálala en ~/.claude/skills/ y actívala con /material-3. Prioriza Jetpack Compose, con soporte parcial para Flutter y compatibilidad web limitada.

Cuatro modos principales:

• Generar componentes a partir de descripciones.
• Crear ColorScheme desde un color semilla.
• Construir Scaffolds adaptativos.
• Auditar código fuente de apps.

Ejemplo de generación de formulario de login:

/material-3 component Crea un formulario de login con campos de email y contraseña

Resultado: Código Compose con MaterialTheme, OutlinedTextField, FilledButton, espaciado adecuado y elevación MD3.

Generación de temas y Scaffolds

El comando de tema genera un ColorScheme completo:

/material-3 theme Genera tema desde color semilla #1A73E8

Salida: primary, secondary, tertiary, surface, error con variantes onPrimary, primaryContainer, etc., incluyendo modo oscuro mediante paletas tonales de Material You.

Para esqueletos de app:

/material-3 scaffold Crea shell responsive con navegación

Genera layouts adaptativos: navegación inferior en móviles, barra lateral en tablets, cajón de navegación en desktop usando puntos de quiebre MD3.

Estructura de archivos de referencia

La habilidad incluye datos destilados de m3.material.io y 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)

Los archivos cubren tablas de tokens, más de 30 plantillas de componentes mapeadas a Compose, puntos de quiebre y layouts estándar.

Auditoría de código: 10 categorías de verificación

La auditoría escanea directorios como ./app/src/main y evalúa el código contra:

• Tokens de color — usa MaterialTheme.colorScheme.primary en lugar de valores hardcodeados.
• Tipografía — estilos de MaterialTheme.typography.
• Formas — tokens small, medium, large, extraLarge.
• Elevación — niveles de sombra específicos por componente.
• Componentes — estándar sobre personalizados.
• Layout — responsividad y patrones estándar.
• Navegación — tipo según tamaño de pantalla.
• Movimiento — transiciones expresivas.
• Accesibilidad — contraste, objetivos táctiles, descripciones de contenido.
• Temas — colores dinámicos, modo oscuro.

El informe incluye puntuaciones, problemas y correcciones específicas por línea.

Soporte de plataformas y M3 Expressive

| Plataforma | Nivel de soporte |

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

| Jetpack Compose | Completo, incluye Expressive |

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

| Web | Limitado, sin Expressive |

M3 Expressive (desde mayo 2025) añade énfasis tipográfico, morphing de formas y movimiento. La habilidad ofrece una matriz de soporte: completo en Compose, parcial en Flutter, nulo en web.

Instalación y limitaciones

Clona y copia:

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

O usa enlace simbólico para actualizaciones:

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

Limitaciones:

• Prioridad en Compose, Flutter/web secundarios.
• Destilación de specs puede retrasarse ante actualizaciones de Google.
• No reemplaza decisiones de diseño (elección de color semilla, posición de FAB).

Conclusiones clave

• Genera código estrictamente con tokens MD3, ahorrando revisiones manuales de specs.
• Audita 10 categorías con correcciones dirigidas.
• Matriz de soporte para M3 Expressive orientada a devs intermedios/seniors.
• Archivos de referencia como consulta rápida de specs.
• Evaluación honesta del soporte web — sin exageraciones.

— Editorial Team