zudo-css-wisdom は、AI コーディングエージェントが実装中に参照できる CSS のベストプラクティス集です。AI が書いたコードをレビューする開発者にも、実装を選ぶ理由が伝わるようにしています。各記事は、よくある問題から始まり、推奨する実装と使いどころを紹介します。
記事の中心は、実際の表示とコードを見比べられる CssPreview のデモです。デモは iframe で表示し、CSS をページ本体から分離しています。表示幅をモバイル・タブレット・全幅に切り替えて、幅が変わったときの挙動を確かめられます。
Claude Code 用の css-wisdom スキルには、CSS 記事を網羅したトピック索引があります。インストール後は / で、作業中に必要なパターンと実装上の注意点を調べられます。
概要 — サイトの使い方とスキルの導入方法
タイトトークン戦略 — 意味を持つ少数のトークンに設計の選択肢を絞る
コンポーネントファースト戦略 — UI コンポーネントを単位にユーティリティクラスをまとめる
3層カラー戦略 — パレット・テーマ・コンポーネントで色の役割を分ける