kf-g-css-tak-responsive-rules
CSS レスポンシブ実装ルール
この skill は、レスポンシブ CSS の判断順序を揃え、不要なブレイクポイントと場当たり的な単位選択を減らすためのものです。 CSS はブラウザへの提案であり、まずは Intrinsic な適応を優先します。
この skill を使う場面
- 新規に CSS を書くとき
- 既存のレスポンシブ実装をレビューするとき
- Media Queries と Container Queries の使い分けを決めるとき
clamp()や流動値の設計をするときvwvhcqiなどの単位選択を見直すとき- AI が生成した CSS に危ないレスポンシブ実装が混ざっていないか確認するとき
最初に決めること
- その要素は、そもそもレスポンシブにすべきか。
- クエリなしで成立させられないか。
- 依存先は親要素の幅か、ビューポート全体か。
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