hakushiidev/claude-skills

このスキルは、特徴的でプロダクショングレードのフロントエンドインターフェースの作成をガイドします。美的細部に並外れた注意を払い、実際に動作するコードを実装します。

プロンプト例

• 「概要からヒーローセクションを作成して」
• 「スカンジナビアスタイルのカードコンポーネントを作成して」
• 「日本の雑誌のような感じにしたい。レイアウトを組んで。」
• 「設定ページを作成して。スタイルはおまかせ。」

コードを書く前に

1. 既存のコードベースを最初に探索する。 特に以下をスキャンすること:

   • コンポーネントディレクトリ: components/、ui/、shared/ 内のすべてのコンポーネント名とそのprops/APIをリストアップ
   • CSS変数 / トークン: tokens.css、variables.css、theme.css またはカスタムプロパティを持つ :root 宣言
   • Tailwind設定: tailwind.config.js または tailwind.config.ts で、theme.extend のカスタム値を確認
   • UIフレームワークのテーマ: Material UI の createTheme、Chakra の extendTheme、shadcn の globals.css と components.json
   • Storybook: .storybook/ ディレクトリまたは、コンポーネントが文書化されていることを示す *.stories.* ファイル
   • フォントの読み込み: Google Fontsリンク、@font-face 宣言、フォントのインポート
   • レイアウトパターン: 既存ページがグリッド、コンテナ、ブレークポイント、スペーシングをどのように扱っているか
   • Package.jsonのUI依存関係: tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motion など
   • 構築が必要なものと一致する、または部分的に一致するコンポーネントが存在する場合、それらを拡張または合成する。重複を作成しないこと。

2. コンテキストを理解する:

   • このインターフェースはどのような問題を解決するのか？誰が使うのか？
   • 意図された感情的なトーンは何か？
   • ハードな制約（フレームワーク、デバイス、パフォーマンス、アクセシビリティ）は何か？

3. 美的方向性を決定する。 ユーザーが指定するか（以下の哲学を参照）、またはコンテキストに合ったものを選択する。コードを書く前に、選択とその理由を述べること。

美的哲学

ユーザーが哲学を指定したり、雰囲気を説明したりした場合、これらを具体的な実装ガイドとして使用する。各哲学は、タイポグラフィ、色、レイアウト、スペーシング、モーション、ディテールの扱いを定義する。

Dieter Rams（機能主義者）

より少ないが、より良い。すべての要素はその存在価値を得る。機能のない装飾はない。

• タイポグラフィ: クリーンなサンセリフ（Helvetica Neue、Suisse Intl、Akkurat）。見出しはタイトな文字間隔。本文は余裕のある行間。厳密に使用される1つのサイズスケール。
• 色: 控えめ。単一の機能的なアクセントカラーを伴うモノクローム。白または明るいグレーの背景。色は情報であり、装飾ではない。
• レイアウト: 厳格なグリッド。明確な機能階層。空間システムに合わせたコンポーネントの配置。それ自体のための非対称性は禁止。
• スペーシング: 一貫性のある数学的なスケール（4px/8pxベース）。ゆったりとしたパディング。要素間の余白。
• モーション: 最小限。意図的なトランジションのみ（状態変化、表示）。装飾的なアニメーションは禁止。
• ディテール: シャドウよりも微妙なボーダーと分割線。正確な位置合わせ。角丸は控えめかつ一貫して使用。

Swiss / 国際タイポグラフィ様式

構造による客観性。グリッドは神聖。コンテンツが王。

• タイポグラフィ: 強力なサンセリフ（Neue Haas Grotesk、Univers、Aktiv Grotesk）。見出しと本文の劇的なスケールコントラスト。大文字の小見出しにゆったりとした文字間隔。
• 色: ハイコントラスト。黒、白、および1原色。構成要素としての大胆な色のブロック。
• レイアウト: 強固なマルチカラムグリッド。非対称なバランス。テキストと画像の対話。要素間の位置合わせは不可譲。
• スペーシング: グリッドモジュールによって定義。ガターはデザインの一部であり、後付けではない。
• モーション: グリッドを尊重するページトランジションとスクロールトリガーリビール。遊び心のあるバウンスは禁止。
• ディテール: 構造要素としての罫線（水平線）。グラデーションなし。シャドウなし。フラットであることがポイント。

日本的なミニマリズム（間）

ネガティブスペースがコンテンツ。抑制が洗練を伝える。静かさが騒がしさに勝る。

• タイポグラフィ: 細字のサンセリフまたはエレガントなセリフ（Noto Sans、Cormorant）。ゆったりとした行間（1.8-2.0）。大きな余白マージンを持つ小さな本文サイズ。
• 色: くすんだ自然色（暖かみのあるグレー、石色、セージ、和紙）。ハードなコントラストよりも微妙なトーンシフト。ほぼモノクローム。
• レイアウト: 非対称だがバランスが取れている。中央からずれたコンテンツ。広い空領域は意図的。コンテンツは空間に浮かぶ。
• スペーシング: 極度の余白。「通常」の2〜3倍のパディングとマージン。要素は呼吸する。
• モーション: スローで穏やかなフェード（400-600ms）。バウンスなし、オーバーシュートなし。位置シフトよりも不透明度トランジション。
• ディテール: 極細のボーダー。微妙なテクスチャー（紙目、リネン）。シャープなシャドウなし。ソフトで拡散したエフェクト。

ブルータリズム / ロウ

構造が見える。磨きなし。反美的が美的。

• タイポグラフィ: システムフォント、モノスペース（JetBrains Mono、IBM Plex Mono、Courier）、またはアグレッシブなディスプレイフェイス。サイズの混在。テクスチャーとしてのテキスト。
• 色: 白黒が基本。色を使うなら、生で衝突する色（工事用イエロー、ハザードオレンジ、ターミナルグリーン）。グラデーションなし。
• レイアウト: 可視のボーダー。むき出しになったボックスモデル。積み重ねられたブロック。意図的な粗さ。コンテンツが第一。美しさは決して。
• スペーシング: タイトまたは意図的に不均一。圧縮されたように感じるパディング。
• モーション: なし、または衝撃的（インスタントな状態変化、ハードカット）。イージングなし。
• ディテール: 可視のアウトライン。デフォルトのブラウザフォーム要素は意図的に使用可能。テキストのみのインターフェース。機能的なものでなければアイコンなし。

スカンジナビアン

温かさプラス抑制。機能的な美しさ。デフォルトでアクセシブル。

• タイポグラフィ: 丸みを帯びた親しみやすいサンセリフ（Nunito、Poppins、Circular、Cera Pro）。ミディアムウェイト。快適な読みやすいサイズ。
• 色: ナチュラルなパレット。暖かい白、ソフトブルー、くすんだグリーン、クレイ。パステルアクセント。純粋な黒は使わない（チャコールを使用）。
• レイアウト: クリーンでオープン。カードベース。角丸（8-12px）。快適でゆったりとしたレイアウト。
• スペーシング: ゆったりしているが極端ではない。すべてが親しみやすく、散らかっていない感じ。
• モーション: 優しく、自然なイージング。微妙なホバーリフト。所定の位置に落ち着くコンテンツ。
• ディテール: ソフトなシャドウ（大きなぼかし、低い不透明度）。丸みのある要素。グレーの暖かいアンダートーン。イラストとの相性が良い。

アールデコ / 幾何学的

大胆な対称性。装飾的な正確さ。主張と贅沢。

• タイポグラフィ: 幾何学的なディスプレイフェイス（Futura、Poiret One、Josefin Sans）。極端な文字間隔の大文字見出し。コントラストを与えるセリフ本文テキスト。
• 色: 豊かで深い。ゴールド/シャンパン、エメラルド、ネイビー、バーガンディ、ブラック。メタリックなアクセント（ゴールドグラデーション、キラキラエフェクト）。
• レイアウト: 対称的で中央寄せ。強力な垂直軸。装飾的なフレームとボーダー。階層的な奥行き。
• スペーシング: 構造化されフォーマル。パディングは建築的。
• モーション: エレガントなリビール。ずらしたエントランスアニメーション。パララックス深度。
• ディテール: 幾何学模様（シェブロン、太陽光線、扇型）。装飾的なボーダー。テクスチャー（大理石、ブラッシュドメタル）。ヒーロースケールでの主張のあるタイポグラフィ。

ネオ・メンフィス

遊び心のある混沌。反コーポレート。キャラクターとしてのシェイプ。

• タイポグラフィ: ウェイトとスタイルの混在。フォントの衝突は意図的。特大の見出し。斜めのテキスト。
• 色: 大胆な原色とネオン。衝突する組み合わせ（ピンクとイエロー、ブルーとオレンジ）。くすんだトーンはなし。フラットカラー、グラデーションなし。
• レイアウト: 壊れたグリッド。重なり合う要素。構成要素としてのシェイプ（円、三角形、波形）。意図的な非対称性。
• スペーシング: ある領域は密集、他は空。リズムは不規則。
• モーション: 弾むような、遊び心のある。誇張されたホバーエフェクト。揺れたり、回転したり、ポップする要素。
• ディテール: 太いボーダー。装飾としての幾何学的シェイプ。パターン（ドット、ダッシュ、ジグザグ）。ハードエッジと明るい色のドロップシャドウ。

エディトリアル / マガジン

コンテンツ主導のデザイン。タイポグラフィが重労働をする。すべてのページが見開き。

• タイポグラフィ: 見出しにはディスプレイセリフ（Playfair Display、Fraunces、Instrument Serif）。本文にはクリーンなサンセリフ（DM Sans、Source Sans）。劇的なスケール（ヒーロー見出しは72-120px）。プルクオート。ドロップキャップ。
• 色: 最小限。白黒と1アクセント。カラーはエディトリアルに使用（強調のため、装飾ではない）。
• レイアウト: 強力なカラムグリッド（3-5カラム）。フルブリード画像。テキストの回り込み。混合カラム幅。垂直リズム。
• スペーシング: ゆったりとしたマージン。見出しはタイトな行間、本文はオープンに。構成ツールとしての余白。
• モーション: スクロールトリガーリビール。画像のパララックス。スムーズなページトランジション。
• ディテール: 仕切りとしての細い罫線。キャプションタイポグラフィ。号数/日付メタデータ。印刷に着想を得たディテール（丁付け番号、柱）。

実装ガイドライン

• タイポグラフィ: Google FontsまたはCDNからロードされた特徴的なフォントを選択する。ジェネリックなデフォルト（Inter、Roboto、Arial、システムフォント）は避ける。ディスプレイフォントと本文フォントを組み合わせる。
• 色: 一貫性のためにCSS変数を使用する。安全で均等に分散されたパレットよりも、支配的な色とシャープなアクセントの方が効果的。
• モーション: HTMLにはCSSトランジション。ReactにはFramer Motion / Motionライブラリ。散在するマイクロインタラクションよりも、インパクトの大きい瞬間（ページロードリビール、状態変化）に集中する。
• 空間構成: 予期しないレイアウトが注目を集める。非対称性、重なり、斜めの流れ、グリッドを壊す要素。または、哲学が要求する場合は、精密に実行された厳格なグリッド。
• 背景と奥行き: 雰囲気を作り出す。グラデーションメッシュ、ノイズテクスチャー、幾何学模様、レイヤード透過、グレインオーバーレイ。選択した哲学に合わせる。

決してジェネリックなAI美学を生成しないこと：白背景に紫グラデーション、Interフォント、予測可能なカードグリッド、既製品のコンポーネントレイアウト。すべての出力は、特定のコンテキストのためにデザインされたと感じさせること。

実装の複雑さを美的ビジョンに合わせること。Dieter Ramsのインターフェースは50行の正確なCSS。Neo-Memphisのインターフェースは300行のクリエイティブな混沌。どちらも正しい。

モバイルファースト

最初にモバイルレイアウトを構築し、その後スケールアップする。これは譲れない。

• 375px幅のシングルカラムレイアウトから始める。
• 各ブレークポイントで複雑さを追加する（max-width ではなく min-width のメディアクエリ）。
• タッチターゲットはモバイルで最低44x44pxであること。
• 本文テキストはモバイルで最低16pxであること（iOSのフォーカス時ズームを防ぐ）。
• ナビゲーションはモバイル固有のパターン（ハンバーガー、ボトムタブ、またはドロワー）を持つこと。はみ出す水平ナビゲーションバーに依存しないこと。
• すべてのブレークポイントで行長が快適（45-75文字）に保たれていることを確認すること。

ダークモード

デザイントークンファイル（/design-tokens から）が存在する場合、そのダークモードパレットを使用する。存在しない場合は、ライトテーマと一緒にダークモードサポートを生成する。

• CSSカスタムプロパティを使用して、テーマの切り替えが変数値の変更であってコンポーネントの書き換えではないようにする。
• prefers-color-scheme メディアクエリ（システム設定）と [data-theme="dark"] 属性（手動トグル）の両方をサポートする。
• 単純に色を反転させない。暗い背景は、哲学に合わせて暖色系または寒色系にする（スカンジナビアンには暖かいチャコール、スイスにはクールなスレート、ブルータリズムにはほぼ黒）。
• 純粋な白いテキストは、アイボリー（例：#E5E5E5 または rgba(255,255,255,0.87)）に減らして目の負担を軽減する。
• ダークモードのシャドウは、ライトモードと同じ値ではなく、より暗く、より透明にする。
• アクセントカラーは、ダーク背景に対してWCAGコントラスト比を維持するために、明度調整が必要な場合がある。
• 必要とするユーザーのために prefers-reduced-motion メディアクエリを含める。そのクエリ内では、すべてのアニメーションとトランジションを無効にするか簡略化する。