home / skills / yeachan-heo / oh-my-claudecode / frontend-ui-ux

frontend-ui-ux skill

safe

This skill helps you design and implement responsive, accessible frontend UI/UX components with design system consistency across projects.

npx playbooks add skill yeachan-heo/oh-my-claudecode --skill frontend-ui-ux

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

774 B

---
name: frontend-ui-ux
description: Designer-developer for UI/UX work
---

# 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}}

Overview

This skill connects UI/UX design expertise with frontend implementation to deliver accessible, responsive, and consistent user interfaces. It routes design requests to a designer-focused multi-capability processor (MCP) or a Claude-based designer agent as a fallback. The result is actionable component designs, implementation-ready specs, and accessibility guidance.

How this skill works

When given a design task, the skill first discovers available MCP tools and calls the Gemini MCP designer tool for direct, specialist handling. If no MCP is available, it falls back to invoking a Claude designer agent configured for frontend design tasks. Outputs include component sketches, layout recommendations, code-ready patterns, and accessibility checks.

When to use it

Design new UI components that must match an existing design system.
Convert UX concepts into implementation-ready component specs or snippets.
Audit layouts for responsiveness and accessibility compliance.
Iterate on visual details and interaction states before development.
Produce handoff artifacts for engineering (props, variants, breakpoints).

Best practices

Provide context: include current design system tokens, target breakpoints, and example screens.
Specify constraints: platform (web/mobile), frameworks, and accessibility standards required.
Request concrete deliverables: component props, CSS/utility classes, or Figma-ready descriptions.
Ask for progressive enhancement and keyboard/motion accessibility checks.
Validate outputs with a quick prototype or unit tests for visual regressions.

Example use cases

Design a responsive card component with image, title, metadata, and action states, plus CSS and ARIA guidance.
Refine a checkout form for clarity and keyboard navigation, with error states and validation patterns.
Create a small design system page that documents tokens, spacing scale, typography, and component variants.
Audit a dashboard layout for tablet and mobile breakpoints and propose prioritized fixes.
Translate a Figma mock into a set of React/TypeScript components with props, examples, and accessibility notes.

FAQ

What happens if the MCP tool is not available?

The skill automatically falls back to the designated Claude designer agent to handle the request.

What deliverables can I expect?

You can get component specs, markup/CSS suggestions, responsiveness rules, ARIA/accessibility notes, and handoff-ready descriptions.