modern-css

SKILL.md

Pure native CSS for building interfaces — no preprocessors, no frameworks.

| CSS Grid, Subgrid, Flexbox | @function, if() (Chrome-only) | | Container Queries (size + style) | Customizable (Chrome-only) | | :has(), :is(), :where() | Scroll-state queries (Chrome-only) | | CSS Nesting, @layer, @scope | sibling-index(), sibling-count() | | @property (typed custom props) | ::scroll-button(), ::scroll-marker |

| oklch(), color-mix(), light-dark() | Typed attr() beyond content | | Relative color syntax | field-sizing: content | | @starting-style, transition-behavior | interpolate-size (Chrome-only) | | Scroll-driven animations | Grid Lanes / masonry (experimental) | | Anchor positioning, Popover API | random() (Safari TP only) |

デザイン システム、コンポーネント ライブラリ、またはフロントエンド アプリケーションを作成するときに積極的に適用します。 CSS グリッド、サブグリッド、フレックスボックス、コンテナ クエリ、:has()、@layer、@scope、CSS ネスト、@property、@function、if()、oklch、カラーミックス、明暗、相対色、@starting スタイル、スクロール駆動アニメーション、ビュー遷移、アンカー位置、ポップオーバー、カスタマイズ可能な選択、コンテンツ可視性、論理プロパティ、テキストラップ、補間サイズ、クランプ、フィールドサイジング、モダン CSS、CSS アーキテクチャ、レスポンシブ デザイン、ダーク モード、テーマ、デザイン トークン、カスケード レイヤー。 Web プロジェクトの CSS の作成、レイアウト アプローチの選択、レスポンシブ コンポーネントの構築、ダーク モードやテーマの実装、アニメーションやトランジションの作成、フォーム要素のスタイル設定、従来のスタイルシートの最新化を行うときに使用します。最新の CSS 機能と、純粋なネイティブ CSS を使用してインターフェイスを構築するためのベスト プラクティス。 ソース: ccheney/robust-skills。

原文を見る