frontend-enhancer

フロントエンドエンハンサー

Web アプリケーションを、視覚的に洗練された人の手によるデザイン体験へと変えます。

前提条件：まず調査する

新しいデザインの方向性を決める際は、まず ui-research を実行し、デフォルトのスタイルではなく、実際の参考プロダクトから選択の根拠を得てください。避けるべき具体的なデフォルトは、「AI らしさを避ける」に記載されています。UI インスピレーションのソースを参照してください。

---

使用する場面

次の場合に使用します：

• スタイルやビジュアルデザインを改善する
• レスポンシブレイアウトを作成する
• アニメーションやトランジションを追加する
• カラースキームを選ぶ
• モダンな UI パターンを構築する
• 美しさを高める

次の場合は使用しないでください：

• まずインスピレーションが必要な場合 → 先に ui-research を使用します
• UX フローの設計 → generic-ux-designer を使用します
• コードアーキテクチャ → generic-feature-developer を使用します
• コードレビュー → generic-code-reviewer を使用します

基礎資料：

• UI インスピレーションのソース - 調査資料
• デザインパターン - ビジュアルトークン

調査に基づくエンハンスメントのワークフロー

1. 調査 - まず ui-research スキルを使用します（最低5〜10件の事例）
2. 評価 - 調査結果と照らし合わせて、現在の不足点を特定します
3. 計画 - インスピレーションの分析に基づいて方向性を定めます
4. 基盤 - テーマに色、余白、アニメーションを設定します
5. 適用 - 人の手による仕上げを加えて実装します（デフォルトは使いません）
6. AI らしさの確認 - 汎用的な AI パターンがないことを確認します
7. 調整 - レスポンシブ性をテストし、アクセシビリティを確認します
8. レビュー - 階層、整合性、パフォーマンスを確認します

カラーパレットの選択

パレット	用途
コーポレートブルー	ビジネスアプリ、SaaS
ビビッドパープル	クリエイティブツール、ポートフォリオ
ミニマリストグレー	すっきりとした洗練されたデザイン
ウォームサンセット	コンシューマーアプリ、EC
オーシャンフレッシュ	ヘルスケア、金融アプリ
ダークモード	開発者向けツール、ダッシュボード

各パレットには、Primary、Secondary、Accent、Background、Foreground、Muted、Success、Warning、Error が必要です。

コンポーネントのパターン

ボタン

• バリエーション：primary、secondary、outline、ghost、danger
• サイズ：sm、md、lg
• 状態：loading、disabled

カード

• バリエーション：default、bordered、elevated、interactive
• サブコンポーネント：Header、Title、Description、Content、Footer

フォーム

• 明確なフォーカス状態
• バリデーションのフィードバック
• 補助テキスト
• 必須項目の表示

アニメーションのガイドライン

GPU アクセラレーションを使用するもののみ：

/* ✅ DO animate */
transform: translateY(-4px);
opacity: 0.8;

/* ❌ AVOID */
margin-top: -4px;
height: 100px;

時間の目安：

• マイクロインタラクション：100-200ms
• トランジション：200-300ms
• 複雑なアニメーション：300-500ms

アクセシビリティ：

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

レスポンシブ戦略

ブレークポイント	最小幅	対象
base	0	モバイル
sm	640px	大型スマートフォン
md	768px	タブレット
lg	1024px	ノート PC
xl	1280px	デスクトップ

アクセシビリティチェックリスト

• 色のコントラスト >= 4.5:1（WCAG AA）
• キーボードで操作できる
• フォーカスインジケーターが見える
• セマンティック HTML
• 画像に代替テキストがある
• フォームラベルがある
• prefers-reduced-motion に準拠している
• タッチターゲットが >= 44x44px

レイアウトパターン

ヒーローセクション

• 中央配置、分割、またはミニマルなバリエーション
• プライマリ CTA + セカンダリ CTA
• 任意で背景グラデーション

機能グリッド

• 2、3、または4列
• アイコン + タイトル + 説明
• 段階的なアニメーション
• ホバー効果

パフォーマンス

• バンドルサイズへの配慮
• 重いコンポーネントを遅延読み込みする
• 画像を最適化する（WebP、レスポンシブ対応）
• 60fps のアニメーション

cn ユーティリティのセットアップ

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Before/After パターン

エンハンスメントを行う際は、変更点を記録します：

Before: Plain gray button, no hover state
After: Gradient primary button with hover lift effect

AI らしさを避ける

確認すべき危険信号

仕上げる前に、以下に該当するものがないことを確認してください。

• 既定の青／紫のグラデーション
• 完全に左右対称なレイアウト
• 汎用的なブロブや波形の装飾
• Undraw 風のストックイラスト
• 「ノート PC のモックアップを使ったヒーロー」というありきたりな表現
• 変更されていない既定の配色
• 型にはまったカードグリッド
• 多用されているグラスモーフィズムやぼかし

人間味を加えるチェックリスト

以下の要素を取り入れていることを確認してください。

• 独自のカラーパレット（既定のものではない）
• 意図的なレイアウトの非対称性
• 独自性のあるタイポグラフィの組み合わせ
• 実際の画像やカスタム画像
• 個性のあるマイクロインタラクション
• ブランド固有のディテール
• 配慮の行き届いた空状態や読み込み状態
• 個性のあるコピー

品質の比較

観点	汎用的な AI	人の手で磨き上げたもの
色	既定の青	独自のブランドパレット
レイアウト	完全なグリッド	意図的な変化
画像	ストック／汎用	厳選／カスタム
コピー	Lorem ipsum	実際の内容、個性豊か
動き	基本的なフェード	意図的でブランドらしい
ディテール	なし	ホバー状態、フィードバック

---

関連項目

• UI インスピレーションのソース - 調査ソース（最初に使用）
• デザインパターン - ビジュアルデザインのリファレンス
• UX 原則 - ユーザーエクスペリエンス
• ui-research - 新しいデザインの方向性を検討する際、最初に実行する調査ステップ
• プロジェクトの CLAUDE.md - デザイン上の制約