dipro-vn
dipro-vn/dipro-ai-boost
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/dipro-vn/dipro-ai-boost --skill mui-responsive-layout명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | mui-responsive-layout |
| description | null |
Category: mui · Status: 🟢 Active
Khi dựng layout responsive bằng MUI (Grid/Stack) với spacing và breakpoint nhất quán.
Stack cho layout 1 chiều (gap, hướng), Grid cho lưới đa cột.xs/sm/md/lg) thay vì width cứng.spacing/gap theo đơn vị theme (8px), không pad/margin tùy tiện.direction={{ xs: 'column', md: 'row' }}).<Stack direction={{ xs: 'column', md: 'row' }} spacing={2} alignItems="center">
<Box flex={1}>{left}</Box>
<Box flex={1}>{right}</Box>
</Stack>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>{a}</Grid>
<Grid item xs={12} md={6}>{b}</Grid>
</Grid>
Good: cột theo breakpoint, spacing đơn vị theme, đổi hướng responsive bằng object. Avoid: width px cứng, margin tùy tiện thay vì spacing, layout chỉ hợp 1 màn hình.