mui

Visão geral do skill mui

O mui skill é um guia focado para trabalhar com Material UI v7 em projetos React, especialmente quando você precisa de estilos corretos com sx, componentes orientados por tema, layouts responsivos e padrões atualizados da v7 — em vez de conselhos genéricos de UI para React. Ele é mais indicado para desenvolvedores frontend, usuários de codificação assistida por IA e equipes que já usam @mui/material e querem implementar mais rápido, com menos erros específicos de versão.

O que o skill mui ajuda você a fazer

Use este mui skill quando sua necessidade real não for “aprender MUI do zero”, mas sim entregar com segurança um componente, página, layout, tema ou migração. Ele funciona melhor para:

• criar componentes MUI com imports idiomáticos
• estilizar com a prop sx em vez de CSS improvisado
• usar tokens de tema para espaçamento, paleta e tipografia
• aplicar breakpoints responsivos de forma limpa
• lidar com mudanças do MUI v7 que quebram exemplos antigos

Quem deve instalar este skill mui

Este skill é uma boa escolha se você:

• já usa React e quer respostas melhores de MUI a partir de um agente de IA
• precisa de um guia reutilizável de mui para trabalho frontend recorrente
• está migrando do MUI v6 e quer evitar padrões desatualizados
• quer prompts que gerem código de UI consistente com o tema

Se você nem usa MUI, ele será específico demais.

Por que este skill mui é mais útil do que um prompt genérico

Um prompt simples como “make a Material UI form” costuma devolver código misturando versões, uso fraco de tema ou estilos que ignoram as convenções do MUI. O mui skill adiciona guardrails práticos em torno de:

• padrões de componentes do MUI v7
• sx como caminho principal de estilização
• escolhas de imports de pacotes
• uso de props responsivas
• decisões de design guiadas primeiro pelo tema

Na prática, isso costuma significar menos limpeza depois do primeiro rascunho gerado.

Os diferenciais mais importantes

O principal valor deste mui skill não está na abrangência. Está em direcionar o agente para os padrões com que usuários de MUI realmente se importam:

• orientação compatível com v7, incluindo breaking changes em relação à v6
• exemplos centrados em Box, Typography, Paper, Button, Grid2, Stack e blocos comuns de UI de aplicação
• referências concretas de estilização em resources/styling-guide.md
• padrões práticos de configuração de tema em resources/theme-customization.md

Principais ressalvas de versão destacadas pelo skill mui

Este skill aponta de forma explícita para realidades do MUI v7 que frequentemente fazem código gerado por IA tropeçar:

• deep imports deixaram de ser o padrão seguro; prefira package exports
• onBackdropClick em Modal foi removido; use onClose
• o padrão slots e slotProps agora é o padrão consolidado
• suporte a CSS layers importa em setups como Tailwind v4 com enableCssLayer

Só esses detalhes já podem justificar o uso do skill em vez de depender de exemplos antigos de blog.

Como usar o skill mui

Como instalar o skill mui

Instale o skill no contexto do toolkit do seu agente com:

npx skills add softaworks/agent-toolkit --skill mui

Se o seu ambiente usa outro carregador de skills, mantenha o mesmo repo e o mesmo skill slug: softaworks/agent-toolkit, skill mui.

O que ler primeiro antes de usar o skill mui

Comece por estes arquivos, nesta ordem:

1. skills/mui/SKILL.md
2. skills/mui/resources/styling-guide.md
3. skills/mui/resources/component-library.md
4. skills/mui/resources/theme-customization.md
5. skills/mui/skill-rules-fragment.json

Essa ordem importa porque os resources trazem os padrões concretos de implementação, enquanto o arquivo de regras mostra que tipos de prompts e arquivos devem acionar o mui skill.

Que tipo de entrada o skill mui precisa

O mui skill funciona melhor quando você fornece contexto frontend suficiente para o agente escolher o componente, o layout e o padrão de tema corretos. Entradas úteis incluem:

• o componente ou a página que você quer construir
• sua versão do MUI, principalmente se estiver migrando
• se a estilização deve usar sx, theme overrides ou styled
• requisitos responsivos como xs, sm, md
• comportamento de formulário, diálogo, card, navegação ou layout
• caminhos de arquivos de tema já existentes, como src/theme.ts
• restrições de acessibilidade ou design

Entrada fraca:

• “Make this look better with MUI”

Entrada forte:

• “Create a responsive MUI v7 settings page using Container, Paper, Stack, TextField, and Switch, styled with sx, using theme spacing and palette tokens, with mobile-first layout and no hardcoded colors.”

Como transformar um objetivo vago em um bom prompt para o skill mui

Um prompt forte de uso do mui geralmente inclui cinco partes:

1. UI de destino
2. conjunto de componentes
3. método de estilização
4. restrições de tema/responsividade
5. formato de saída

Exemplo:

“Using MUI v7, build a profile card component in TypeScript with Card, Avatar, Typography, and Button. Use sx only, reference theme palette and spacing, support xs to md responsive behavior, and return a self-contained component plus any extracted SxProps<Theme> styles.”

Isso é melhor do que um pedido genérico porque orienta o agente sobre como permanecer dentro do fluxo de trabalho pretendido pelo MUI.

Fluxo de trabalho prático com o skill mui

Um fluxo confiável para este mui skill é:

1. identificar se a tarefa é de componente, layout, formulário ou tema
2. nomear exatamente quais primitivas do MUI você quer usar
3. exigir sx e tokens de tema, a menos que você realmente precise de outro caminho
4. pedir comportamento responsivo de forma explícita
5. revisar imports gerados e compatibilidade com v7
6. depois refinar espaçamento, variants e customização em nível de slot

Isso mantém o primeiro rascunho mais próximo de algo pronto para produção.

Frases-gatilho que devem acionar o skill mui

O fragmento de regras do repo sugere que prompts com termos como estes são especialmente apropriados para mui:

• mui
• material-ui
• @mui/material
• sx prop
• ThemeProvider
• createTheme
• useTheme
• Dialog
• Drawer
• TextField
• Autocomplete

Se o seu agente não aciona skills automaticamente, use esses termos de forma intencional no pedido.

Boas práticas para geração de componentes

Peça ao agente que produza código seguindo os padrões enfatizados pelo skill:

• importar de @mui/material ou de package exports aprovados
• manter os estilos orientados por tema
• usar SxProps<Theme> quando extrair estilos melhorar a reutilização
• preferir primitivas de layout do MUI como Box, Stack, Container e Grid2
• usar objetos de breakpoint em sx para comportamento responsivo

Essa combinação geralmente gera saída de mui mais limpa do que misturar CSS inline, CSS modules e classes utilitárias arbitrárias.

Boas práticas para trabalho com tema

Quando a tarefa for customização de tema, seja explícito sobre o escopo:

• apenas paleta
• apenas tipografia
• defaults de componentes
• dark mode
• integração global de ThemeProvider

Exemplo de prompt:

“Update our MUI v7 theme to use a custom primary and secondary palette, Inter typography, rounded corners, and button text without uppercase. Show the createTheme object and the ThemeProvider integration.”

Isso se alinha bem ao resource de tema do skill e evita estilizações pontuais que deveriam viver no tema.

Arquivos comuns do repositório aos quais este skill mui se aplica

O mui skill é especialmente relevante quando seu repo contém:

• theme.ts ou theme.tsx
• components/**/*.tsx
• *.styles.ts ou *.styles.tsx
• imports de @mui/material, @mui/icons-material ou @mui/system

Se sua base de código já tem esses sinais, o skill é um forte candidato de instalação para workflows de Frontend Development.

O que validar depois da primeira saída

Antes de aceitar o código gerado, verifique:

• se os imports são válidos para MUI v7
• se não há onBackdropClick obsoleto
• se as props responsivas usam padrões atuais
• se valores de tema são usados no lugar de hex e px crus por toda parte
• se o uso de Grid2 corresponde às convenções do pacote instalado
• se slots e slotProps estão sendo usados quando a customização do componente exige isso

Essas verificações capturam cedo os erros mais caros.

FAQ do skill mui

Este skill mui é bom para iniciantes?

Sim, se você já conhece o básico de React. O skill oferece um guia prático de mui para tarefas comuns sem obrigar você a ler toda a documentação antes. Já quem está começando do zero em React ainda pode precisar de ajuda externa para state de componente, props e estrutura da aplicação.

O skill mui substitui a documentação do MUI?

Não. Ele funciona melhor como acelerador de implementação, não como referência canônica de API. Use-o para gerar primeiros rascunhos melhores e evitar erros de versão; depois, confirme props de casos de borda na documentação oficial quando necessário.

Isto é voltado principalmente para MUI v7?

Sim. Esse é um dos principais motivos para usá-lo. O skill destaca mudanças que tornam exemplos antigos pouco confiáveis, então ele é especialmente útil se seus prompts habituais continuam produzindo padrões da era v5 ou v6.

Quando eu não devo usar este skill mui?

Pule este skill quando:

• seu projeto não usa MUI
• você precisa de uma resposta de design system agnóstica de framework
• você quer CSS puro, saída priorizando Tailwind ou soluções de UI fora de React
• sua tarefa é muito mais de lógica de negócio do que de apresentação

Nesses casos, a especialização não vai ajudar muito.

Em que isso difere de pedir “Material UI code” diretamente?

Prompts comuns frequentemente deixam passar o modelo de estilização do MUI e as nuances entre versões. O mui skill melhora a saída ao conduzir o agente para sx, integração com tema, breakpoints responsivos e convenções atuais dos componentes. Isso normalmente reduz o tempo de retrabalho.

Posso usar o skill mui para migração?

Sim. Ele se encaixa bem em prompts orientados a migração, como:

• substituir APIs obsoletas
• atualizar imports
• mover estilos para sx
• adaptar código antigo de customização para slots e slotProps

Para tarefas de migração, sempre informe sua versão atual e a versão de destino.

Como melhorar o skill mui

Dê ao agente especificações de UI mais fortes

A forma mais rápida de melhorar a saída de mui é parar de pedir “um componente bonito” e passar a definir:

• estrutura do layout
• primitivas de componentes
• responsividade
• intenção visual
• comportamento de estado
• regras de tema

Por exemplo, especifique “duas colunas no desktop, uma coluna no mobile, seções com Paper, CTA principal, estado de validação em TextField e espaçamento baseado em tema” em vez de “make a settings page”.

Diga qual caminho de estilização ele deve usar

O MUI suporta várias abordagens de estilização, mas este skill favorece claramente sx para a maior parte do trabalho com componentes. Se você não disser isso, a saída pode desviar.

Instrução útil:

• “Use sx for all local styling and keep values theme-aware.”

Essa única linha já melhora muito a consistência.

Forneça o tema existente e os design tokens

Se o seu projeto já tem um tema, inclua os nomes relevantes da paleta, a escala de espaçamento, as escolhas de tipografia e os overrides de componentes. O mui skill melhora de forma concreta quando consegue se alinhar ao seu design system real em vez de inventar um.

Melhores entradas para compartilhar:

• theme.ts
• nomes de paleta customizados
• variants tipográficas
• requisitos de dark mode
• regras preferidas de radius e espaçamento

Peça estilos extraídos só quando isso realmente ajudar

Para componentes pequenos, sx inline costuma ser mais claro. Para estilos reutilizados ou complexos, peça const styles: Record<string, SxProps<Theme>>. Se você não deixar essa escolha explícita, a saída pode ficar fragmentada demais ou densa demais.

Um bom prompt de refinamento:

• “Refactor repeated sx blocks into typed reusable style objects.”

Fique de olho nos modos de falha mais comuns

Os problemas mais comuns no uso de mui são:

• cores hardcoded em vez de tokens da paleta
• espaçamento excessivamente baseado em pixels crus em vez de theme spacing
• imports desatualizados ou APIs obsoletas
• layouts não responsivos
• uso excessivo de CSS customizado quando primitivas do MUI já resolvem o problema

É melhor corrigir isso apertando o prompt do que fazendo pós-edição silenciosa.

Itere com prompts de continuação direcionados

Depois do primeiro rascunho, não peça “improve this”. Peça um tipo de melhoria por vez:

• “Make the layout mobile-first using breakpoint objects.”
• “Replace hardcoded colors with theme palette tokens.”
• “Convert the modal behavior to v7-safe onClose handling.”
• “Use slotProps for internal part customization.”

Esse estilo de iteração torna o mui skill muito mais confiável.

Use os arquivos de resource como âncoras de prompt

Uma forma prática de melhorar os resultados é mencionar explicitamente os tópicos internos de resource que o skill cobre:

• padrões de biblioteca de componentes
• padrões do guia de estilização
• padrões de customização de tema

Mesmo que o seu agente não abra literalmente esses arquivos, usar esse vocabulário no prompt o empurra na direção do comportamento pretendido pelo guia de mui.

Melhore a qualidade de saída para equipes de Frontend Development

Para uso em equipe, padronize seus prompts em torno de:

• versão do MUI
• exigência de TypeScript
• sx como estilização padrão
• uso de tokens de tema
• expectativas de breakpoint
• noções básicas de acessibilidade
• convenções de import

Isso transforma o mui skill de um ajudante pontual em uma ferramenta repetível de implementação frontend.

Como avaliar se o skill mui está ajudando

O skill está cumprindo seu papel se o código gerado:

• parece com o restante da sua base MUI
• usa padrões atuais compatíveis com v7
• exige menos correções de import e estilização
• respeita o seu tema
• evita desvios genéricos de estilização em React

Se não for esse o caso, a solução geralmente é dar contexto melhor — não abandonar o skill.