SOC 직업 분류 기준
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/dipro-vn/dipro-ai-boost --skill tailwind-component-styling명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
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.
| name | tailwind-component-styling |
| description | null |
Category: tailwind · Status: 🟢 Active
Khi cần trừu tượng hóa class Tailwind lặp lại thành variant tái dùng (@apply/cva/clsx).
cva để quản lý variant, thay vì copy class.clsx/cn để ghép class điều kiện sạch sẽ, tránh chuỗi template rối.@apply trong CSS cho primitive lặp lại (vd .btn), không lạm dụng cho mọi thứ.variants/defaultVariants rõ (size, intent) thay vì truyền class rời.const button = cva('inline-flex items-center rounded-md font-medium', {
variants: {
intent: { primary: 'bg-blue-600 text-white hover:bg-blue-700',
ghost: 'bg-transparent hover:bg-gray-100' },
size: { sm: 'px-3 py-1 text-sm', md: 'px-4 py-2 text-base' },
},
defaultVariants: { intent: 'primary', size: 'md' },
});
<button className={cn(button({ intent, size }), className)}>{children}</button>
Good: variant qua cva, ghép điều kiện bằng cn/clsx, một nguồn chân lý.
Avoid: copy chuỗi class khắp nơi, nối string ${} rối, @apply cho mọi class.
cva/component)clsx/cn