Provides MUI v7 styling and theming patterns via sx and components.
npx skills add https://github.com/blencorp/claude-code-kit --skill mui
Please help me install this Agent Skill. Skill: mui Source: https://github.com/blencorp/claude-code-kit/tree/main/cli/kits/mui/skills/mui Command: npx skills add https://github.com/blencorp/claude-code-kit --skill mui
This Skill provides comprehensive patterns for using Material-UI v7 components and styling. It simplifies UI development by guiding you through sx prop styling, theme integration, and responsive design, enabling you to build accessible and visually consistent applications efficiently.
sx Prop Styling: Master the sx prop for inline, theme-aware, and responsive styling, reducing the need for separate CSS files.sx prop to apply theme-aware colors, spacing, and responsive adjustments, ensuring your component looks great on all screen sizes.Use the mui skill to style a new Box component with primary background color and responsive padding.
High-intent search queries and answers about installing and using this skill.
The sx prop in Material-UI v7 enables theme-aware, responsive inline styling without separate CSS files. Write style objects directly on components like Box, Button, or Grid, using theme tokens for colors, spacing, and typography while supporting breakpoint-based responsive adjustments.
Material-UI's theming system lets you define colors, typography, spacing, and component overrides once, then apply them globally. Create a custom theme with createTheme(), wrap your app in ThemeProvider, and reference theme values through the sx prop or styled components for UI consistency.
Use Material-UI's breakpoint system within the sx prop to apply mobile-first responsive styles. Define styles as objects with breakpoint keys (xs, sm, md, lg, xl) to adapt padding, grid columns, and component visibility across screen sizes without media queries.
Yes, Material-UI v7 supports theme overrides and slots/slotProps to customize component appearance globally. Define component-level style rules in your theme to enforce consistent Button colors, spacing, or typography across your entire application without inline styling.
Material-UI optimizes performance through CSS-in-JS caching, efficient theme variable resolution, and proper use of sx prop styling. Avoid inline object creation in render loops, leverage theme tokens instead of hardcoded values, and use styled components for frequently-rendered components.
Material-UI v7 includes CSS variables support for runtime theme switching and dynamic styling. Enable CSS variables in your theme configuration to inject theme tokens as CSS custom properties, enabling theme toggles and real-time color scheme changes without full recompilation.
ggombeeAutomate frontend testing environment setup with Jest or Vitest and MSW.
svssdevaGuide Tailwind CSS development patterns for responsive, accessible UI.
CamiloAndresGTRUniandesEnforce safe Tailwind class composition and theme usage in React/TypeScript.
xurenluGuide reusable UI component design across React, Vue, and Svelte.