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）：

• バリデーション状態を備えたテキスト入力
• テキストエリアコンポーネント
• 左右のアイコンに対応
• エラーと補足テキストの表示
• ラベルとの連携
• アクセシビリティを完全サポート

実装ワークフロー：

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

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

一般的なページセクション向けに、あらかじめデザインされたレスポンシブなレイアウトパターンを使用できます。

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

• 3 種類のバリアント：centered、split、minimal
• CTA（primary と secondary）に対応
• 背景グラデーションを任意で設定可能
• 画像・イラストに対応
• アニメーションを標準搭載

機能グリッド（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. コーポレートブルー - プロフェッショナルで信頼感のある配色（ビジネスアプリ、SaaS）
2. ビビッドパープル - クリエイティブでモダンな配色（クリエイティブツール、ポートフォリオ）
3. ミニマリストグレー - クリーンで洗練された配色（ミニマリストなデザイン）
4. ウォームサンセット - エネルギッシュで親しみやすい配色（コンシューマーアプリ、eコマース）
5. オーシャンフレッシュ - 落ち着いたプロフェッショナルな配色（ヘルスケア、金融アプリ）
6. ダークモード - モダンで目に優しい配色（開発者ツール、ダッシュボード）

各パレットには次の色が含まれています：

• プライマリカラーとセカンダリカラー
• アクセントカラー
• 背景色とサーフェスカラー
• テキストカラー（プライマリとセカンダリ）
• セマンティックカラー（成功、警告、エラー）
• ボーダーカラー

実装方法：

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

選択ワークフロー：

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

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

事前に用意されたCSSクラスとキーフレームを使って、滑らかでプロフェッショナルなアニメーションを追加します。

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

• フェードアニメーション（fadeIn、fadeOut、fadeInUp、fadeInDown）
• スライドアニメーション（slideInLeft、slideInRight）
• スケールアニメーション（scaleIn、scaleOut）
• ユーティリティアニメーション（bounce、pulse、spin）
• スケルトンローディング（シマー効果）
• ホバー効果（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変数）を設定します
• アニメーション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';
   

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

すべてのコンポーネントとレイアウトは、モバイルファーストのアプローチに従っています。

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. 余白：padding と margin の値を変更します
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 - バリデーション状態に対応した入力およびテキストエリアコンポーネント
• 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. キーボード操作の流れをテストします