zudo-css Pragmatic CSS knowledge for AI 概要 / GitHub / @Takazudo 概要zudo-css とはcss-wisdom スキルCSS設計アーキテクチャBEM戦略コンポーネントファースト戦略CSS Modules 戦略カスケードレイヤーデザインシステムタイトトークン戦略カラートークンパターンタイポグラフィトークンパターントークンプレビューコンポーネントトークンと任意の値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フォントフォント読み込み戦略バリアブルフォント日本語フォントファミリーの指定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-writingAgentsja-translator