material-3por hamen

Material 3 Skill.

Um skill para Claude Code e Codex voltado ao design de apps mobile: implementa tokens, componentes e layouts adaptativos do Material Design 3.

Mobile Apps
Código de UI

Baixar OpenDesign Ver guia de uso

hamen/material-3-skill · skills/material-3/SKILL.mdSKILL.md

--- name: material-3 description: Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming, M3 Expressive (platform matrix), and accessibility. Use when: "material design", "MD3", "material you", "Jetpack Compose", "MaterialTheme", "material component", … --- ## Philosophy ## Current Updates: Google I/O 2026 ## Decision Tree ## Design Token System ## Jetpack Compose (primary) ## Web (limited): @material/web

Cabeçalho e títulos de seção lidos do arquivo upstream em 2026-09-14 · 31.218 caracteres no total

01 O que faz

O Que a Skill material-3 Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Orienta a implementação do Material Design 3 (Material You) do Google, com o Jetpack Compose Material3 como alvo principal, além de Flutter e um caminho web limitado via @material/web. Abrange o sistema de tokens md.sys para cor, tipografia, forma, elevação e movimento, uma referência rápida a mais de 30 componentes com suas variantes, layout e navegação adaptativos, tematização e cor dinâmica, a matriz da plataforma M3 Expressive e acessibilidade.

Um modo de auditoria atribui uma nota de 0 a 10 a um aplicativo ou página em dez categorias e gera um relatório de conformidade. É destinado a designers e desenvolvedores que precisam de padrões concretos do MD3: cinco classes de tamanho de janela, elevação tonal em vez de sombras, um sistema de espaçamento de 8dp e larguras máximas de conteúdo em janelas grandes.

O que ele produz

Um relatório de conformidade MD3 em markdown com uma nota geral e notas por categoria, problemas críticos, avisos, itens aprovados e correções priorizadas.
Um tema Compose construído a partir de MaterialTheme com um colorScheme fornecido por dynamicLightColorScheme, lightColorScheme ou código de tema gerado.
Um bloco de tema CSS de propriedades customizadas md-sys, incluindo uma variante de tema escuro aplicada por media query ou classe.

Veja o exemplo de prompt ↗

Como funciona

01
Comece pelo Compose, Salvo Indicação Contrária da Stack
O arquivo trata o Jetpack Compose Material3 como o caminho padrão, e a Árvore de Decisão direciona shells de aplicativo, componentes individuais, temas, formulários, navegação e exibição de dados para seções e arquivos de referência específicos antes que qualquer código seja escrito.
02
Aplique a Camada de Tokens
Todos os tokens do MD3 vivem no namespace md.sys; o Compose mapeia os mesmos papéis semânticos para MaterialTheme.colorScheme, typography e shapes, enquanto o web os mapeia para propriedades customizadas do CSS com prefixo md-sys.
03
Escolha os componentes na Referência Rápida
A tabela de componentes lista o nome do elemento web de cada componente, as principais variantes e a categoria, e sinaliza quais não têm implementação em @material/web, para que possam ser construídos com propriedades customizadas de CSS e HTML padrão.
04
Monte com os Padrões Comuns
Os padrões App Shell, Card Grid e Form Layout são fornecidos como HTML mais CSS, incluindo um breakpoint que transforma o navigation rail em bottom navigation em larguras compactas.
05
Faça a Auditoria Quando Solicitado
Quando invocado com audit, o skill inspeciona uma URL, arquivos-fonte ou um app em execução e avalia dez categorias de 0 a 10 antes de escrever o relatório.

02 Encontre o ideal para você

Quando Usar a Skill material-3

Use a skill material-3 no Claude Code ou Codex quando o trabalho for design de aplicativo mobile desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Construir uma nova tela ou app Android no Jetpack Compose com composables do androidx.compose.material3, como Scaffold, Button e NavigationBar.
Gerar um tema a partir do papel de parede do usuário com cor dinâmica no Android 12 e superior, retornando a esquemas claros e escuros estáticos caso contrário.
Um único layout que se adapta a celular, dispositivo dobrável, desktop, relógio e XR, em vez de um design fixo voltado primeiro para celular.
Auditar um app ou página existente em relação ao MD3 e obter um relatório com pontuação para trabalhar a partir dele.
Aplicar tema a uma UI web definindo propriedades customizadas de CSS do MD3 na raiz ou em qualquer elemento ancestral.

Conheça os Limites

Esperar recursos do M3 Expressive na web, já que o Material Web está apenas em manutenção e o Expressive não está implementado ali.
Renderização no servidor sem uma estratégia de hidratação, já que os web components são elementos customizados que precisam de JavaScript.
Projetos que ainda misturam bibliotecas do Material 2 e do Material 3, cujas APIs e estilos são incompatíveis.
Layouts feitos apenas para celular que ignoram telas grandes e dispositivos dobráveis, incluindo conteúdo interativo posicionado sobre a dobradiça.

O Que Fornecer

Um argumento de tarefaO skill recebe um argumento component, theme, layout, scaffold ou audit seguido de uma breve descrição ou uma URL, que seleciona qual seção ou arquivo de referência seguir.
Um alvo para auditarPara trabalhos de audit, forneça uma URL para inspeção no navegador, caminhos de arquivo para leitura do código-fonte, ou acesso a um app em execução.
Uma cor-semente para temas personalizadosUma única cor-semente é suficiente para derivar um esquema de cores completo; o arquivo indica o pacote material-color-utilities para gerar os valores.
Arquivos-fonte para auditorias de códigoAs auditorias do Compose leem arquivos Kotlin para encontrar uso de MaterialTheme, composables, valores brutos de Color, Dp fixos no código e semântica ausente.

03 Dentro da skill

Regras que o Skill material-3 Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Compose em Primeiro Lugar para Novos Trabalhos em Material
Para novos trabalhos em Android, o arquivo diz para preferir Jetpack Compose Material3 para componentes, APIs expressivas, scaffolds adaptativos e integração com a Styles API; Android Views só são aceitáveis em apps existentes.
Nunca Fixe Cores no Código
Use os tokens md-sys-color em vez de valores hex ou rgb brutos, porque cores fixas quebram a temática dinâmica, o modo escuro e o ajuste de contraste.
Mantenha os Pares Tonais Pretendidos
Combine cores apenas como projetado, por exemplo primary com on-primary e surface-container com on-surface; combinações arbitrárias quebram o contraste em cor dinâmica e nos modos de alto contraste.
Divisores Usam outline-variant
Os divisores são desenhados com outline-variant; outline é reservado para limites importantes, como bordas de campos de texto.
Importe Web Components Individualmente
Nunca faça barrel-import do pacote @material/web; importe apenas os módulos de componente em uso, pois importar tudo destrói o tamanho do bundle.
Restrinja a Largura em Janelas Grandes
Em janelas Grandes (1200dp+) e Extra-grandes (1600dp+), o conteúdo é limitado a uma largura máxima de 840-1040dp, porque linhas de texto de largura infinita são ilegíveis.
Elevação É Tonal, Não Sombra
O MD3 comunica elevação por meio de cor de superfície tonal em vez de sombras; sombras só são adicionadas quando um elemento precisa de separação extra de um fundo com muitos elementos.
Roboto Está Correto no MD3
Roboto ou Roboto Flex é a tipografia padrão do Material e a recomendação do frontend-design de evitar Roboto não se aplica; substitua-a apenas ao personalizar intencionalmente a escala de tipos.

04 Coloque em prática

Instalar material-3 no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar material-3 ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/hamen/material-3-skill --skill material-3

Forma genérica do CLI skills para skills/material-3/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Design de Aplicativo Mobile

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

We're moving our [Android app] from Material 2 to MD3. Set up MaterialTheme with dynamic color on Android 12+ and wire the md.sys color, type and shape tokens, then rebuild [screen name] as a Scaffold with a navigation rail on medium and expanded window size classes. We ship on foldables too, so keep interactive content off the hinge and constrain content width on large windows.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Verifique as taxas de contraste e as áreas de toque, não apenas o uso das funções do MD3.
Procure por cores hex fixas nas folhas de estilo web.
Procure valores de Color brutos nos códigos Kotlin.
Procure importações remanescentes do Material 2 em JavaScript e TypeScript.
Redimensione a viewport ou use o modo responsivo para verificar o layout em cada breakpoint.

No OpenDesign importe material-3 a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: hamen
Repository: github.com/hamen/material-3-skill Branch master
Arquivo da skill: skills/material-3/SKILL.md Checksum de conteúdo registrado na verificação; commit 14385f2
License: MIT De LICENSE.
Estrelas do repositório: 1.384 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório hamen/material-3-skill. Não é uma avaliação ou contagem de uso para material-3.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

FilosofiaTrês princípios, pessoal, adaptativo e expressivo, que definem a cor dinâmica, as classes de tamanho de janela e o movimento com spring.
Árvore de DecisãoDireciona o que você está construindo e qual plataforma para seções e arquivos de referência.
Sistema de Design TokensTokens md.sys de cor, tipo, forma, elevação e movimento com mapeamentos para Compose e CSS.
Referência Rápida de ComponentesTabela com mais de 30 componentes com elementos web, principais variantes e categoria.
Jetpack Compose (principal)Configuração do androidx.compose.material3, MaterialTheme, cor dinâmica, UI adaptativa e insets.
Web (limitado): @material/webComponentes web em modo de manutenção, importações individuais, personalização de tema via CSS custom properties e tema escuro.
Padrões ComunsTrechos de app shell, grade de cards e layout de formulário em HTML e CSS.
AntipadrõesProibições rígidas envolvendo mistura de MD2

A Descrição da Própria Skill

Implemente o sistema de UI Material Design 3 (Material You) do Google. Primário: Jetpack Compose Material3 (MaterialTheme, componentes, layout adaptativo). Também Flutter e web limitado (@material/web, modo manutenção). Cobre tokens, mais de 30 componentes, layout, temas, M3 Expressive (matriz de plataforma) e acessibilidade. Use quando: "material design", "MD3", "material you", "Jetpack Compose", "MaterialTheme", "material component", "md3 button".

Descrição de front-matter do SKILL.md. O arquivo completo tem cerca de 31.218 caracteres. Leia o arquivo completo no GitHub.

Material 3

Execute material-3 em uma Tarefa Real de Design de Aplicativo Mobile.

Baixe OpenDesign, importe material-3 a partir do seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/hamen/material-3-skill --skill material-3

O Que a Skill material-3 Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill material-3

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o Skill material-3 Dá ao Claude Code e ao Codex

Compose em Primeiro Lugar para Novos Trabalhos em Material

Nunca Fixe Cores no Código

Mantenha os Pares Tonais Pretendidos

Divisores Usam outline-variant

Importe Web Components Individualmente

Restrinja a Largura em Janelas Grandes

Elevação É Tonal, Não Sombra

Roboto Está Correto no MD3