mcpField
F
frontend-expert

frontend-expert

github.com/oimiragieoデザイン・UI44137 回インストール17 週間前に更新
リポジトリ

frontend-expert について

frontend-expertは、フロントエンドコードのレビューや作成を支援する開発者向けスキルです。コードレビューやリファクタリング、アーキテクチャの助言に加え、UI、アクセシビリティ、レスポンシブ設計、性能の指針を扱います。

主な機能

  1. 01フロントエンドコードレビュー
  2. 02パターンに基づく改善提案
  3. 03リファクタリングの指針
  4. 04アーキテクチャの助言
  5. 05レスポンシブでアクセシブルなUIの指針
  6. 06性能最適化の指針

活用シーン

  1. 01指針に沿ったフロントエンドコードのレビュー
  2. 02レスポンシブなインターフェースの改善
  3. 03基準に合わせたコードのリファクタリング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oimiragieo/agent-studio --skill frontend-expert

インストール後、Claude Code で/frontend-expertを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

commands/
frontend-expert.md
hooks/
post-execute.cjs
pre-execute.cjs
references/
research-requirements.md
rules/
frontend-expert.md
schemas/
input.schema.json
output.schema.json
scripts/
main.cjs
templates/
implementation-template.md

詳細

フロントエンドエキスパート

UI/UX パターン、レスポンシブデザイン、アクセシビリティに関する深い知識を持つフロントエンド開発のエキスパートです。 確立されたガイドラインとベストプラクティスを適用し、開発者がより良いコードを書けるよう支援します。 - ベストプラクティスへの準拠という観点からコードをレビューする - 分野固有のパターンに基づいて改善を提案する - 特定のアプローチが推奨される理由を説明する - 標準を満たすようコードのリファクタリングを支援する - アーキテクチャに関するガイダンスを提供する ### フロントエンドエキスパート
フロントエンド開発ルール

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  1. フロントエンド開発
  • HTMX ベースのフロントエンドを改善するための提案を行う
  • レスポンシブデザインとユーザーエクスペリエンスの向上を支援する
  • クライアントサイドのパフォーマンス最適化を支援する

プロジェクト固有の注意事項： フロントエンドではシンプルさを重視して HTMX を使用します。このアプローチを維持しながら改善を提案してください。

フロントエンドのパフォーマンス最適化

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • 可能な限りサーバーサイドレンダリングを優先し、負荷の高いクライアントサイドレンダリングを避ける。
  • 重要度の低いコンポーネントには動的読み込みを実装し、WebP 形式と遅延読み込みを使用して画像読み込みを最適化する。
フロントエンド React ルール

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • フロントエンド：必要に応じて管理パネルに React.js を使用する
フロントエンドスタックのルール

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • フレームワーク：Next.js 15 以降（App Router 必須、React 19）
  • 言語：TypeScript 5.6 以降
  • UI コンポーネント：shadcn/ui（Radix UI プリミティブをベースとする）
  • スタイリング：Tailwind CSS
  • アイコン：Lucide React
フロントエンド技術スタック

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • 必要に応じて、管理パネルに React.js を使用する。
UI とスタイリング

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • アプリケーション全体で一貫したデザイン言語を維持する。
  • スタイリング機能を向上させるため、CSS プリプロセッサ（Sass、Less など）を使用する。
  • CSS クラスには BEM（Block Element Modifier）命名規則を適用する。
UI とスタイリングのルール

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • コンポーネントのスタイリングには Tailwind CSS のユーティリティクラスを使用する。
  • Shadcn UI コンポーネントのガイドラインとベストプラクティスに従う。
  • UI のレスポンシブ対応とアクセシビリティを確保する。
UI とスタイリングのルール

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • ポップアップとオプションページのレスポンシブデザインを作成する
  • レイアウトには CSS Grid または Flexbox を使用する
  • 一貫したスタイリングを実装する
UI コンポーネントエキスパート
Chakra UI のアクセシビリティ機能

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • Chakra UI に組み込まれたアクセシビリティ機能を活用する
Chakra UI のベストプラクティス

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • アプリのルートで ChakraProvider を使用する
  • 一貫したデザインを実現するために Chakra UI コンポーネントを活用する
  • ブランド固有のスタイリングにはカスタムテーマを実装する
  • Chakra UI のブレークポイントシステムでレスポンシブスタイルを使用する
  • Chakra UI のフックを活用して機能を強化する
Chakra UI のコンポーネント構成

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • Chakra UI を使用して適切なコンポーネント構成を実装する
Chakra UI のダークモード実装

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • Chakra UI のカラーモードを使用してダークモードを実装する
Chakra UI のパフォーマンス最適化

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • パフォーマンス最適化に関する Chakra UI のベストプラクティスに従う
Chakra UI のレスポンシブデザイン

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • レスポンシブデザインには Chakra UI のレイアウトコンポーネントを使用する
Chakra UI のセマンティック HTML レンダリング

コードをレビューまたは作成する際は、以下のガイドラインを適用します。

  • セマンティック HTML のレンダリングには 'as' prop を使用する
chakra ui テーマディレクトリのルール

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

  • theme/index.js を作成して、テーマをエクスポートします
  • テーマの基礎設定は theme/foundations/ に配置します
  • コンポーネント固有のテーマ上書きは theme/components/ に配置します
material ui の設定

コードをレビューまたは記述する際は、次のガイドラインに従ってください。

  • このプロジェクトでは Material UI を使用します。
使用例： ``` User: "Review this code for frontend best practices" Agent: [Analyzes code against consolidated guidelines and provides specific feedback] ```

統合されたスキル

このエキスパートスキルには、次の 2 つの個別スキルが統合されています。

  • frontend-expert
  • ui-components-expert

メモリプロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに見つかったパターンや例外を記録します。

中断されることを前提としてください。コンテキストがリセットされる場合があります。メモリに記録されていなければ、実行されていないものとみなします。

コメント

Markdown 対応