{"id":"76f54e8d-e889-48ac-bbf2-9a8968bb8203","shortId":"aqEhhN","kind":"skill","title":"mui","tagline":"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.","description":"# MUI v7 Patterns\n\n## Purpose\n\nMaterial-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.\n\n**Note**: MUI v7 breaking changes from v6:\n- Deep imports no longer work - use package exports field\n- `onBackdropClick` removed from Modal - use `onClose` instead\n- All components now use standardized `slots` and `slotProps` pattern\n- CSS layers support via `enableCssLayer` config (works with Tailwind v4)\n\n## When to Use This Skill\n\n- Styling components with MUI sx prop\n- Using MUI components (Box, Grid, Paper, Typography, etc.)\n- Theme customization and usage\n- Responsive design with MUI breakpoints\n- MUI-specific utilities and hooks\n\n---\n\n## Quick Start\n\n### Basic MUI Component\n\n```typescript\nimport { Box, Typography, Button, Paper } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material';\n\nconst styles: Record<string, SxProps<Theme>> = {\n  container: {\n    p: 2,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n  },\n  header: {\n    mb: 3,\n    fontSize: '1.5rem',\n    fontWeight: 600,\n  },\n};\n\nfunction MyComponent() {\n  return (\n    <Paper sx={styles.container}>\n      <Typography sx={styles.header}>\n        Title\n      </Typography>\n      <Button variant=\"contained\">\n        Action\n      </Button>\n    </Paper>\n  );\n}\n```\n\n---\n\n## Styling Patterns\n\n### Inline Styles (< 100 lines)\n\nFor components with simple styling, define styles at the top:\n\n```typescript\nimport type { SxProps, Theme } from '@mui/material';\n\nconst componentStyles: Record<string, SxProps<Theme>> = {\n  container: {\n    p: 2,\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  header: {\n    mb: 2,\n    color: 'primary.main',\n  },\n  button: {\n    mt: 'auto',\n    alignSelf: 'flex-end',\n  },\n};\n\nfunction Component() {\n  return (\n    <Box sx={componentStyles.container}>\n      <Typography sx={componentStyles.header}>Header</Typography>\n      <Button sx={componentStyles.button}>Action</Button>\n    </Box>\n  );\n}\n```\n\n### Separate Styles File (>= 100 lines)\n\nFor complex components, create separate style file:\n\n```typescript\n// UserProfile.styles.ts\nimport type { SxProps, Theme } from '@mui/material';\n\nexport const userProfileStyles: Record<string, SxProps<Theme>> = {\n  container: {\n    p: 3,\n    maxWidth: 800,\n    mx: 'auto',\n  },\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    mb: 3,\n  },\n  // ... many more styles\n};\n\n// UserProfile.tsx\nimport { userProfileStyles as styles } from './UserProfile.styles';\n\nfunction UserProfile() {\n  return <Box sx={styles.container}>...</Box>;\n}\n```\n\n---\n\n## Common Components\n\n### Layout Components\n\n```typescript\n// Box - Generic container\n<Box sx={{ p: 2, bgcolor: 'background.paper' }}>\n  Content\n</Box>\n\n// Paper - Elevated surface\n<Paper elevation={2} sx={{ p: 3 }}>\n  Content\n</Paper>\n\n// Container - Centered content with max-width\n<Container maxWidth=\"lg\">\n  Content\n</Container>\n\n// Stack - Flex container with spacing\n<Stack spacing={2} direction=\"row\">\n  <Item />\n  <Item />\n</Stack>\n```\n\n### Grid System\n\n```typescript\nimport { Grid } from '@mui/material';\n\n// 12-column grid\n<Grid container spacing={2}>\n  <Grid item xs={12} md={6}>\n    Left half\n  </Grid>\n  <Grid item xs={12} md={6}>\n    Right half\n  </Grid>\n</Grid>\n\n// Responsive grid\n<Grid container spacing={3}>\n  <Grid item xs={12} sm={6} md={4} lg={3}>\n    Card\n  </Grid>\n  {/* Repeat for more cards */}\n</Grid>\n```\n\n### Typography\n\n```typescript\n<Typography variant=\"h1\">Heading 1</Typography>\n<Typography variant=\"h2\">Heading 2</Typography>\n<Typography variant=\"body1\">Body text</Typography>\n<Typography variant=\"caption\">Small text</Typography>\n\n// With custom styling\n<Typography\n  variant=\"h4\"\n  sx={{\n    color: 'primary.main',\n    fontWeight: 600,\n    mb: 2,\n  }}\n>\n  Custom Heading\n</Typography>\n```\n\n### Buttons\n\n```typescript\n// Variants\n<Button variant=\"contained\">Contained</Button>\n<Button variant=\"outlined\">Outlined</Button>\n<Button variant=\"text\">Text</Button>\n\n// Colors\n<Button variant=\"contained\" color=\"primary\">Primary</Button>\n<Button variant=\"contained\" color=\"secondary\">Secondary</Button>\n<Button variant=\"contained\" color=\"error\">Error</Button>\n\n// With icons\nimport { Add as AddIcon } from '@mui/icons-material';\n\n<Button startIcon={<AddIcon />}>Add Item</Button>\n```\n\n---\n\n## Theme Integration\n\n### Using Theme Values\n\n```typescript\nimport { useTheme } from '@mui/material';\n\nfunction Component() {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        bgcolor: theme.palette.primary.main,\n        color: theme.palette.primary.contrastText,\n        borderRadius: theme.shape.borderRadius,\n      }}\n    >\n      Themed box\n    </Box>\n  );\n}\n```\n\n### Theme in sx Prop\n\n```typescript\n<Box\n  sx={{\n    // Access theme in sx\n    color: 'primary.main',          // theme.palette.primary.main\n    bgcolor: 'background.paper',     // theme.palette.background.paper\n    p: 2,                            // theme.spacing(2)\n    borderRadius: 1,                 // theme.shape.borderRadius\n  }}\n>\n  Content\n</Box>\n\n// Callback for advanced usage\n<Box\n  sx={(theme) => ({\n    color: theme.palette.primary.main,\n    '&:hover': {\n      color: theme.palette.primary.dark,\n    },\n  })}\n>\n  Hover me\n</Box>\n```\n\n---\n\n## Responsive Design\n\n### Breakpoints\n\n```typescript\n// Mobile-first responsive values\n<Box\n  sx={{\n    width: {\n      xs: '100%',    // 0-600px\n      sm: '80%',     // 600-900px\n      md: '60%',     // 900-1200px\n      lg: '40%',     // 1200-1536px\n      xl: '30%',     // 1536px+\n    },\n  }}\n>\n  Responsive width\n</Box>\n\n// Responsive display\n<Box\n  sx={{\n    display: {\n      xs: 'none',    // Hidden on mobile\n      md: 'block',   // Visible on desktop\n    },\n  }}\n>\n  Desktop only\n</Box>\n```\n\n### Responsive Typography\n\n```typescript\n<Typography\n  sx={{\n    fontSize: {\n      xs: '1rem',\n      md: '1.5rem',\n      lg: '2rem',\n    },\n    lineHeight: {\n      xs: 1.5,\n      md: 1.75,\n    },\n  }}\n>\n  Responsive text\n</Typography>\n```\n\n---\n\n## Forms\n\n```typescript\nimport { TextField, Stack, Button } from '@mui/material';\n\n<Box component=\"form\" onSubmit={handleSubmit}>\n  <Stack spacing={2}>\n    <TextField\n      label=\"Email\"\n      type=\"email\"\n      value={email}\n      onChange={(e) => setEmail(e.target.value)}\n      fullWidth\n      required\n      error={!!errors.email}\n      helperText={errors.email}\n    />\n    <Button type=\"submit\" variant=\"contained\">Submit</Button>\n  </Stack>\n</Box>\n```\n\n---\n\n## Common Patterns\n\n### Card Component\n\n```typescript\nimport { Card, CardContent, CardActions, Typography, Button } from '@mui/material';\n\n<Card>\n  <CardContent>\n    <Typography variant=\"h5\" component=\"div\">\n      Title\n    </Typography>\n    <Typography variant=\"body2\" color=\"text.secondary\">\n      Description\n    </Typography>\n  </CardContent>\n  <CardActions>\n    <Button size=\"small\">Learn More</Button>\n  </CardActions>\n</Card>\n```\n\n### Dialog/Modal\n\n```typescript\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\n\n<Dialog open={open} onClose={handleClose}>\n  <DialogTitle>Confirm Action</DialogTitle>\n  <DialogContent>\n    Are you sure you want to proceed?\n  </DialogContent>\n  <DialogActions>\n    <Button onClick={handleClose}>Cancel</Button>\n    <Button onClick={handleConfirm} variant=\"contained\">\n      Confirm\n    </Button>\n  </DialogActions>\n</Dialog>\n```\n\n### Loading States\n\n```typescript\nimport { CircularProgress, Skeleton } from '@mui/material';\n\n// Spinner\n<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>\n  <CircularProgress />\n</Box>\n\n// Skeleton\n<Stack spacing={1}>\n  <Skeleton variant=\"text\" width=\"60%\" />\n  <Skeleton variant=\"rectangular\" height={200} />\n  <Skeleton variant=\"text\" width=\"40%\" />\n</Stack>\n```\n\n---\n\n## MUI-Specific Hooks\n\n### useMuiSnackbar\n\n```typescript\nimport { useMuiSnackbar } from '@/hooks/useMuiSnackbar';\n\nfunction Component() {\n  const { showSuccess, showError, showInfo } = useMuiSnackbar();\n\n  const handleSave = async () => {\n    try {\n      await saveData();\n      showSuccess('Saved successfully');\n    } catch (error) {\n      showError('Failed to save');\n    }\n  };\n\n  return <Button onClick={handleSave}>Save</Button>;\n}\n```\n\n---\n\n## Icons\n\n```typescript\nimport { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';\nimport { Button, IconButton } from '@mui/material';\n\n<Button startIcon={<AddIcon />}>Add</Button>\n<IconButton onClick={handleDelete}><DeleteIcon /></IconButton>\n```\n\n---\n\n## Best Practices\n\n### 1. Type Your sx Props\n\n```typescript\nimport type { SxProps, Theme } from '@mui/material';\n\n// ✅ Good\nconst styles: Record<string, SxProps<Theme>> = {\n  container: { p: 2 },\n};\n\n// ❌ Avoid\nconst styles = {\n  container: { p: 2 }, // No type safety\n};\n```\n\n### 2. Use Theme Tokens\n\n```typescript\n// ✅ Good: Use theme tokens\n<Box sx={{ color: 'primary.main', p: 2 }} />\n\n// ❌ Avoid: Hardcoded values\n<Box sx={{ color: '#1976d2', padding: '16px' }} />\n```\n\n### 3. Consistent Spacing\n\n```typescript\n// ✅ Good: Use spacing scale\n<Box sx={{ p: 2, mb: 3, mt: 1 }} />\n\n// ❌ Avoid: Random pixel values\n<Box sx={{ padding: '17px', marginBottom: '25px' }} />\n```\n\n---\n\n## Additional Resources\n\nFor more detailed patterns, see:\n- [styling-guide.md](resources/styling-guide.md) - Advanced styling patterns\n- [component-library.md](resources/component-library.md) - Component examples\n- [theme-customization.md](resources/theme-customization.md) - Theme setup","tags":["mui","agent","toolkit","softaworks","agent-skills","automation","claude","claude-code","coding-agent","development"],"capabilities":["skill","source-softaworks","skill-mui","topic-agent-skills","topic-automation","topic-claude","topic-claude-code","topic-coding-agent","topic-development"],"categories":["agent-toolkit"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/softaworks/agent-toolkit/mui","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add softaworks/agent-toolkit","source_repo":"https://github.com/softaworks/agent-toolkit","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 1689 github stars · SKILL.md body (9,497 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-03T00:52:50.152Z","embedding":null,"createdAt":"2026-04-18T21:54:38.830Z","updatedAt":"2026-05-03T00:52:50.152Z","lastSeenAt":"2026-05-03T00:52:50.152Z","tsv":"'-1200':543 '-1536':548 '-600':533 '-900':538 '/hooks/usemuisnackbar':712 '/userprofile.styles':303 '0':532 '1':407,501,697,764,833 '1.5':174,581,587 '1.75':589 '100':193,253,531 '12':360,370,378,392 '1200':547 '1536px':552 '16px':817 '17px':841 '1976d2':815 '1rem':579 '2':163,169,219,226,321,330,350,366,409,426,470,497,499,607,784,790,794,808,829 '200':702 '2025':47 '25px':843 '2rem':584 '3':172,278,293,333,388,398,693,818,831 '30':551 '4':396 '40':546 '6':372,380,394 '60':541 '600':177,424,537 '80':536 '800':280 '900':542 'access':486 'action':188,249,659 'add':442,449,743,758 'addicon':444,745 'addit':844 'advanc':506,853 'alignitem':290 'alignself':232 'async':722 'auto':231,282 'avoid':785,809,834 'await':724 'background.paper':323,494 'basic':139 'best':762 'bgcolor':322,471,493 'block':566 'bodi':410 'borderradius':475,500 'box':117,144,239,307,315,318,467,478,484,508,527,557,600,686,803,812,826,838 'break':64 'breakpoint':130,520 'button':146,229,246,429,447,597,636,650,667,671,736,752,756 'callback':504 'cancel':670 'card':399,403,628,632 'cardact':634 'cardcont':633 'catch':729 'center':291,336,691 'chang':65 'circularprogress':681 'color':227,421,435,473,490,511,514,805,814 'column':167,223,361 'common':310,626 'complex':256 'compon':6,27,50,85,109,116,141,196,237,257,311,313,462,601,629,714,858 'component-library.md':856 'componentstyl':213 'componentstyles.button':248 'componentstyles.container':241 'componentstyles.header':244 'config':98 'confirm':658,676 'consist':819 'const':156,212,271,463,715,720,777,786 'contain':161,217,276,317,335,345,364,386,432,675,782,788 'content':324,334,337,342,503 'creat':258 'css':93 'custom':33,123,415,427 'deep':68 'defin':200 'delet':746 'deleteicon':748 'descript':640 'design':16,60,127,519 'desktop':569,570 'detail':848 'dialog':646,653 'dialog/modal':643 'dialogact':649 'dialogcont':648 'dialogtitl':647 'direct':351 'display':164,220,284,556,559,688 'e':616 'e.target.value':618 'elev':326,329 'email':610,612,614 'enablecsslay':97 'end':235 'error':438,621,730 'errors.email':622,624 'etc':121 'exampl':859 'export':75,270 'fail':732 'field':76 'file':252,261 'first':524 'flex':165,221,234,285,344,689 'flex-end':233 'flexdirect':166,222 'fontsiz':173,577 'fontweight':176,423 'form':592,602 'fullwidth':619 'function':178,236,304,461,713 'gap':168 'generic':316 'good':776,799,822 'grid':118,353,357,362,363,367,375,384,385,389 'h4':419 'half':374,382 'handleclos':657,669 'handleconfirm':673 'handledelet':761 'handlesav':721,738 'handlesubmit':604 'hardcod':810 'head':406,408,428 'header':170,224,245,283 'height':701 'helpertext':623 'hidden':562 'hook':21,136,706 'hover':513,516 'icon':440,740 'iconbutton':753,759 'import':69,143,150,206,264,298,356,441,457,594,631,645,680,709,742,751,770 'includ':9 'inlin':191 'instead':83 'integr':14,57,452 'item':368,376,390,450 'justifycont':286,690 'label':609 'layer':94 'layout':312 'learn':641 'left':373 'lg':397,545,583 'librari':7 'line':194,254 'lineheight':585 'load':677 'longer':71 'mani':294 'march':46 'marginbottom':842 'materi':3,42 'material-ui':2,41 'max':340 'max-width':339 'maxwidth':279 'mb':171,225,292,425,830 'md':371,379,395,540,565,580,588 'mobil':523,564 'mobile-first':522 'modal':80 'mt':230,832 'mui':1,19,26,35,37,62,111,115,129,132,140,704 'mui-specif':18,131,703 'mui/icons-material':446,750 'mui/material':149,155,211,269,359,460,599,638,652,684,755,775 'mx':281 'mycompon':179 'none':561 'note':61 'onbackdropclick':77 'onchang':615 'onclick':668,672,737,760 'onclos':82,656 'onsubmit':603 'open':654,655 'outlin':433 'p':162,218,277,320,332,469,496,692,783,789,807,828 'packag':74 'pad':816,840 'paper':119,147,181,325,328 'pattern':8,39,48,92,190,627,849,855 'pixel':836 'practic':763 'primari':436 'primary.main':228,422,491,806 'proceed':666 'prop':11,31,55,113,482,768 'purpos':40 'px':534,539,544,549 'quick':137 'random':835 'record':158,214,273,779 'rectangular':700 'releas':45 'rem':175,582 'remov':78 'repeat':400 'requir':620 'resourc':845 'resources/component-library.md':857 'resources/styling-guide.md':852 'resources/theme-customization.md':861 'respons':15,59,126,383,518,525,553,555,572,590 'return':180,238,306,466,735 'right':381 'row':352 'safeti':793 'save':727,734,739 'savedata':725 'scale':825 'secondari':437 'see':850 'separ':250,259 'setemail':617 'setup':863 'showerror':717,731 'showinfo':718 'showsuccess':716,726 'simpl':198 'skeleton':682,694,698 'skill':107 'skill-mui' 'slot':89 'slotprop':91 'sm':393,535 'small':412 'source-softaworks' 'space':288,347,349,365,387,606,696,820,824 'space-between':287 'specif':20,133,705 'spinner':685 'stack':343,348,596,605,695 'standard':88 'start':138 'starticon':448,757 'state':678 'string':159,215,274,780 'style':12,28,52,108,157,189,192,199,201,251,260,296,301,416,778,787,854 'styles.container':183,309 'styles.header':186 'styling-guide.md':851 'submit':625 'success':728 'support':95 'sure':662 'surfac':327 'sx':10,30,54,112,182,185,240,243,247,308,319,331,420,468,481,485,489,509,528,558,576,687,767,804,813,827,839 'sxprop':152,160,208,216,266,275,772,781 'system':354 'tailwind':101 'text':411,413,434,591 'textfield':595,608 'theme':13,32,56,122,153,209,267,451,454,464,477,479,487,510,773,796,801,862 'theme-customization.md':860 'theme.palette.background.paper':495 'theme.palette.primary.contrasttext':474 'theme.palette.primary.dark':515 'theme.palette.primary.main':472,492,512 'theme.shape.borderradius':476,502 'theme.spacing':498 'titl':187,639 'token':797,802 'top':204 'topic-agent-skills' 'topic-automation' 'topic-claude' 'topic-claude-code' 'topic-coding-agent' 'topic-development' 'tri':723 'type':151,207,265,611,765,771,792 'typescript':142,205,262,314,355,405,430,456,483,521,574,593,630,644,679,708,741,769,798,821 'typographi':120,145,184,242,404,417,573,575,635 'ui':4,43 'usag':51,125,507 'use':22,73,81,87,105,114,453,795,800,823 'usemuisnackbar':707,710,719 'userprofil':305 'userprofile.styles.ts':263 'userprofile.tsx':297 'userprofilestyl':272,299 'usethem':458,465 'util':36,134 'v4':102 'v6':67 'v7':5,38,44,63 'valu':455,526,613,811,837 'variant':418,431,674,699 'via':96 'visibl':567 'want':664 'width':341,529,554 'work':24,72,99 'xl':550 'xs':369,377,391,530,560,578,586","prices":[{"id":"3db19087-6e64-47a1-924d-7d4f859b79f8","listingId":"76f54e8d-e889-48ac-bbf2-9a8968bb8203","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"softaworks","category":"agent-toolkit","install_from":"skills.sh"},"createdAt":"2026-04-18T21:54:38.830Z"}],"sources":[{"listingId":"76f54e8d-e889-48ac-bbf2-9a8968bb8203","source":"github","sourceId":"softaworks/agent-toolkit/mui","sourceUrl":"https://github.com/softaworks/agent-toolkit/tree/main/skills/mui","isPrimary":false,"firstSeenAt":"2026-04-18T21:54:38.830Z","lastSeenAt":"2026-05-03T00:52:50.152Z"}],"details":{"listingId":"76f54e8d-e889-48ac-bbf2-9a8968bb8203","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"softaworks","slug":"mui","github":{"repo":"softaworks/agent-toolkit","stars":1689,"topics":["agent-skills","ai","automation","claude","claude-code","coding-agent","development"],"license":"mit","html_url":"https://github.com/softaworks/agent-toolkit","pushed_at":"2026-03-05T16:46:24Z","description":"A curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.","skill_md_sha":"cc235b246e3887db6b37dc12c61fdb25a740a3c4","skill_md_path":"skills/mui/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/softaworks/agent-toolkit/tree/main/skills/mui"},"layout":"multi","source":"github","category":"agent-toolkit","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/softaworks/agent-toolkit/mui"},"updatedAt":"2026-05-03T00:52:50.152Z"}}