# Mui

> MUI(Material UI) 컴포넌트 라이브러리 사용 규칙. import 패턴, sx prop, styled(), ThemeProvider.

- **Type:** Skill
- **Install:** `agentstack add skill-ggombee-code-forge-mui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ggombee](https://agentstack.voostack.com/s/ggombee)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ggombee](https://github.com/ggombee)
- **Source:** https://github.com/ggombee/code-forge/tree/main/modules/design-systems/mui

## Install

```sh
agentstack add skill-ggombee-code-forge-mui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# MUI (Material UI) 컨벤션

---

## Import 패턴

```typescript
// ✅ 좋은 예: 트리 쉐이킹이 가능한 named import
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';

// ✅ 아이콘 import
import SearchIcon from '@mui/icons-material/Search';
import CloseIcon from '@mui/icons-material/Close';

// ❌ 나쁜 예: 배럴 import (번들 크기 증가 가능)
import { Button, TextField, Box } from '@mui/material';
```

---

## sx prop 사용

`sx` prop은 MUI 컴포넌트에 인라인 스타일을 적용하는 방법이다.

```typescript
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

// ✅ 간단한 스타일: sx prop 사용
function OrderCard() {
  return (
    
      
        주문 제목
      
    
  );
}
```

```typescript
// 반응형 스타일 (breakpoints)

```

---

## styled() API

복잡한 스타일이나 재사용 컴포넌트에는 `styled()`를 사용한다.

```typescript
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

// ✅ styled()로 커스텀 컴포넌트 생성
const StyledButton = styled(Button)(({ theme }) => ({
  borderRadius: theme.spacing(3),
  padding: theme.spacing(1, 3),
  textTransform: 'none',
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

const CardContainer = styled(Box)(({ theme }) => ({
  padding: theme.spacing(2),
  borderRadius: theme.shape.borderRadius,
  backgroundColor: theme.palette.background.paper,
  [theme.breakpoints.down('sm')]: {
    padding: theme.spacing(1),
  },
}));
```

```typescript
// Props를 받는 styled 컴포넌트
interface StatusBadgeProps {
  status: 'active' | 'inactive' | 'pending';
}

const StatusBadge = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'status', // DOM에 전달하지 않을 prop
})(({ theme, status }) => ({
  display: 'inline-flex',
  borderRadius: theme.spacing(1),
  padding: theme.spacing(0.5, 1),
  backgroundColor:
    status === 'active' ? theme.palette.success.light
    : status === 'inactive' ? theme.palette.error.light
    : theme.palette.warning.light,
}));
```

---

## ThemeProvider & createTheme

```typescript
// src/theme/index.ts
import { createTheme } from '@mui/material/styles';

export const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      light: '#42a5f5',
      dark: '#1565c0',
    },
    secondary: {
      main: '#dc004e',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: '"Pretendard", "Roboto", sans-serif',
    h1: {
      fontSize: '2rem',
      fontWeight: 700,
    },
  },
  shape: {
    borderRadius: 8,
  },
  spacing: 8, // 기본 spacing 단위 (px)
});
```

```typescript
// src/main.tsx
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { theme } from '@/theme';

function App() {
  return (
    
       {/* 브라우저 기본 스타일 초기화 */}
      
    
  );
}
```

---

## 주요 컴포넌트 패턴

### Grid 레이아웃

```typescript
import Grid from '@mui/material/Grid';

function OrderList() {
  return (
    
      {orders.map((order) => (
        
          
        
      ))}
    
  );
}
```

### Form 패턴

```typescript
import TextField from '@mui/material/TextField';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

function OrderForm() {
  return (
    
      
      
        상태
        
          대기중
          진행중
        
      
    
  );
}
```

---

## useTheme 훅

```typescript
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function ResponsiveComponent() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    
      {isMobile ? '모바일 뷰' : '데스크탑 뷰'}
    
  );
}
```

---

## 체크리스트

- [ ] 컴포넌트 import는 개별 경로 사용? (`@mui/material/Button`)
- [ ] 간단한 스타일은 `sx` prop 사용?
- [ ] 재사용 컴포넌트는 `styled()` 사용?
- [ ] `ThemeProvider`로 theme 전역 제공?
- [ ] `CssBaseline` 포함?
- [ ] Props를 DOM에 전달하지 않으려면 `shouldForwardProp` 사용?

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ggombee](https://github.com/ggombee)
- **Source:** [ggombee/code-forge](https://github.com/ggombee/code-forge)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ggombee-code-forge-mui
- Seller: https://agentstack.voostack.com/s/ggombee
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.