Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/dipro-vn/dipro-ai-boost --skill mui-component-usageコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか?SkillsMP が現在取得できるファイルをダウンロードできます。
Use when a task that changed backend code is finishing, before reporting it done. Symptoms — a migration was added, a request or response shape changed, a new route exists, a cache key was added, something could not be verified, a problem was found and deliberately left alone.
Use when adding or changing a protected route, a guard, a role check, or any query that reads or writes records belonging to a user or tenant. Symptoms — a findById that takes only an id, a route with no guard, a role checked in the controller but not the query, an ID read straight from params, a new public endpoint, a service method reachable from more than one caller.
Use when choosing which exception to throw, shaping an error response, or deciding what to log. Symptoms — a caught error that returns 200, a try/catch that swallows the cause, a 500 where the client should see 400, an error message exposing a stack trace or SQL, a log line with no request context, the same failure logged at every layer.
SOC 職業分類に基づく
SKILL.md を表示中
| name | mui-component-usage |
| description | null |
Category: mui · Status: 🟢 Active
Khi cần dựng UI bằng component MUI (Button, TextField, Dialog...) thay vì tự chế lại từ thẻ HTML thô.
<div>/<button> thuần.variant, color, size, disabled) thay vì override bằng CSS.TextField controlled (value + onChange) hoặc tích hợp form lib.Dialog + DialogTitle/DialogContent/DialogActions), không nhồi vào 1 thẻ.<Button variant="contained" color="primary" size="medium" onClick={onSave}>
Save
</Button>
<TextField label="Email" value={email} onChange={(e) => setEmail(e.target.value)}
error={!!error} helperText={error} fullWidth />
<Dialog open={open} onClose={onClose}>
<DialogTitle>Confirm</DialogTitle>
<DialogContent>{message}</DialogContent>
<DialogActions>
<Button onClick={onClose}>Cancel</Button>
<Button onClick={onConfirm}>OK</Button>
</DialogActions>
</Dialog>
Good: dùng Button/TextField/Dialog với prop chuẩn, controlled input, đúng cấu trúc con.
Avoid: tự dựng button bằng <div onClick>, override style thay vì dùng prop, nhồi nội dung Dialog không đúng slot.
variant/color/size) thay vì CSS override