mcpField
U
ui-components-expert

ui-components-expert

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

ui-components-expert について

Chakra UI と Material UI を扱う、開発者向けの UI コンポーネントコードのレビュー・改善スキルです。アクセシビリティ、レスポンシブデザイン、テーマ、コンポーネント構成、パフォーマンスの指針をまとめています。

主な機能

  1. 01Chakra UI のアクセシビリティ指針
  2. 02レスポンシブなレイアウトとスタイル
  3. 03テーマ構成とカスタマイズ
  4. 04コンポーネント構成とセマンティクス
  5. 05Material UI の設定指針

活用シーン

  1. 01UI コードのベストプラクティス確認
  2. 02レスポンシブなコンポーネントレイアウトの改善
  3. 03Chakra UI のテーマ整理
  4. 04コンポーネント構成のリファクタリング

インストール

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

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

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

同梱ファイル

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

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

詳細

UI コンポーネントのエキスパート

Chakra、Material UI、Mantine などの UI コンポーネントライブラリに関する深い知識を持つ、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' プロパティを使用する
Chakra UI のテーマディレクトリのルール

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

  • テーマをエクスポートする theme/index.js を作成する
  • テーマの基礎設定を theme/foundations/ に配置する
  • コンポーネント固有のテーマオーバーライドを theme/components/ に配置する
Material UI の設定

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

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

統合されたスキル

このエキスパートスキルは、以下の 9 つの個別スキルを統合したものです。

  • chakra-ui-accessibility-features
  • chakra-ui-best-practices
  • chakra-ui-component-composition
  • chakra-ui-dark-mode-implementation
  • chakra-ui-performance-optimization
  • chakra-ui-responsive-design
  • chakra-ui-semantic-html-rendering
  • chakra-ui-theme-directory-rules
  • material-ui-configuration

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

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに見つかったパターンや例外を記録してください。

中断を想定してください。コンテキストがリセットされる可能性があります。メモリに記録されていなければ、実行されていないことになります。

コメント

Markdown 対応