kf-g-css-spacing-gap-margin-rules
CSS 間隔設計ルール
この skill は、間隔の責務を子要素ではなくコンテナ側へ戻し、規則的な間隔は gap、構造的な空白は空のグリッドセル、margin は例外に限定するためのものです。
grid-template の書き方や空セルの表記ルールは ../kf-g-css-flex-grid/SKILL.md を優先し、この skill では間隔責務の分離に絞って扱います。
この skill を使う場面
gapとmarginのどちらを使うか決めるとき- siblings 間の余白を
marginで積んでよいか見直すとき - レイアウト内の空白を
gap、空セル、marginのどれで表現するか決めるとき - grid や flex の子要素間隔を、コンテナ責務へ戻せないか検討するとき
- AI が生成した CSS に、場当たり的な
margin-block-startやmargin-inline-startが混ざっていないか確認するとき
最初に決めること
- その間隔は同一コンテナ内の規則的な間隔か
- その空白はレイアウト上の位置関係そのものを表すか
- その余白はコンテナ内の責務か、コンテナ外との関係か
- 既存構造を変えられるか
More from melumuccu/ai
kf-g-git-commit-japanese-commit-message
Create and format commit messages with a fixed 5-character prefix and a Japanese subject. Use this skill when drafting commit message proposals, reformatting existing messages, choosing a prefix, deciding the appropriate type from the changes, or when the user asks you to commit.
10kf-g-project-bootstrap-new-project-rules
Use this skill when starting a new project and defining baseline repository rules, especially for devcontainer setup, mise-first tooling, pnpm security settings, Vite+ workflows, and kiso.css adoption.
8kf-g-agent-research-report-only-unless-approved
Use this skill whenever the user asks to research, compare, review, evaluate, explain, recommend, or select something and the request does not clearly ask for file edits. In these cases, report findings only and do not modify documents, source code, dependencies, generated files, or git state until the user explicitly approves applying changes.
8kf-g-skill-naming-creation-organization-rules
Use this skill when creating, naming, renaming, or organizing skills in this repository. Always use it when you need to decide rules for skill directory names, propose names that follow the existing convention, organize skills so related entries stay close together, or distinguish local skills from external ones.
7kf-g-writing-japanese-concise-structured-response
Write or revise Japanese Markdown documents and code comments in this repository with a concise, structured style. Use this whenever the task involves drafting Markdown, especially maintainable ordered lists with 1.-style numbering and anchor-based cross references, or writing code comments.
7kf-g-css-flex-grid
Use this skill when designing, reviewing, or generating CSS layout with display grid or flex. Apply it whenever the user asks about grid-template, grid-area naming, flex-direction, or needs to choose between grid and flex for component or page layout.
6