mcpField
F
frontend-ui-ux

frontend-ui-ux

github.com/yeachan-heoDesign & UI40.4k66 installsUpdated 1d ago
Repository

About frontend-ui-ux

A frontend UI/UX skill for Claude workflows that routes design tasks to Gemini MCP or a Claude designer agent. It covers component implementation, responsive layouts, design consistency, and accessibility.

Key features

  1. 01Routes frontend tasks to a designer
  2. 02Gemini MCP and Claude agent fallback
  3. 03Component design and implementation
  4. 04Responsive layout support
  5. 05Design consistency and accessibility

Use cases

  1. 01Designing and implementing UI components
  2. 02Adapting layouts for different screen sizes
  3. 03Checking design-system consistency
  4. 04Addressing accessibility requirements

MCP support

For design tasks, it uses `mcp__g__ask_gemini` with the designer role after discovering MCP tools; if none are found, it routes to a Claude designer agent.

Install

Copy the command and run it in a terminal.

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

After installing, type/frontend-ui-uxin Claude Code to confirm it loaded.

Details

From the project README

Frontend UI/UX Command

Routes to the designer agent or Gemini MCP for frontend work.

Usage

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

Routing

Preferred: MCP Direct

Before first MCP tool use, call ToolSearch("mcp") to discover deferred MCP tools. Use mcp__g__ask_gemini with agent_role: "designer" for design tasks. If ToolSearch finds no MCP tools, use the Claude agent fallback below.

Fallback: Claude Agent
Task(subagent_type="oh-my-claudecode:designer", model="sonnet", prompt="{{ARGUMENTS}}")

Capabilities

  • Component design and implementation
  • Responsive layouts
  • Design system consistency
  • Accessibility compliance

Task: {{ARGUMENTS}}

Comments

Markdown supported