Skill · em Construir backend e dados

mui

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

Procedência

Origem: davila7/claude-code-templates
Caminho: cli-tool/components/skills/development/mui
Versão fixada: 57f899e5394bb8ca166f38eacae8f0853cbfe033
Licença: MIT
Espelhado em 25/09/2026
2 downloads no Claude Code Templates (lido em 25/09/2026)

Antes de instalar

6 arquivos · 44,1 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/mui/.

d=".claude/skills/mui"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/mui"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/resources/component-library.md" "$u/resources/component-library.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/theme-customization.md" "$u/resources/theme-customization.md" \
  -o "$d/skill-rules-fragment.json" "$u/skill-rules-fragment.json" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/mui/.

d="$HOME/.claude/skills/mui"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/mui"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/resources/component-library.md" "$u/resources/component-library.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/theme-customization.md" "$u/resources/theme-customization.md" \
  -o "$d/skill-rules-fragment.json" "$u/skill-rules-fragment.json" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/mui/.

d=".agents/skills/mui"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/mui"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/resources/component-library.md" "$u/resources/component-library.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/theme-customization.md" "$u/resources/theme-customization.md" \
  -o "$d/skill-rules-fragment.json" "$u/skill-rules-fragment.json" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/mui/.

d="$HOME/.agents/skills/mui"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/mui"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/resources/component-library.md" "$u/resources/component-library.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/theme-customization.md" "$u/resources/theme-customization.md" \
  -o "$d/skill-rules-fragment.json" "$u/skill-rules-fragment.json" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/mui/.

d=".agents/skills/mui"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/mui"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/resources/component-library.md" "$u/resources/component-library.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/theme-customization.md" "$u/resources/theme-customization.md" \
  -o "$d/skill-rules-fragment.json" "$u/skill-rules-fragment.json" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/mui/.

d="$HOME/.gemini/antigravity-cli/skills/mui"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/development/mui"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/README.md" "$u/README.md" \
  -o "$d/resources/component-library.md" "$u/resources/component-library.md" \
  -o "$d/resources/styling-guide.md" "$u/resources/styling-guide.md" \
  -o "$d/resources/theme-customization.md" "$u/resources/theme-customization.md" \
  -o "$d/skill-rules-fragment.json" "$u/skill-rules-fragment.json" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.mui

Prévia do SKILL.md

---
name: mui
description: Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.
---

# MUI v7 Patterns

## Purpose

Material-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.

**Note**: MUI v7 breaking changes from v6:
- Deep imports no longer work - use package exports field
- `onBackdropClick` removed from Modal - use `onClose` instead
- All components now use standardized `slots` and `slotProps` pattern
- CSS layers support via `enableCssLayer` config (works with Tailwind v4)

## When to Use This Skill

- Styling components with MUI sx prop
- Using MUI components (Box, Grid, Paper, Typography, etc.)
- Theme customization and usage
- Responsive design with MUI breakpoints
- MUI-specific utilities and hooks

---

## Quick Start

### Basic MUI Component

```typescript
import { Box, Typography, Button, Paper } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const styles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
…

Ver todo o marketplace