Menu
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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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' |