zudo-css-wisdomPragmatic CSS knowledge for AI概要/GitHub概要zudo-css とはcss-wisdom スキルFlexbox & GridFlexbox パターンCSS Grid パターンサブグリッドgap と margin の使い分けポジショニングセンタリングテクニックポジショニングガイドスタッキングコンテキストposition fixed の包含ブロックアンカーポジショニングサイジングfit-content, max-content, min-contentclamp() による流体サイジング論理プロパティ（Logical Properties）ネガティブマージンによる拡張 + パディングで戻すOverflow の clip と hiddenメディアレターボックスステージaspect-ratioObject Fit と Object Positionレスポンシブ画像ドキュメントレイアウトマルチカラムレイアウトテーブルセルの幅制御印刷とPDF出力フォントサイズclamp()を使った流体フォントサイズ3層フォントサイズ戦略画面幅ベースのフォントサイズ定義line-heightのベストプラクティスステージ比例タイポグラフィフォントフォント読み込み戦略バリアブルフォント日本語フォントファミリーの指定Noto Sans Webフォントガイドテキスト制御テキストオーバーフローとラインクランプバーティカルリズムtext-wrap: balanceとprettyProse Heading Spacing長い URL とパスの折り返しカラーOKLCH カラースペースcolor-mix()currentColor パターンダークモード戦略カラーパレット戦略3層カラー戦略エフェクトバックドロップフィルターとグラスモーフィズムクリップパスとマスクブレンドモードフィルターエフェクトCSS 3Dトランスフォームテキストのアウトラインとストローク効果グラデーションテクニックCSSのみのパターンライブラリシャドウ & ボーダーレイヤードナチュラルシャドウボーダーテクニックスムーズなシャドウトランジションレスポンシブコンテナクエリclamp()によるフルイドデザインメディアクエリのベストプラクティスレスポンシブグリッドパターンステート & トランジションホバー・フォーカス・アクティブ状態トランジションのベストプラクティスビュートランジションセレクター:has()セレクター:is()と:where()セレクター親要素の状態による子要素のスタイリングスクロールスクロールスナップスクロール駆動アニメーションオーバースクロールの挙動アクセシビリティフォームコントロールのスタイリングタッチターゲットのサイズ設定prefers-reduced-motion（モーション軽減設定）カラーコントラストとアクセシビリティアーキテクチャBEM戦略コンポーネントファースト戦略CSS Modules 戦略カスケードレイヤーMarkdown から HTML への変換アーキテクチャデザイントークンDesign Token Lint2層サイズ戦略マルチネームスペーストークン戦略Z-Index 戦略ディスプレイスケール戦略タイトトークン戦略カラートークンパターンタイポグラフィトークンパターントークンプレビューコンポーネントトークンと任意の値高密度なデスクトップクラス Web アプリのスペーシングアーキテクチャカスタムプロパティカスタムプロパティパターンカタログテーマレシピ@property（型付きカスタムプロパティ）デザイン原則スペーシングの設計思想：近接によるグルーピング色の使い方の設計思想：アクセントの予算シェイプランゲージ：角丸はブランドの意思決定AI エージェントが実際に従うデザイントーン仕様の書き方Claude