zudo-css-wisdomPragmatic CSS knowledge for AI概要/GitHub/@Takazudo概要zudo-css とはcss-wisdom スキルCSS設計ArchitectureBEM戦略コンポーネントファースト戦略CSS Modules 戦略カスケードレイヤーMarkdown から HTML への変換アーキテクチャDesign Token LintDesign Systemsタイトトークン戦略カラートークンパターンタイポグラフィトークンパターントークンプレビューコンポーネントトークンと任意の値2層サイズ戦略高度なカスタムプロパティカスタムプロパティパターンカタログテーマレシピマルチネームスペーストークン戦略ディスプレイスケール戦略Z-Index 戦略レイアウトFlexbox And GridFlexbox パターンCSS Grid パターンサブグリッドgap と margin の使い分けPositioningセンタリングテクニックポジショニングガイドスタッキングコンテキストposition fixed の包含ブロックアンカーポジショニングSizingfit-content, max-content, min-contentaspect-ratioclamp() による流体サイジング論理プロパティ（Logical Properties）SpecializedObject Fit と Object Positionマルチカラムレイアウトネガティブマージンによる拡張 + パディングで戻すテーブルセルの幅制御タイポグラフィFont Sizingclamp()を使った流体フォントサイズ3層フォントサイズ戦略画面幅ベースのフォントサイズ定義line-heightのベストプラクティスFontsフォント読み込み戦略バリアブルフォント日本語フォントファミリーの指定Noto Sans WebフォントガイドText Controlテキストオーバーフローとラインクランプバーティカルリズムtext-wrap: balanceとprettyProse Heading Spacing長い URL とパスの折り返しText Effectsテキストのアウトラインとストローク効果スタイリングColorOKLCH カラースペースcolor-mix()currentColor パターンダークモード戦略カラーコントラストとアクセシビリティカラーパレット戦略3層カラー戦略EffectsバックドロップフィルターとグラスモーフィズムクリップパスとマスクブレンドモードフィルターエフェクトCSS 3Dトランスフォーム@property（型付きカスタムプロパティ）グラデーションテクニックCSSのみのパターンライブラリShadows And Bordersレイヤードナチュラルシャドウボーダーテクニックスムーズなシャドウトランジションレスポンシブコンテナクエリclamp()によるフルイドデザインレスポンシブ画像メディアクエリのベストプラクティスレスポンシブグリッドパターンインタラクティブForms And Accessibilityフォームコントロールのスタイリングタッチターゲットのサイズ設定prefers-reduced-motion（モーション軽減設定）Scrollスクロールスナップスクロール駆動アニメーションオーバースクロールの挙動Selectors:has()セレクター:is()と:where()セレクター親要素の状態による子要素のスタイリングStates And Transitionsホバー・フォーカス・アクティブ状態トランジションのベストプラクティスビュートランジションClaude