Mui skill

As telas do seu app em Material UI saem com o tema da marca, espaçamento consistente e layout que se ajusta do celular ao monitor.

por davila7

instalações: 1.100
estrelas no GitHub: 32,9 mil
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

davila7
mui
As telas do seu app em Material UI saem com o tema da marca, espaçamento consistente e layout que se ajusta do celular ao monitor.Auditada1.100 instalações, grátis

O que ela faz

A skill ensina o Claude a trabalhar com o Material UI v7 (MUI) em React e TypeScript. Começa pelo que mudou da v6 pra v7: importações profundas que pararam de funcionar, o onBackdropClick que saiu do Modal e o padrão novo de slots e slotProps.

Mostra como estilizar pela propriedade sx, com os estilos no topo do componente ou num arquivo separado quando passam de 100 linhas, sempre usando as cores e o espaçamento do tema em vez de valor solto. Cobre Box, Paper, Stack, a grade de 12 colunas, tipografia, botões, ícones e os pontos de quebra do celular ao monitor grande.

Traz modelos prontos de cartão, janela de confirmação, formulário com validação e carregamento com spinner ou esqueleto, além de boas práticas como tipar os estilos e manter o espaçamento na escala do tema.

Nas palavras de quem fez

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI…

davila7, no SKILL.md

Quando usar

Montar o painel de um app React com Material UI
Aplicar as cores da sua marca no tema do MUI e usar em todas as telas
Deixar responsiva uma tela que quebra no celular
Pôr spinner ou esqueleto nas telas enquanto os dados carregam
Padronizar estilos espalhados com cor e espaçamento soltos

Depois de instalar, é só pedir assim

Cria uma página de configurações em MUI com formulário, validação e botão de salvar
Ajusta essa grade de cartões pra mostrar 1 por linha no celular e 4 no monitor
Troca essas cores fixas pelos tokens do tema do MUI

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Mui no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Mui, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a mui skill precisa pra funcionar?

De um projeto em React com o @mui/material (e o @mui/icons-material, se quiser os ícones). Não pede chave nem conta paga.

Serve pra migrar um projeto da v6 pra v7?

Só em parte. Ela lista as mudanças principais (importação profunda, onBackdropClick, slots e camadas de CSS), mas o exemplo de grade ainda usa o formato antigo (item, xs, md); na v7 a grade usa a propriedade size. Também não serve pra Tailwind nem outro kit de componentes.

Roda no Codex e no Antigravity?

Roda: é um SKILL.md com explicação e exemplos de código, sem nada exclusivo do Claude Code. Qualquer agente que lê skills consegue usar.

Levar essa skill

1x muiR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/davila7/claude-code-templates

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.