kf-g-css-flex-grid
CSS Grid / Flex レイアウトルール
この skill は、display: grid を第一候補にしつつ、display: flex の使いどころを絞り、視覚配置をコードへそのまま写すためのものです。
grid-template、空セル、grid-area 命名、flex-direction の選択を主に扱います。
ブレイクポイント、Container Queries、流体サイズの単位選定は ../kf-g-css-tak-responsive-rules/SKILL.md を優先し、gap と margin の責務分離は ../kf-g-css-spacing-gap-margin-rules/SKILL.md を優先します。
この skill を使う場面
display: gridとdisplay: flexのどちらを選ぶか決めるときgrid-templateとgrid-template-areasのどちらで書くか見直すときgrid-areaの命名ルールを決めるときflex-direction: columnを使いたくなったとき- AI が生成した CSS に、場当たり的な
flexが混ざっていないか確認するとき
最初に決めること
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-spacing-gap-margin-rules
Use this skill when designing, reviewing, or generating CSS spacing rules. Apply it whenever the user asks whether spacing should use gap, margin, or structural empty space, wants to avoid margin-based layout spacing, or needs rules for container-owned spacing in grid or flex layouts.
6