[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R0PY8HW62WNFX38RXZSAMA":3,"skill-same:01M6R0PY8HW62WNFX38RXZSAMA":96},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M6R0PY8HW62WNFX38RXZSAMA","mui",null,"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.","Mishit18\u002Fclaude-code-templates","Mishit18","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F244127857?v=4","01M6QXBYKWM76HSKYDNWSKKE41","Mishit Sharma","01M6QXBYRJ0CAVM51S1RTEKTZZ",1,"MIT","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[5,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"styling","when","sx","with","Utilities","theme","material","responsive","patterns","responsive design","design","hooks","use","customization","ui","library","component library","component","components","2026-11-10 10:12:30",false,"---\nname: mui\ndescription: 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.\n---\n\n# 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\u002Fmaterial';\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\nconst styles: Record\u003Cstring, SxProps\u003CTheme>> = {\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    \u003CPaper sx={styles.container}>\n      \u003CTypography sx={styles.header}>\n        Title\n      \u003C\u002FTypography>\n      \u003CButton variant=\"contained\">\n        Action\n      \u003C\u002FButton>\n    \u003C\u002FPaper>\n  );\n}\n```\n\n---\n\n## Styling Patterns\n\n### Inline Styles (\u003C 100 lines)\n\nFor components with simple styling, define styles at the top:\n\n```typescript\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\nconst componentStyles: Record\u003Cstring, SxProps\u003CTheme>> = {\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    \u003CBox sx={componentStyles.container}>\n      \u003CTypography sx={componentStyles.header}>Header\u003C\u002FTypography>\n      \u003CButton sx={componentStyles.button}>Action\u003C\u002FButton>\n    \u003C\u002FBox>\n  );\n}\n```\n\n### Separate Styles File (>= 100 lines)\n\nFor complex components, create separate style file:\n\n```typescript\n\u002F\u002F UserProfile.styles.ts\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\nexport const userProfileStyles: Record\u003Cstring, SxProps\u003CTheme>> = {\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  \u002F\u002F ... many more styles\n};\n\n\u002F\u002F UserProfile.tsx\nimport { userProfileStyles as styles } from '.\u002FUserProfile.styles';\n\nfunction UserProfile() {\n  return \u003CBox sx={styles.container}>...\u003C\u002FBox>;\n}\n```\n\n---\n\n## Common Components\n\n### Layout Components\n\n```typescript\n\u002F\u002F Box - Generic container\n\u003CBox sx={{ p: 2, bgcolor: 'background.paper' }}>\n  Content\n\u003C\u002FBox>\n\n\u002F\u002F Paper - Elevated surface\n\u003CPaper elevation={2} sx={{ p: 3 }}>\n  Content\n\u003C\u002FPaper>\n\n\u002F\u002F Container - Centered content with max-width\n\u003CContainer maxWidth=\"lg\">\n  Content\n\u003C\u002FContainer>\n\n\u002F\u002F Stack - Flex container with spacing\n\u003CStack spacing={2} direction=\"row\">\n  \u003CItem \u002F>\n  \u003CItem \u002F>\n\u003C\u002FStack>\n```\n\n### Grid System\n\n```typescript\nimport { Grid } from '@mui\u002Fmaterial';\n\n\u002F\u002F 12-column grid\n\u003CGrid container spacing={2}>\n  \u003CGrid item xs={12} md={6}>\n    Left half\n  \u003C\u002FGrid>\n  \u003CGrid item xs={12} md={6}>\n    Right half\n  \u003C\u002FGrid>\n\u003C\u002FGrid>\n\n\u002F\u002F Responsive grid\n\u003CGrid container spacing={3}>\n  \u003CGrid item xs={12} sm={6} md={4} lg={3}>\n    Card\n  \u003C\u002FGrid>\n  {\u002F* Repeat for more cards *\u002F}\n\u003C\u002FGrid>\n```\n\n### Typography\n\n```typescript\n\u003CTypography variant=\"h1\">Heading 1\u003C\u002FTypography>\n\u003CTypography variant=\"h2\">Heading 2\u003C\u002FTypography>\n\u003CTypography variant=\"body1\">Body text\u003C\u002FTypography>\n\u003CTypography variant=\"caption\">Small text\u003C\u002FTypography>\n\n\u002F\u002F With custom styling\n\u003CTypography\n  variant=\"h4\"\n  sx={{\n    color: 'primary.main',\n    fontWeight: 600,\n    mb: 2,\n  }}\n>\n  Custom Heading\n\u003C\u002FTypography>\n```\n\n### Buttons\n\n```typescript\n\u002F\u002F Variants\n\u003CButton variant=\"contained\">Contained\u003C\u002FButton>\n\u003CButton variant=\"outlined\">Outlined\u003C\u002FButton>\n\u003CButton variant=\"text\">Text\u003C\u002FButton>\n\n\u002F\u002F Colors\n\u003CButton variant=\"contained\" color=\"primary\">Primary\u003C\u002FButton>\n\u003CButton variant=\"contained\" color=\"secondary\">Secondary\u003C\u002FButton>\n\u003CButton variant=\"contained\" color=\"error\">Error\u003C\u002FButton>\n\n\u002F\u002F With icons\nimport { Add as AddIcon } from '@mui\u002Ficons-material';\n\n\u003CButton startIcon={\u003CAddIcon \u002F>}>Add Item\u003C\u002FButton>\n```\n\n---\n\n## Theme Integration\n\n### Using Theme Values\n\n```typescript\nimport { useTheme } from '@mui\u002Fmaterial';\n\nfunction Component() {\n  const theme = useTheme();\n\n  return (\n    \u003CBox\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    \u003C\u002FBox>\n  );\n}\n```\n\n### Theme in sx Prop\n\n```typescript\n\u003CBox\n  sx={{\n    \u002F\u002F Access theme in sx\n    color: 'primary.main',          \u002F\u002F theme.palette.primary.main\n    bgcolor: 'background.paper',     \u002F\u002F theme.palette.background.paper\n    p: 2,                            \u002F\u002F theme.spacing(2)\n    borderRadius: 1,                 \u002F\u002F theme.shape.borderRadius\n  }}\n>\n  Content\n\u003C\u002FBox>\n\n\u002F\u002F Callback for advanced usage\n\u003CBox\n  sx={(theme) => ({\n    color: theme.palette.primary.main,\n    '&:hover': {\n      color: theme.palette.primary.dark,\n    },\n  })}\n>\n  Hover me\n\u003C\u002FBox>\n```\n\n---\n\n## Responsive Design\n\n### Breakpoints\n\n```typescript\n\u002F\u002F Mobile-first responsive values\n\u003CBox\n  sx={{\n    width: {\n      xs: '100%',    \u002F\u002F 0-600px\n      sm: '80%',     \u002F\u002F 600-900px\n      md: '60%',     \u002F\u002F 900-1200px\n      lg: '40%',     \u002F\u002F 1200-1536px\n      xl: '30%',     \u002F\u002F 1536px+\n    },\n  }}\n>\n  Responsive width\n\u003C\u002FBox>\n\n\u002F\u002F Responsive display\n\u003CBox\n  sx={{\n    display: {\n      xs: 'none',    \u002F\u002F Hidden on mobile\n      md: 'block',   \u002F\u002F Visible on desktop\n    },\n  }}\n>\n  Desktop only\n\u003C\u002FBox>\n```\n\n### Responsive Typography\n\n```typescript\n\u003CTypography\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\u003C\u002FTypography>\n```\n\n---\n\n## Forms\n\n```typescript\nimport { TextField, Stack, Button } from '@mui\u002Fmaterial';\n\n\u003CBox component=\"form\" onSubmit={handleSubmit}>\n  \u003CStack spacing={2}>\n    \u003CTextField\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    \u002F>\n    \u003CButton type=\"submit\" variant=\"contained\">Submit\u003C\u002FButton>\n  \u003C\u002FStack>\n\u003C\u002FBox>\n```\n\n---\n\n## Common Patterns\n\n### Card Component\n\n```typescript\nimport { Card, CardContent, CardActions, Typography, Button } from '@mui\u002Fmaterial';\n\n\u003CCard>\n  \u003CCardContent>\n    \u003CTypography variant=\"h5\" component=\"div\">\n      Title\n    \u003C\u002FTypography>\n    \u003CTypography variant=\"body2\" color=\"text.secondary\">\n      Description\n    \u003C\u002FTypography>\n  \u003C\u002FCardContent>\n  \u003CCardActions>\n    \u003CButton size=\"small\">Learn More\u003C\u002FButton>\n  \u003C\u002FCardActions>\n\u003C\u002FCard>\n```\n\n### Dialog\u002FModal\n\n```typescript\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui\u002Fmaterial';\n\n\u003CDialog open={open} onClose={handleClose}>\n  \u003CDialogTitle>Confirm Action\u003C\u002FDialogTitle>\n  \u003CDialogContent>\n    Are you sure you want to proceed?\n  \u003C\u002FDialogContent>\n  \u003CDialogActions>\n    \u003CButton onClick={handleClose}>Cancel\u003C\u002FButton>\n    \u003CButton onClick={handleConfirm} variant=\"contained\">\n      Confirm\n    \u003C\u002FButton>\n  \u003C\u002FDialogActions>\n\u003C\u002FDialog>\n```\n\n### Loading States\n\n```typescript\nimport { CircularProgress, Skeleton } from '@mui\u002Fmaterial';\n\n\u002F\u002F Spinner\n\u003CBox sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>\n  \u003CCircularProgress \u002F>\n\u003C\u002FBox>\n\n\u002F\u002F Skeleton\n\u003CStack spacing={1}>\n  \u003CSkeleton variant=\"text\" width=\"60%\" \u002F>\n  \u003CSkeleton variant=\"rectangular\" height={200} \u002F>\n  \u003CSkeleton variant=\"text\" width=\"40%\" \u002F>\n\u003C\u002FStack>\n```\n\n---\n\n## MUI-Specific Hooks\n\n### useMuiSnackbar\n\n```typescript\nimport { useMuiSnackbar } from '@\u002Fhooks\u002FuseMuiSnackbar';\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 \u003CButton onClick={handleSave}>Save\u003C\u002FButton>;\n}\n```\n\n---\n\n## Icons\n\n```typescript\nimport { Add as AddIcon, Delete as DeleteIcon } from '@mui\u002Ficons-material';\nimport { Button, IconButton } from '@mui\u002Fmaterial';\n\n\u003CButton startIcon={\u003CAddIcon \u002F>}>Add\u003C\u002FButton>\n\u003CIconButton onClick={handleDelete}>\u003CDeleteIcon \u002F>\u003C\u002FIconButton>\n```\n\n---\n\n## Best Practices\n\n### 1. Type Your sx Props\n\n```typescript\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\n\u002F\u002F ✅ Good\nconst styles: Record\u003Cstring, SxProps\u003CTheme>> = {\n  container: { p: 2 },\n};\n\n\u002F\u002F ❌ Avoid\nconst styles = {\n  container: { p: 2 }, \u002F\u002F No type safety\n};\n```\n\n### 2. Use Theme Tokens\n\n```typescript\n\u002F\u002F ✅ Good: Use theme tokens\n\u003CBox sx={{ color: 'primary.main', p: 2 }} \u002F>\n\n\u002F\u002F ❌ Avoid: Hardcoded values\n\u003CBox sx={{ color: '#1976d2', padding: '16px' }} \u002F>\n```\n\n### 3. Consistent Spacing\n\n```typescript\n\u002F\u002F ✅ Good: Use spacing scale\n\u003CBox sx={{ p: 2, mb: 3, mt: 1 }} \u002F>\n\n\u002F\u002F ❌ Avoid: Random pixel values\n\u003CBox sx={{ padding: '17px', marginBottom: '25px' }} \u002F>\n```\n\n---\n\n## Additional Resources\n\nFor more detailed patterns, see:\n- [styling-guide.md](resources\u002Fstyling-guide.md) - Advanced styling patterns\n- [component-library.md](resources\u002Fcomponent-library.md) - Component examples\n- [theme-customization.md](resources\u002Ftheme-customization.md) - Theme setup\n\n","# 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\u002Fmaterial';\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\nconst styles: Record\u003Cstring, SxProps\u003CTheme>> = {\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    \u003CPaper sx={styles.container}>\n      \u003CTypography sx={styles.header}>\n        Title\n      \u003C\u002FTypography>\n      \u003CButton variant=\"contained\">\n        Action\n      \u003C\u002FButton>\n    \u003C\u002FPaper>\n  );\n}\n```\n\n---\n\n## Styling Patterns\n\n### Inline Styles (\u003C 100 lines)\n\nFor components with simple styling, define styles at the top:\n\n```typescript\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\nconst componentStyles: Record\u003Cstring, SxProps\u003CTheme>> = {\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    \u003CBox sx={componentStyles.container}>\n      \u003CTypography sx={componentStyles.header}>Header\u003C\u002FTypography>\n      \u003CButton sx={componentStyles.button}>Action\u003C\u002FButton>\n    \u003C\u002FBox>\n  );\n}\n```\n\n### Separate Styles File (>= 100 lines)\n\nFor complex components, create separate style file:\n\n```typescript\n\u002F\u002F UserProfile.styles.ts\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\nexport const userProfileStyles: Record\u003Cstring, SxProps\u003CTheme>> = {\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  \u002F\u002F ... many more styles\n};\n\n\u002F\u002F UserProfile.tsx\nimport { userProfileStyles as styles } from '.\u002FUserProfile.styles';\n\nfunction UserProfile() {\n  return \u003CBox sx={styles.container}>...\u003C\u002FBox>;\n}\n```\n\n---\n\n## Common Components\n\n### Layout Components\n\n```typescript\n\u002F\u002F Box - Generic container\n\u003CBox sx={{ p: 2, bgcolor: 'background.paper' }}>\n  Content\n\u003C\u002FBox>\n\n\u002F\u002F Paper - Elevated surface\n\u003CPaper elevation={2} sx={{ p: 3 }}>\n  Content\n\u003C\u002FPaper>\n\n\u002F\u002F Container - Centered content with max-width\n\u003CContainer maxWidth=\"lg\">\n  Content\n\u003C\u002FContainer>\n\n\u002F\u002F Stack - Flex container with spacing\n\u003CStack spacing={2} direction=\"row\">\n  \u003CItem \u002F>\n  \u003CItem \u002F>\n\u003C\u002FStack>\n```\n\n### Grid System\n\n```typescript\nimport { Grid } from '@mui\u002Fmaterial';\n\n\u002F\u002F 12-column grid\n\u003CGrid container spacing={2}>\n  \u003CGrid item xs={12} md={6}>\n    Left half\n  \u003C\u002FGrid>\n  \u003CGrid item xs={12} md={6}>\n    Right half\n  \u003C\u002FGrid>\n\u003C\u002FGrid>\n\n\u002F\u002F Responsive grid\n\u003CGrid container spacing={3}>\n  \u003CGrid item xs={12} sm={6} md={4} lg={3}>\n    Card\n  \u003C\u002FGrid>\n  {\u002F* Repeat for more cards *\u002F}\n\u003C\u002FGrid>\n```\n\n### Typography\n\n```typescript\n\u003CTypography variant=\"h1\">Heading 1\u003C\u002FTypography>\n\u003CTypography variant=\"h2\">Heading 2\u003C\u002FTypography>\n\u003CTypography variant=\"body1\">Body text\u003C\u002FTypography>\n\u003CTypography variant=\"caption\">Small text\u003C\u002FTypography>\n\n\u002F\u002F With custom styling\n\u003CTypography\n  variant=\"h4\"\n  sx={{\n    color: 'primary.main',\n    fontWeight: 600,\n    mb: 2,\n  }}\n>\n  Custom Heading\n\u003C\u002FTypography>\n```\n\n### Buttons\n\n```typescript\n\u002F\u002F Variants\n\u003CButton variant=\"contained\">Contained\u003C\u002FButton>\n\u003CButton variant=\"outlined\">Outlined\u003C\u002FButton>\n\u003CButton variant=\"text\">Text\u003C\u002FButton>\n\n\u002F\u002F Colors\n\u003CButton variant=\"contained\" color=\"primary\">Primary\u003C\u002FButton>\n\u003CButton variant=\"contained\" color=\"secondary\">Secondary\u003C\u002FButton>\n\u003CButton variant=\"contained\" color=\"error\">Error\u003C\u002FButton>\n\n\u002F\u002F With icons\nimport { Add as AddIcon } from '@mui\u002Ficons-material';\n\n\u003CButton startIcon={\u003CAddIcon \u002F>}>Add Item\u003C\u002FButton>\n```\n\n---\n\n## Theme Integration\n\n### Using Theme Values\n\n```typescript\nimport { useTheme } from '@mui\u002Fmaterial';\n\nfunction Component() {\n  const theme = useTheme();\n\n  return (\n    \u003CBox\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    \u003C\u002FBox>\n  );\n}\n```\n\n### Theme in sx Prop\n\n```typescript\n\u003CBox\n  sx={{\n    \u002F\u002F Access theme in sx\n    color: 'primary.main',          \u002F\u002F theme.palette.primary.main\n    bgcolor: 'background.paper',     \u002F\u002F theme.palette.background.paper\n    p: 2,                            \u002F\u002F theme.spacing(2)\n    borderRadius: 1,                 \u002F\u002F theme.shape.borderRadius\n  }}\n>\n  Content\n\u003C\u002FBox>\n\n\u002F\u002F Callback for advanced usage\n\u003CBox\n  sx={(theme) => ({\n    color: theme.palette.primary.main,\n    '&:hover': {\n      color: theme.palette.primary.dark,\n    },\n  })}\n>\n  Hover me\n\u003C\u002FBox>\n```\n\n---\n\n## Responsive Design\n\n### Breakpoints\n\n```typescript\n\u002F\u002F Mobile-first responsive values\n\u003CBox\n  sx={{\n    width: {\n      xs: '100%',    \u002F\u002F 0-600px\n      sm: '80%',     \u002F\u002F 600-900px\n      md: '60%',     \u002F\u002F 900-1200px\n      lg: '40%',     \u002F\u002F 1200-1536px\n      xl: '30%',     \u002F\u002F 1536px+\n    },\n  }}\n>\n  Responsive width\n\u003C\u002FBox>\n\n\u002F\u002F Responsive display\n\u003CBox\n  sx={{\n    display: {\n      xs: 'none',    \u002F\u002F Hidden on mobile\n      md: 'block',   \u002F\u002F Visible on desktop\n    },\n  }}\n>\n  Desktop only\n\u003C\u002FBox>\n```\n\n### Responsive Typography\n\n```typescript\n\u003CTypography\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\u003C\u002FTypography>\n```\n\n---\n\n## Forms\n\n```typescript\nimport { TextField, Stack, Button } from '@mui\u002Fmaterial';\n\n\u003CBox component=\"form\" onSubmit={handleSubmit}>\n  \u003CStack spacing={2}>\n    \u003CTextField\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    \u002F>\n    \u003CButton type=\"submit\" variant=\"contained\">Submit\u003C\u002FButton>\n  \u003C\u002FStack>\n\u003C\u002FBox>\n```\n\n---\n\n## Common Patterns\n\n### Card Component\n\n```typescript\nimport { Card, CardContent, CardActions, Typography, Button } from '@mui\u002Fmaterial';\n\n\u003CCard>\n  \u003CCardContent>\n    \u003CTypography variant=\"h5\" component=\"div\">\n      Title\n    \u003C\u002FTypography>\n    \u003CTypography variant=\"body2\" color=\"text.secondary\">\n      Description\n    \u003C\u002FTypography>\n  \u003C\u002FCardContent>\n  \u003CCardActions>\n    \u003CButton size=\"small\">Learn More\u003C\u002FButton>\n  \u003C\u002FCardActions>\n\u003C\u002FCard>\n```\n\n### Dialog\u002FModal\n\n```typescript\nimport { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui\u002Fmaterial';\n\n\u003CDialog open={open} onClose={handleClose}>\n  \u003CDialogTitle>Confirm Action\u003C\u002FDialogTitle>\n  \u003CDialogContent>\n    Are you sure you want to proceed?\n  \u003C\u002FDialogContent>\n  \u003CDialogActions>\n    \u003CButton onClick={handleClose}>Cancel\u003C\u002FButton>\n    \u003CButton onClick={handleConfirm} variant=\"contained\">\n      Confirm\n    \u003C\u002FButton>\n  \u003C\u002FDialogActions>\n\u003C\u002FDialog>\n```\n\n### Loading States\n\n```typescript\nimport { CircularProgress, Skeleton } from '@mui\u002Fmaterial';\n\n\u002F\u002F Spinner\n\u003CBox sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>\n  \u003CCircularProgress \u002F>\n\u003C\u002FBox>\n\n\u002F\u002F Skeleton\n\u003CStack spacing={1}>\n  \u003CSkeleton variant=\"text\" width=\"60%\" \u002F>\n  \u003CSkeleton variant=\"rectangular\" height={200} \u002F>\n  \u003CSkeleton variant=\"text\" width=\"40%\" \u002F>\n\u003C\u002FStack>\n```\n\n---\n\n## MUI-Specific Hooks\n\n### useMuiSnackbar\n\n```typescript\nimport { useMuiSnackbar } from '@\u002Fhooks\u002FuseMuiSnackbar';\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 \u003CButton onClick={handleSave}>Save\u003C\u002FButton>;\n}\n```\n\n---\n\n## Icons\n\n```typescript\nimport { Add as AddIcon, Delete as DeleteIcon } from '@mui\u002Ficons-material';\nimport { Button, IconButton } from '@mui\u002Fmaterial';\n\n\u003CButton startIcon={\u003CAddIcon \u002F>}>Add\u003C\u002FButton>\n\u003CIconButton onClick={handleDelete}>\u003CDeleteIcon \u002F>\u003C\u002FIconButton>\n```\n\n---\n\n## Best Practices\n\n### 1. Type Your sx Props\n\n```typescript\nimport type { SxProps, Theme } from '@mui\u002Fmaterial';\n\n\u002F\u002F ✅ Good\nconst styles: Record\u003Cstring, SxProps\u003CTheme>> = {\n  container: { p: 2 },\n};\n\n\u002F\u002F ❌ Avoid\nconst styles = {\n  container: { p: 2 }, \u002F\u002F No type safety\n};\n```\n\n### 2. Use Theme Tokens\n\n```typescript\n\u002F\u002F ✅ Good: Use theme tokens\n\u003CBox sx={{ color: 'primary.main', p: 2 }} \u002F>\n\n\u002F\u002F ❌ Avoid: Hardcoded values\n\u003CBox sx={{ color: '#1976d2', padding: '16px' }} \u002F>\n```\n\n### 3. Consistent Spacing\n\n```typescript\n\u002F\u002F ✅ Good: Use spacing scale\n\u003CBox sx={{ p: 2, mb: 3, mt: 1 }} \u002F>\n\n\u002F\u002F ❌ Avoid: Random pixel values\n\u003CBox sx={{ padding: '17px', marginBottom: '25px' }} \u002F>\n```\n\n---\n\n## Additional Resources\n\nFor more detailed patterns, see:\n- [styling-guide.md](resources\u002Fstyling-guide.md) - Advanced styling patterns\n- [component-library.md](resources\u002Fcomponent-library.md) - Component examples\n- [theme-customization.md](resources\u002Ftheme-customization.md) - Theme setup\n\n",{"name":5,"description":7},"main","015422534a7457348a313b6381f0255d3364eb8c","cli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui",0,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates","https:\u002F\u002Fgithub.com\u002FMishit18","2026-11-13 18:15:57",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add Mishit18\u002Fclaude-code-templates --skill mui",{"tool":66,"command":67},"bunx","bunx skills add Mishit18\u002Fclaude-code-templates --skill mui",{"tool":69,"command":70},"pnpm","pnpm dlx skills add Mishit18\u002Fclaude-code-templates --skill mui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002FSKILL.md",true,[74,80,84,88,92],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"README.md","REFERENCE","参考文档",6307,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002FREADME.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"resources\u002Fcomponent-library.md",11485,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002Fresources\u002Fcomponent-library.md",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"resources\u002Fstyling-guide.md",5442,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002Fresources\u002Fstyling-guide.md",{"path":89,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":90,"sourceHtmlUrl":91},"resources\u002Ftheme-customization.md",10359,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002Fresources\u002Ftheme-customization.md",{"path":93,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":94,"sourceHtmlUrl":95},"skill-rules-fragment.json",1817,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fmui\u002Fskill-rules-fragment.json",[97,127,151,177,204,229],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":101,"licenseFileUrl":102,"sourceHtmlUrl":103,"categories":104,"keywords":108,"publishedAt":48},"01M6R4ARN4W2VZRDERDTMN1KP0","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[105],{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[109,110,111,112,113,114,115,47,116,117,118,119,120,121,41,122,123,124,125,126],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","react","routing","state management","state","file","Tailwind","single-file","ui components","multi","for","single",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":101,"licenseFileUrl":131,"sourceHtmlUrl":132,"categories":133,"keywords":138,"publishedAt":48},"01M6R45GXREM5DP8T08MAC788H","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[134,137],{"categoryNo":135,"categoryName":136,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":106,"categoryName":107,"taxonomyType":21,"taxonomyTypeDesc":22},[139,140,141,114,142,143,110,144,145,146,43,147,148,149,150,32,125],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","logs","applications","behavior","local",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":155,"sourceHtmlUrl":156,"categories":157,"keywords":158,"publishedAt":48},"01M6R2GYJ470X8EB7R58V0B68K","think-tank","Run a Virtual Think Tank — a structured multi-persona debate — before planning or making architectural\u002Fdesign\u002Fstrategic decisions. Use this skill whenever the user is about to plan a system, make a technology choice, evaluate trade-offs, decide on an approach, or faces any decision where multiple perspectives would sharpen the outcome. Also trigger when the user says \"think tank\", \"debate this\", \"perspectives on\", \"trade-offs\", \"should I use X or Y\", \"help me decide\", \"before we plan\", or asks for pros\u002Fcons of competing approaches. This skill should run BEFORE any implementation planning begins — it produces a structured analysis that feeds into better plans.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FSKILL.md",[],[159,160,39,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,30],"think tank","think","run","feeds","analysis","persona","plan","sharpen","virtual","decision","choice","decide","perspectives","outcome","me","debate","make","trade-offs",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":101,"licenseFileUrl":181,"sourceHtmlUrl":182,"categories":183,"keywords":187,"publishedAt":48},"01M6R2FSR55AVRFA9YZ8SC2GZG","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[184],{"categoryNo":185,"categoryName":186,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[188,189,190,191,192,193,194,195,196,197,198,199,200,201,32,125,202,30,203],"skill creator","creator","workflows","create","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":205,"name":206,"nameZh":6,"description":207,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":208,"categories":209,"keywords":210,"publishedAt":48},"01M6R2FK42ZZ4HJTJVVK9WJBBP","ship-learn-next","Transform learning content (like YouTube transcripts, articles, tutorials) into actionable implementation plans using the Ship-Learn-Next framework. Use when user wants to turn advice, lessons, or educational content into concrete action steps, reps, or a learning quest.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fship-learn-next\u002FSKILL.md",[],[211,212,213,214,215,216,217,218,41,219,220,221,222,223,224,225,226,227,228,30],"learn","ship learn next","ship","next","framework","learning","read","write","advice","implementation","youtube","plans","quest","transform","actionable","action","lessons","youtube transcripts",{"skillNo":230,"name":231,"nameZh":6,"description":232,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":101,"licenseFileUrl":233,"sourceHtmlUrl":234,"categories":235,"keywords":242,"publishedAt":48},"01M6R2088G1RHDA5MDX16HASRB","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[236,239],{"categoryNo":237,"categoryName":238,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":240,"categoryName":241,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[243,244,245,189,246,247,248,249,194,41,173,201,175,33,250,125,251,30],"slack gif creator","slack","gif","validation","Tools","constraints","Animation","concepts","request"]