zudo-css-wisdom Pragmatic CSS knowledge for AI 概要 / GitHub / @Takazudo 概要zudo-css とはcss-wisdom スキルCSS設計アーキテクチャBEM戦略コンポーネントファースト戦略CSS Modules 戦略カスケードレイヤーMarkdown から HTML への変換アーキテクチャデザインシステムタイトトークン戦略カラートークンパターンタイポグラフィトークンパターントークンプレビューコンポーネントトークンと任意の値2層サイズ戦略高度なカスタムプロパティカスタムプロパティパターンカタログテーマレシピマルチネームスペーストークン戦略ディスプレイスケール戦略レイアウトFlexbox & GridFlexbox パターンCSS Grid パターンサブグリッドgap と margin の使い分けポジショニングセンタリングテクニックポジショニングガイドスタッキングコンテキストアンカーポジショニングサイジングfit-content, max-content, min-contentaspect-ratioclamp() による流体サイジング論理プロパティ（Logical Properties）特殊テクニックObject Fit と Object Positionマルチカラムレイアウトネガティブマージンによる拡張 + パディングで戻すテーブルセルの幅制御タイポグラフィフォントサイズclamp()を使った流体フォントサイズ3層フォントサイズ戦略画面幅ベースのフォントサイズ定義line-heightのベストプラクティステキスト制御テキストオーバーフローとラインクランプバーティカルリズムtext-wrap: balanceとprettyProse Heading Spacing長い URL とパスの折り返しフォントフォント読み込み戦略バリアブルフォント日本語フォントファミリーの指定Noto Sans Webフォントガイドテキストエフェクトテキストのアウトラインとストローク効果スタイリングカラーOKLCH カラースペースcolor-mix()currentColor パターンダークモード戦略カラーコントラストとアクセシビリティカラーパレット戦略3層カラー戦略シャドウ & ボーダーレイヤードナチュラルシャドウボーダーテクニックスムーズなシャドウトランジションエフェクトバックドロップフィルターとグラスモーフィズムクリップパスとマスクブレンドモードフィルターエフェクトCSS 3Dトランスフォーム@property（型付きカスタムプロパティ）グラデーションテクニックCSSのみのパターンライブラリレスポンシブコンテナクエリclamp()によるフルイドデザインレスポンシブ画像メディアクエリのベストプラクティスレスポンシブグリッドパターンインタラクティブステート & トランジションホバー・フォーカス・アクティブ状態トランジションのベストプラクティスビュートランジションセレクター:has()セレクター:is()と:where()セレクター親要素の状態による子要素のスタイリングスクロールスクロールスナップスクロール駆動アニメーションオーバースクロールの挙動フォーム & アクセシビリティフォームコントロールのスタイリングタッチターゲットのサイズ設定prefers-reduced-motion（モーション軽減設定）ClaudeCLAUDE.mdCLAUDE.mdSkillsb4pushl-demo-componentl-handle-deep-articlel-translatel-writingzudo-doc-design-systemzudo-doc-translatezudo-doc-version-bumpAgentsja-translator