mcpField
F
frontend-ui-ux

frontend-ui-ux

github.com/yeachan-heoデザイン・UI40.4k66 回インストール1 日前に更新
リポジトリ

frontend-ui-ux について

Claude のワークフロー向けフロントエンド UI/UX スキルです。デザイン作業を Gemini MCP に振り分け、利用できない場合は Claude のデザイナーエージェントに切り替えます。

主な機能

  1. 01フロントエンド作業をデザイナーへ振り分け
  2. 02Gemini MCP と Claude エージェントのフォールバック
  3. 03コンポーネントの設計と実装
  4. 04レスポンシブレイアウトへの対応
  5. 05デザインの一貫性とアクセシビリティ

活用シーン

  1. 01UI コンポーネントの設計と実装
  2. 02画面サイズに応じたレイアウト調整
  3. 03デザインシステムの一貫性確認
  4. 04アクセシビリティ要件への対応

MCP 対応

デザイン作業では MCP ツールを検出した後、デザイナー役で `mcp__g__ask_gemini` を呼び出します。MCP ツールが見つからない場合は Claude のデザイナーエージェントを使います。

インストール

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

$npx skills add https://github.com/yeachan-heo/oh-my-claudecode --skill frontend-ui-ux

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

詳細

フロントエンド UI/UX コマンド

フロントエンドの作業をデザイナーエージェントまたはGemini MCPにルーティングします。

使用方法

/oh-my-claudecode:frontend-ui-ux <design task>

ルーティング

推奨：MCP 直接利用

MCP ツールを初めて使用する前に、ToolSearch("mcp") を呼び出して、遅延読み込みされたMCP ツールを検出します。 デザインタスクには、agent_role: "designer" を指定して mcp__g__ask_gemini を使用します。 ToolSearchでMCPツールが見つからない場合は、以下のClaudeエージェントのフォールバックを使用します。

フォールバック：Claudeエージェント
Task(subagent_type="oh-my-claudecode:designer", model="sonnet", prompt="{{ARGUMENTS}}")

対応内容

  • コンポーネントのデザインと実装
  • レスポンシブレイアウト
  • デザインシステムの一貫性
  • アクセシビリティへの準拠

タスク：{{ARGUMENTS}}

コメント

Markdown 対応