mui
MUI Patterns
Purpose
Material-UI patterns for component usage, styling with sx prop, theme integration, and responsive design. This skill supports MUI v5, v6, and v7.
Version Detection
Before applying patterns, check the project's MUI version:
grep '"@mui/material"' package.json
Then apply version-specific guidance:
- v5.x: See v5-notes.md for v5-specific patterns
- v7.x: See v7-changes.md for v7 breaking changes
- v6.x: Use v7 patterns (most are compatible)
More from bnadlerjr/dotfiles
slicing-elephant-carpaccio
Breaks features into ultra-thin vertical slices using Elephant Carpaccio methodology. Use when planning new features, breaking down epics, slicing work across layers, or when a task spans multiple components. Produces an ordered backlog of thin slices, each independently working, testable, and demoable. Handles single-repo, monorepo, and multi-repo architectures.
14receiving-code-review
Guides technical evaluation of code review feedback before implementation. Use when receiving PR comments, review suggestions, GitHub feedback, or when asked to address reviewer feedback. Emphasizes verification and reasoned pushback over blind agreement.
13breaking-down-stories
Breaks down user stories into small, actionable tasks. Use when decomposing user stories, planning sprint work, creating task lists from tickets, or when the user mentions story breakdown, task decomposition, or sprint planning.
12applying-swiss-design
Applies Swiss/International Typographic Style principles to create clear, functional output. Use when designing interfaces, data visualizations, documentation, CLI output, or any output where clarity matters. Recognizes requests like "make it cleaner", "reduce clutter", "too busy", "improve readability", "visual hierarchy", "simplify the layout".
1coding-workflow
Use when user asks to build a feature, implement something new, or make significant code changes. Recognizes requests like "build", "implement", "create a new feature", "add functionality", "develop", "I need to build X", "let's implement", "new feature request", "make these changes". Orchestrates a four-stage workflow (Research → Brainstorm → Plan → Implement) using the appropriate thought pattern skill at each stage.
1practicing-tdd
Enforces test-first development with Red-Green-Refactor cycle. Use when implementing features, fixing bugs, writing tests, or when someone mentions TDD, test-driven, "test first", or "write a failing test".
1