gaspanik

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"

Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like `space-y-*`, `space-x-*`, `flex-shrink`, `shadow-sm`, `bg-opacity-*` are present · Hardcoded arbitrary values like `text-[#1e40af]` or `w-[320px]` are used · Conflicting or redundant classes like `flex` and `block` on the same element are found · Asked whether to use `cn()` / `clsx`, or whether to consolidate with `*:` variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: `aria-label`, `ul/li`, `button type`, `label`, etc. · Asked to review `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro` files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".

Reads all Variables from a Figma file URL and writes them as Tailwind CSS v4 @theme tokens into the project's Tailwind CSS entry file (found via grep, or src/index.css if none exists).

Finds the Tailwind CSS v4 entry file by searching for @import "tailwindcss", reads @theme tokens, and writes them to a Figma file as Variables organized into appropriate collections by type.

Apply a harmonious type scale to a Tailwind CSS v4 project by choosing a base font size and a named scale ratio (from typescale.com). Sets --text-xs through --text-9xl in @theme (covering all Tailwind text size classes) and maps h1–h6 font sizes in @layer base. Use this skill when the user says things like: "タイプスケール変えたいんだけど", "フォントサイズを整えたい", "見出しのサイズをちゃんとしたい", "タイポグラフィのスケールを設定して", "apply a type scale", "set up typography scale", "change font sizes".

Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like `space-y-*`, `space-x-*`, `flex-shrink`, `shadow-sm`, `bg-opacity-*` are present · Hardcoded arbitrary values like `text-[#1e40af]` or `w-[320px]` are used · Conflicting or redundant classes like `flex` and `block` on the same element are found · Asked whether to use `cn()` / `clsx`, or whether to consolidate with `*:` variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: `aria-label`, `ul/li`, `button type`, `label`, etc. · Asked to review `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro` files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".

Generates a DESIGN.md file in the project root following Google's design.md specification. Supports four source modes — codebase exploration, Figma URL, existing DESIGN.md URL, or pasted design spec content — and validates the output with the design.md linter.

Converts DESIGN.md into a blog-style visual HTML document. Includes a default template; pass an HTML file path as an argument to use a custom one. In Astro projects, generates src/pages/design-preview.astro. After generation, optionally exports to Figma as a capture or as Figma nodes.

Accepts a Figma frame URL, checks whether the structure is easy for AI to understand across 4 dimensions, and outputs an improvement report.

Accepts a Figma component or component set URL, audits variant structure, component properties, and AI-readiness across 5 dimensions, and outputs an improvement report.

UIモックアップを作成する「create-mockup」スキルの軽量版です。「モックアップ作りたい」「ページ追加したい」「UIデザインを実装したい」「サイトの画面を作りたい」「LP/トップページを作って」「デザインを実装して」、または英語で "create a mockup"、"make a new page"、"implement a UI design"、"build a site screen"、"create a landing page / top page"、"implement a design" などと言ったときに使用します。サイトタイプ・デザインスタイル・ページタイプを確認してから、このプロジェクトの CLAUDE.md の規約に従って実装します。Figma URL なしで UI を構築するときに特に便利です。

Visual editing skill that requires no browser extension. Click anywhere in the browser to enter edit instructions, which are sent via a local server, saved to a file, and read by Claude for implementation. Works with any Claude interface (VS Code, Claude Desktop, terminal) and any framework (Astro, Vite, HTML, etc.). Trigger phrases: "click-to-fix", "クリックして修正", "ブラウザで修正", "ブラウザで編集", "visual edit". Cleanup phrase: "編集終了".

Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like `space-y-*`, `space-x-*`, `flex-shrink`, `shadow-sm`, `bg-opacity-*` are present · Hardcoded arbitrary values like `text-[#1e40af]` or `w-[320px]` are used · Conflicting or redundant classes like `flex` and `block` on the same element are found · Asked whether to use `cn()` / `clsx`, or whether to consolidate with `*:` variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: `aria-label`, `ul/li`, `button type`, `label`, etc. · Asked to review `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro` files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".

Accepts a Figma frame URL, analyzes AI-readiness across 4 dimensions, and delivers the verdict as a weather forecast — ☀️ 快晴 to 🌀 台風.