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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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.