ceebeedee-demo-starter

Google の design.md 仕様に沿って DESIGN.md をプロジェクトルートに生成する。コードベース探索・Figma URL・既存 DESIGN.md URL の3つのソースモードに対応し、design.md リンターで検証する。

UIモックアップを作成するスキル。ユーザーが「モックアップを作りたい」「新しいページを作って」「UIデザインを実装したい」「サイトの画面を作りたい」「LP/トップページを作って」「デザインを実装して」などと言った場合は必ずこのスキルを使う。サイト種別・デザインテイスト・ページ種別の3つをヒアリングしてから、このプロジェクトのCLAUDE.md仕様に沿って実装する。Figma URLがない状態でUIを作る場合に特に有効。

Figma ファイル URL からすべての変数を読み取り、Tailwind CSS v4 の @theme トークンとして src/index.css に書き出す。

Tailwind CSS コードのレビュー・最適化・移行、および HTML アクセシビリティチェックを行うスキル。 以下の場合に必ず使用する： · Tailwind クラスを「レビューして」「きれいにして」「確認して」「見て」と依頼された場合 · `space-y-*`、`space-x-*`、`flex-shrink`、`shadow-sm`、`bg-opacity-*` などの v3 クラスが存在する場合 · `text-[#1e40af]` や `w-[320px]` のようなハードコードされた任意値が使われている場合 · 同一要素に `flex` と `block` など、競合・重複クラスが見つかった場合 · `cn()` / `clsx` の使用可否や `*:` バリアントへの統合を相談された場合 · v3 から v4 への移行・書き直しを依頼された場合 · `aria-label`、`ul/li`、`button type`、`label` など HTML アクセシビリティ構造の確認を依頼された場合 · Tailwind が使われている `.html`、`.tsx`、`.jsx`、`.vue`、`.astro` ファイルのレビューを依頼された場合 フレームワーク非依存（HTML / React / Vue / Svelte / Astro など）。 「クラスがなんかおかしい」「v4 にアップグレードしたらデザインが変わった」「CSS モジュールから移行したい」といった曖昧な依頼にも使用する。

src/index.css の Tailwind CSS v4 @theme トークンを読み取り、型別に適切なコレクションへ整理して Figma ファイルに変数として書き出す。

ベースフォントサイズとスケール比率名（typescale.com 準拠）を選択して、 Tailwind CSS v4 プロジェクトに調和のとれたタイプスケールを適用する。 `@theme` に `--text-xs` ～ `--text-9xl` を設定し（Tailwind の全テキストサイズクラスに対応）、 `@layer base` で h1〜h6 のフォントサイズをマッピングする。 以下の場合に使用する： "タイプスケール変えたいんだけど"、 "フォントサイズを整えたい"、 "見出しのサイズをちゃんとしたい"、 "タイポグラフィのスケールを設定して"、 "apply a type scale"、"set up typography scale"、"change font sizes"