name: designing-frontend description: Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

フロントエンドデザイン

独創的で本番環境グレードのフロントエンドインターフェースを作成するスキル。汎用的な「AIスロップ」美学を避け、卓越した審美的ディテールと創造的な選択に細心の注意を払った、実際に動作するコードを実装します。

🎯 使用タイミング

Webコンポーネント構築時
ページ・アプリケーション作成時
インターフェースデザイン時
UIリファクタリング時

🧠 デザイン思考プロセス

コーディング前に、コンテキストを理解し大胆な美的方向性にコミット：

1. 目的の明確化

このインターフェースが解決する問題は何か？
誰が使用するのか？

2. トーンの決定（極端な方向を選択）

以下から選択し、インスピレーションとして活用：

ブルータリズム・ミニマル: 極限まで削ぎ落とした美
マキシマリストカオス: 情報量と装飾の洪水
レトロフューチャリスティック: 80s/90sサイバーパンク
オーガニック/ナチュラル: 自然界からの着想
ラグジュアリー/洗練: 高級ブランドの品格
プレイフル/トイライク: 遊び心と楽しさ
エディトリアル/マガジン: 雑誌的レイアウト
ブルータリスト/ロー: 生々しい素材感
アールデコ/ジオメトリック: 幾何学的パターン
ソフト/パステル: 柔らかく優しい色調
インダストリアル/ユーティリタリアン: 機能美

3. 制約の把握

技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）

4. 差別化ポイント

これを忘れられないものにする要素は何か？
誰かが覚えている一つのことは何か？

重要: 明確なコンセプト方向を選び、精度を持って実行する。大胆なマキシマリズムも洗練されたミニマリズムも有効 - 重要なのは強度ではなく意図性。

🎨 フロントエンド美学ガイドライン

タイポグラフィ

美しく、ユニークで、興味深いフォントを選択
❌ 避けるべき: Arial、Inter、Roboto、システムフォント
✅ 推奨: 特徴的でデザインを高める選択
ペアリング: 特徴的なディスプレイフォント + 洗練されたボディフォント

カラー & テーマ

一貫した美学にコミット
CSS変数で統一性を確保
支配的な色 + シャープなアクセント > 控えめで均等に分散されたパレット

モーション & アニメーション

エフェクトとマイクロインタラクションにアニメーションを使用
HTMLの場合: CSS-onlyソリューションを優先
Reactの場合: Motion（Framer Motion）ライブラリを使用

高インパクトな瞬間にフォーカス:

散発的なマイクロインタラクションより、よく構成されたページロード演出
animation-delayを使ったスタガードリビール
スクロールトリガー、驚きを与えるホバー状態

空間構成

予想外のレイアウト
非対称性
オーバーラップ
対角線の流れ
グリッドを破る要素
寛大なネガティブスペース、または制御された密度

背景 & ビジュアルディテール

ソリッドカラーをデフォルトにせず、雰囲気と深みを創出：

技法	説明
グラデーションメッシュ	複雑な色の混合
ノイズテクスチャ	粒状感の追加
ジオメトリックパターン	幾何学的背景
レイヤード透過	重なりによる深み
ドラマティックシャドウ	劇的な影効果
デコラティブボーダー	装飾的な境界線
カスタムカーソル	独自のマウスポインター
グレインオーバーレイ	フィルム調のノイズ

❌ 絶対に避けること

汎用AI生成美学（AIスロップ）

カテゴリ	避けるべきもの
フォント	Inter、Roboto、Arial、Space Grotesk、システムフォント
配色	白背景に紫グラデーション、ありがちなグラデーション
レイアウト	予測可能なレイアウト、Cookie-cutterパターン
全体	コンテキスト固有の特徴を欠くデザイン

重要: 生成ごとに異なるデザインを。ライト/ダークテーマ、異なるフォント、異なる美学を変化させる。共通の選択に収束してはいけない。

💡 実装の複雑さを美的ビジョンに合わせる

ビジョン	実装アプローチ
マキシマリスト	豊富なアニメーション、複雑なエフェクト、多層的なコード
ミニマリスト/洗練	抑制、精度、スペーシング・タイポグラフィ・微妙なディテールへの注意

エレガンスはビジョンの優れた実行から生まれる。

🚀 実装チェックリスト

□ 大胆な美的方向性を選択した
□ 汎用フォント（Inter, Roboto, Arial）を避けた
□ 特徴的なカラーパレットを定義した
□ 予想外のレイアウト要素を含めた
□ 意味のあるアニメーション/トランジションを追加した
□ 背景に深みと雰囲気を持たせた
□ CSS変数で一貫性を確保した
□ 本番環境グレードで機能する
□ 誰かが覚えている一つの要素がある

🔗 関連スキル

developing-nextjs: Next.js固有の最適化
using-shadcn: shadcn/uiコンポーネントの活用
enforcing-type-safety: TypeScript型安全性

📚 技術スタック別ガイド

HTML/CSS/JS

CSS-onlyアニメーションを優先
カスタムプロパティ（CSS変数）活用
@keyframesでのスタガードアニメーション

React

Framer Motion（Motion）ライブラリ
CSS Modulesまたはstyled-components
コンポーネントごとのアニメーション管理

Vue

Vue Transitionコンポーネント
GSAP連携
Scoped Stylesでのカプセル化

記憶せよ: Claudeは並外れた創造的作業が可能。既成概念にとらわれず、独自のビジョンに完全にコミットしたとき、真に何が創造できるかを示せ。

designing-frontend

SKILL.md