mui-styling

Solid

Material-UI (MUI) styling standards: sx-prop priority, theme tokens, spacing scale, responsive design, and accessibility. TRIGGER when: styling MUI components, defining theme tokens, or building responsive layouts. SKIP: component logic and hooks (use react-patterns); cross-stack UX/design decisions (use ui-ux-pro-max).

Web & Frontend 15 stars 0 forks Updated 5 days ago MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# MUI Styling Skill Material-UI styling standards and best practices. ## When to Apply - Creating styled components - Implementing responsive design - Theme customization - UI consistency review --- ## Styling Approach Priority | Priority | Approach | Use When | |----------|----------|----------| | 1st | `sx` prop | Most styling needs | | 2nd | `styled()` API | Reusable styled components | | 3rd | Theme overrides | Global component defaults | | Avoid | Inline CSS / CSS files | Never use in MUI projects | --- ## Spacing System ### Spacing Scale | Value | Pixels | Usage | |-------|--------|-------| | 0.5 | 4px | Tight spacing | | 1 | 8px | Default small | | 2 | 16px | Default medium | | 3 | 24px | Section spacing | | 4 | 32px | Large spacing | ### Spacing Props | Prop | CSS Property | |------|--------------| | `m` | margin | | `p` | padding | | `mt`, `mr`, `mb`, `ml` | margin-top/right/bottom/left | | `pt`, `pr`, `pb`, `pl` | padding-top/right/bottom/left | | `mx`, `my` | margin x/y axis | | `px`, `py` | padding x/y axis | | `gap` | flex/grid gap | --- ## Color System ### Theme Colors | Category | Values | |----------|--------| | Primary | `primary.main`, `primary.light`, `primary.dark`, `primary.contrastText` | | Secondary | `secondary.main`, `secondary.light`, `secondary.dark` | | Status | `error.main`, `warning.main`, `info.main`, `success.main` | | Grey | `grey.100` through `grey.900` | | Background | `background.default`, `background.paper` | | Text | `text.pr...

Details

Author: komluk
Repository: komluk/scaffolding
Created: 5 months ago
Last Updated: 5 days ago
Language: Shell
License: MIT

Integrates with

Anthropic · AI

Bundled in these plugins

scaffolding

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

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.

1 Updated 2 days ago

NafisRayan

Web & Frontend Listed

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

2 Updated today

ibahgat

Web & Frontend Listed

ui-ux-pro-max

1 Updated 1 months ago

chuanchuan123321