zudo-css

Type to search...

to open search from anywhere

css-wisdom スキル

作成2026年3月18日更新2026年3月18日Takeshi Takatsudo

css-wisdom スキルは、Claude Code のスキルで、このドキュメントサイト内のすべての CSS ベストプラクティス記事をインデックス化します。AI コーディングエージェントが開発中に関連する CSS パターンやテクニックをすばやく参照できるようにするためのものです。

機能

このスキルは、CSS の概念をドキュメント記事にマッピングするトピックインデックスを管理します。呼び出されると、関連する記事を読み取り、推奨パターンを適用します。

トピックインデックスは、src/content/docs/ 配下のすべての MDX 記事（overview/ と inbox/ カテゴリを除く）から生成され、.claude/skills/css-wisdom/descriptions.json のキュレーションされた説明文と組み合わされます。

インストール

このスキルをグローバルの Claude Code スキルディレクトリにシンボリックリンクする必要があります。

pnpm run setup:symlink

このコマンドはトピックインデックスの生成を実行し、このリポジトリの .claude/skills/css-wisdom/ を指すシンボリックリンクを ~/.claude/skills/css-wisdom に作成します。

使い方

任意の Claude Code セッションで、トピックキーワードを指定してスキルを呼び出します。

/css-wisdom flexbox
/css-wisdom dark mode
/css-wisdom centering

スキルはトピックインデックスから関連する記事を見つけ、それを読み取り、コードを書く際に CSS パターンを適用します。

トピックインデックスの再生成

記事が追加または削除された場合は、トピックインデックスを再生成してください。

pnpm run generate:css-wisdom

ジェネレータースクリプト（scripts/generate-css-wisdom.js）は src/content/docs/ 配下のすべての MDX ファイルを読み取り、descriptions.json で説明文を参照し、SKILL.md トピックインデックスを生成します。

新しい記事を追加する場合は、ジェネレーターを実行する前に .claude/skills/css-wisdom/descriptions.json に説明文を追加してください。

スキルの構成

.claude/skills/css-wisdom/
  SKILL.md              # Generated topic index (do not edit manually)
  descriptions.json     # Curated article descriptions (edit this)

Revision History