메뉴
Rules for importing MUI (Material-UI) components and icons. Use when adding or editing imports from @mui/material or @mui/icons-material, or when MUI commit hooks fail.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Points to OpenCloningDB API endpoint documentation. Use when working with opencloningdb as the database backend, looking up database API routes, or integrating sequence/primer submission to OpenCloningDB.
Points to where backend API endpoints are documented. Use when looking up backend API routes, endpoints, or when integrating with the primary OpenCloning backend (localhost:8000).
Points to eLabFTW API endpoint documentation. Use when working with eLabFTW as the database backend, looking up eLabFTW API routes, or integrating sequence/primer submission to eLabFTW.
Patterns for data fetching in this codebase. Use when making HTTP requests in React components — prefer useMutation or useQuery over manual useState/useEffect loading/error state.
| name | mui-imports |
| description | Rules for importing MUI (Material-UI) components and icons. Use when adding or editing imports from @mui/material or @mui/icons-material, or when MUI commit hooks fail. |
Imports must use the main package entry point, not subpaths. This ensures proper module resolution when the package is installed from npm. Enforced by .husky/no_mui_subpath_imports.sh on commit.
❌ Wrong (subpath):
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
✅ Correct (named imports from main package):
import { Button, TextField } from '@mui/material'
❌ Wrong (subpath):
import DeleteIcon from '@mui/icons-material/Delete'
import AddIcon from '@mui/icons-material/Add'
✅ Correct (named imports from main package):
import { Delete as DeleteIcon, Add as AddIcon } from '@mui/icons-material'
| Package | Use | Avoid |
|---|---|---|
@mui/material | import { Component } from '@mui/material' | import Component from '@mui/material/Component' |
@mui/icons-material | import { Icon } from '@mui/icons-material' | import Icon from '@mui/icons-material/Icon' |