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 html-css-css-layout명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | html-css-css-layout |
| description | null |
Category: html-css · Status: 🟢 Active
Khi dàn layout: chọn giữa Flexbox và Grid, căn chỉnh phần tử.
gap để tạo khoảng cách, không dùng margin thủ công giữa item.justify-content/align-items, tránh position: absolute để center.--space-4), tránh magic number.repeat(auto-fit, minmax()) cho lưới tự co.width cố định cho container; ưu tiên max-width + margin-inline: auto..toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-4);
}
Good: gap cho spacing, auto-fit minmax cho lưới responsive, token cho khoảng cách.
Avoid: margin-right: 17px rải rác, center bằng position: absolute; top: 50%.
gap thay margin giữa itemmax-width thay width cứng