Frontend Enhancer

概要

Frontend Enhancer スキルは、Next.js アプリケーションを視覚的に優れたモダンなウェブ体験に変えます。本番環境対応のコンポーネント、包括的なデザインガイドライン、厳選されたカラーパレット、スムーズなアニメーション、およびレスポンシブ性とアクセシビリティに最適化された柔軟なレイアウトテンプレートを提供します。

このスキルを使用する場合

以下の場合にこのスキルを呼び出してください：

• 既存アプリケーションの視覚的な外観を改善する
• モダンなスタイリングで新しい UI コンポーネントを作成する
• カラースキームとデザインテーマを選択する
• アニメーションとトランジションを追加する
• 異なる画面サイズのためのレスポンシブレイアウトを構築する
• ヒーローセクション、フィーチャーグリッド、またはランディングページを実装する
• より良い視覚的階層でユーザー体験を向上させる
• アプリケーション全体に一貫したデザインパターンを適用する

コア機能

1. コンポーネントライブラリ

複数のバリアントと状態を持つ本番環境対応の React コンポーネントを使用してください：

ボタンコンポーネント (assets/button-variants.tsx)：

• バリアント：primary、secondary、outline、ghost、danger
• サイズ：sm、md、lg
• アニメーション付きスピナーのロード状態
• 完全な TypeScript サポート
• アクセシビリティ機能が組み込まれている

カードコンポーネント (assets/card-variants.tsx)：

• バリアント：default、bordered、elevated、interactive
• サブコンポーネント：CardHeader、CardTitle、CardDescription、CardContent、CardFooter
• ホバーエフェクトとトランジション
• 柔軟なパディングオプション

入力コンポーネント (assets/input-variants.tsx)：

• バリデーション状態付きテキスト入力
• Textarea コンポーネント
• 左右のアイコンサポート
• エラーとヘルパーテキスト表示
• ラベル統合
• 完全なアクセシビリティサポート

実装ワークフロー：

1. assets/ から目的のコンポーネントファイルをプロジェクトのコンポーネントディレクトリにコピーする
2. cn ユーティリティ関数が存在することを確認する（assets/utils-cn.ts を参照）
3. 色、間隔、またはバリアントをカスタマイズしてブランドに合わせる
4. コンポーネントをページにインポートして使用する

2. レイアウトテンプレート

一般的なページセクション向けに事前設計された、レスポンシブなレイアウトパターンを使用してください：

ヒーローセクション (assets/layout-hero-section.tsx)：

• 3 つのバリアント：centered、split、minimal
• CTA（主要および副要）のサポート
• オプションの背景グラデーション
• 画像/イラストレーションサポート
• 組み込みアニメーション

フィーチャーグリッド (assets/layout-feature-grid.tsx)：

• 設定可能なカラム（2、3、または 4）
• アイコン統合
• スタッガーアニメーション
• ホバーエフェクト
• 完全なレスポンシブ対応

実装ワークフロー：

1. assets/ からレイアウトコンポーネントをコンポーネントディレクトリにコピーする
2. props とコンテンツをカスタマイズしてニーズに合わせる
3. 既存のページと統合する
4. スタイルを調整してブランドに合わせる

3. デザインシステムガイドライン

一貫した、プロフェッショナルなインターフェースのための包括的なデザイン原則を参照してください：

デザイン原則 (references/design_principles.md)：

• 視覚的階層のベストプラクティス
• 間隔とリズムのガイドライン
• タイポグラフィの推奨事項
• カラー理論と使用方法
• 一貫性基準
• レスポンシブ性の戦略
• アクセシビリティガイドライン（WCAG AA/AAA）
• 一般的なレイアウトパターン

参照するタイミング：

• 新しいデザインを開始するとき
• 視覚的階層についての決定をするとき
• アクセシビリティコンプライアンスを確保するとき
• アプリ全体の一貫性を確立するとき
• デザイン品質をレビューするとき

使用方法： references/design_principles.md を読んでベストプラクティスを理解した上で、特定のデザイン課題に適用してください。このドキュメントは理論と実装の両方をカバーしています。

4. カラーパレット

モダンなウェブアプリケーション向けに専門的にキュレーションされたカラースキームにアクセスしてください：

利用可能なパレット (references/color_palettes.md)：

1. Corporate Blue - プロフェッショナル、信頼できる（ビジネスアプリ、SaaS）
2. Vibrant Purple - クリエイティブ、モダン（クリエイティブツール、ポートフォリオ）
3. Minimalist Gray - クリーン、洗練（ミニマリストデザイン）
4. Warm Sunset - エネルギッシュ、フレンドリー（コンシューマーアプリ、eコマース）
5. Ocean Fresh - 穏やか、プロフェッショナル（ヘルス、ファイナンスアプリ）
6. Dark Mode - モダン、目に優しい（開発者ツール、ダッシュボード）

各パレットに含まれるもの：

• プライマリーとセカンダリーカラー
• アクセントカラー
• 背景とサーフェスカラー
• テキストカラー（プライマリーとセカンダリー）
• セマンティックカラー（success、warning、error）
• ボーダーカラー

実装オプション：

1. Tailwind CSS：tailwind.config.js に色を追加（例を提供）
2. CSS Variables：グローバル CSS でカスタムプロパティを使用（例を提供）
3. インラインスタイル：コンポーネント内で 16 進数コードを直接参照

選択ワークフロー：

1. references/color_palettes.md で利用可能なすべてのパレットを確認する
2. アプリケーションの目的とブランドアイデンティティを考慮する
3. 目標に合わせたパレットを選択する
4. Tailwind config または CSS Variables を使用して実装する
5. ブランドに合わせて特定の色を調整する

5. アニメーションとトランジション

事前設計された CSS クラスとキーフレームを使用してスムーズで、プロフェッショナルなアニメーションを追加してください：

アニメーションライブラリ (assets/animations.css)：

• フェードアニメーション（fadeIn、fadeOut、fadeInUp、fadeInDown）
• スライドアニメーション（slideInLeft、slideInRight）
• スケールアニメーション（scaleIn、scaleOut）
• ユーティリティアニメーション（bounce、pulse、spin）
• スケルトンロード（shimmer エフェクト）
• ホバーエフェクト（lift、glow、scale）
• リストアニメーションのスタッガーディレイ

アクセシビリティ： すべてのアニメーションはアクセシビリティコンプライアンスのために prefers-reduced-motion を尊重します。

実装ワークフロー：

1. assets/animations.css をグローバル CSS ファイルにコピーする（またはアニメーション用の別ファイルを作成する）
2. animate-fade-in-up、hover-lift などのユーティリティクラスを適用する
3. リストの連続アニメーションにはスタッガークラスを使用する
4. 必要に応じて期間とイージングをカスタマイズする

ベストプラクティス：

• アニメーションは控えめに（マイクロインタラクションは 200～300ms）
• アニメーションを使ってユーザーの注意を引く
• 過剰なモーションで注意散漫になるのを避ける
• 常に prefers-reduced-motion を有効にしてテストする

拡張ワークフロー

フロントエンドアプリケーションを拡張する際は、以下の体系的なアプローチに従ってください：

ステップ 1：現在の状態を評価する

• ビジュアルポーリッシュに欠けるエリアを特定する
• 矛盾したスタイリングパターンを確認する
• レスポンシブ動作をチェックする
• アクセシビリティの問題をレビューする
• カラースキームとタイポグラフィを評価する

ステップ 2：デザイン方向を選択する

• references/color_palettes.md からカラーパレットを選択する
• references/design_principles.md のデザイン原則をレビューする
• コンポーネントバリアントとスタイルを決定する
• レイアウト改善を計画する

ステップ 3：基礎を実装する

• cn ユーティリティ関数を設定する（assets/utils-cn.ts）
• 選択したカラーパレットを設定する（Tailwind または CSS Variables）
• グローバルスタイルにアニメーション CSS を追加する（assets/animations.css）
• 一貫した間隔スケールを確保する

ステップ 4：コンポーネントを適用する

• 基本的な要素を assets/ の拡張コンポーネントで置き換える
• キーページのレイアウトテンプレートを実装する
• アプリケーション全体に一貫したスタイルを適用する
• アニメーションとトランジションを追加する

ステップ 5：洗練と磨き上げ

• 異なるデバイスサイズ全体でレスポンシブ性をテストする
• アクセシビリティを確認する（キーボードナビゲーション、コントラスト、スクリーンリーダー）
• 一貫したホバー/フォーカス状態を確認する
• パフォーマンスを最適化する（アニメーションパフォーマンスをチェック）
• prefers-reduced-motion でテストする

ステップ 6：最終レビュー

• すべてのページで視覚的階層をチェックする
• カラーの一貫性を確認する
• すべてのインタラクティブ状態をテストする
• レスポンシブブレークポイントを検証する
• アクセシビリティコンプライアンスをレビューする

ユーティリティ関数のセットアップ

ほとんどのコンポーネントにはクラス名をマージするための cn ユーティリティ関数が必要です。セットアップするには：

1. assets/utils-cn.ts をプロジェクトの lib/utils.ts にコピーする
2. 依存関係をインストールする：

   npm install clsx tailwind-merge
   

3. コンポーネントでインポートする：

   import { cn } from '@/lib/utils';
   

レスポンシブデザイン戦略

すべてのコンポーネントとレイアウトは mobile-first アプローチに従います：

1. ベーススタイル - モバイル向けに最適化（320px+）
2. sm ブレークポイント - 小さいタブレット（640px+）
3. md ブレークポイント - タブレット（768px+）
4. lg ブレークポイント - デスクトップ（1024px+）
5. xl ブレークポイント - 大きいデスクトップ（1280px+）

各ブレークポイントをテストして、適切なレイアウトと可読性を確保します。

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

拡張されたすべてのインターフェースが以下の基準を満たすことを確認してください：

• カラーコントラストが WCAG AA（テキスト 4.5:1）を満たしている
• すべてのインタラクティブ要素がキーボードでアクセス可能である
• フォーカスインジケーターが見える、かつ明確である
• セマンティック HTML が使用されている（nav、main、article など）
• 画像に alt テキストがある
• フォームに適切なラベルがある
• アニメーションが prefers-reduced-motion を尊重している
• タッチターゲットが最低 44x44px である

カスタマイズガイド

コンポーネントとテンプレートをブランドに合わせて調整するには：

1. 色：パレット設定またはコンポーネントファイルのカラー値を更新する
2. タイポグラフィ：フォントサイズ、太さ、ファミリーを調整する
3. 間隔：パディングとマージン値を変更する
4. ボーダー半径：丸みの角度を変更する（例：rounded-lg から rounded-xl）
5. シャドウ：シャドウの強さを調整する（例：shadow-md から shadow-lg）
6. アニメーション：期間とイージング関数を変更する

リソースサマリー

このスキルに含まれるもの：

references/

• color_palettes.md - 6 つのプロフェッショナルデザインされたカラースキーム（実装例付き）
• design_principles.md - 視覚的階層、タイポグラフィ、アクセシビリティ、一般的なパターンをカバーする包括的なデザインガイドライン

assets/

• button-variants.tsx - 5 つのバリアントと 3 つのサイズを備えたモダンボタンコンポーネント
• card-variants.tsx - サブコンポーネント付き柔軟カードコンポーネント
• input-variants.tsx - バリデーション状態付きの入力と textarea コンポーネント
• layout-hero-section.tsx - 3 つのレイアウトバリアント付きヒーローセクション
• layout-feature-grid.tsx - 設定可能なカラム付きレスポンシブフィーチャーグリッド
• animations.css - アクセシビリティサポート付き完全なアニメーションライブラリ
• utils-cn.ts - クラス名をマージするためのユーティリティ関数

成功のためのヒント

1. 計画から始める：変更を加える前にデザイン原則をレビューする
2. 1 つのパレットを選択する：一貫性のために単一のカラースキームを守る
3. 実機でテストする：エミュレータは常に真のレスポンシブ動作を示すわけではない
4. シンプルに保つ：モダンデザインは複雑さよりもシンプルを好む
5. アクセシビリティを優先する：最初からすべてのユーザー向けにデザインする
6. フィードバックに基づいて反復する：ユーザーにデザインを見せて改善する
7. 一貫性を保つ：アプリケーション全体で同じパターンを使用する
8. パフォーマンスが重要：アニメーションをスムーズ（60fps）に保ち、画像を最適化する

一般的なユースケース

既存アプリの拡張

1. カラーパレットを選択して実装する
2. 基本的なボタン/入力を拡張コンポーネントで置き換える
3. フィードバックを改善するために微妙なアニメーションを追加する
4. 間隔の一貫性をレビューして改善する
5. デバイス全体でレスポンシブ動作を確保する

ランディングページの構築

1. ヒーローセクションレイアウトを焦点として使用する
2. フィーチャーグリッドを追加して主要機能をショーケースする
3. CTA のための一貫したボタンスタイルを実装する
4. 視覚的な興味のためにスタッガーアニメーションを追加する
5. レスポンシブ性を徹底的にテストする

ダッシュボードの作成

1. データセクション用カードコンポーネントを使用する
2. 一貫した間隔と階層を実装する
3. プロフェッショナルなカラーパレットを選択する
4. データ取得のためのスケルトンローダーを追加する
5. モバイル上の操作性に配慮したコントロールを確保する

フォームの再設計

1. 入力を拡張された入力コンポーネントで置き換える
2. 明確なエラーとバリデーション状態を追加する
3. 適切なラベルの関連付けを確認する
4. 送信のためのロード状態を実装する
5. キーボードナビゲーションフローをテストする