Frontend UI/UX Skill

Develop and refine React and Vue user interfaces with component-based architecture.

7|1|Updated Jan 10, 2026
One-click install
npx skills add https://github.com/stefandevo/oh-my-claude --skill frontend-ui-ux-skill
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Frontend UI/UX Skill
Source: https://github.com/stefandevo/oh-my-claude/tree/main/skills/frontend-ui-ux
Command: npx skills add https://github.com/stefandevo/oh-my-claude --skill frontend-ui-ux-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of visually appealing, user-friendly, and performant frontend interfaces, ensuring a high-quality user experience.

Core Features & Use Cases

  • Aesthetic Design: Creates modern, clean, and visually consistent user interfaces.
  • Intuitive UX: Focuses on clear interactions, feedback, and accessibility.
  • Component-Based Development: Implements reusable, type-safe UI components.
  • Use Case: Develop a responsive pricing table component with various states (hover, active, disabled) and smooth animations, adhering to a given design system.

Quick Start

Use the frontend UI/UX skill to create a React button component with primary and secondary variants.

Frequently Asked Questions about Frontend UI/UX Skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React component with multiple interactive states like hover and disabled?

To build a React component with multiple interactive states, you implement a component-based architecture using reusable, type-safe patterns. This approach manages visual design, interaction feedback, and accessibility requirements for each state variation.

What is the best way to create a responsive frontend UI that adheres to a design system?

The best way to create a responsive frontend UI is by developing modern, performant designs using reusable components. This ensures visual consistency and intuitive user experience while adhering to your specified design system constraints.

Can I use this approach to develop UI components for Vue as well as React?

Yes, you can develop UI components for Vue as well as React. The approach specializes in component-based architecture and reusable patterns that apply to both modern frameworks, ensuring type-safe implementations.

How do I ensure my frontend design meets accessibility and interaction requirements?

To ensure your frontend design meets accessibility and interaction requirements, you focus on clear interactions and feedback during component development. This addresses visual design and accessibility constraints directly within the component architecture.

Does this method support type-safe implementations for complex component variants?

Yes, this method supports type-safe implementations for complex component variants. It refines user interfaces using reusable patterns, ensuring that primary, secondary, and other component states maintain strict type safety.

When should I use component-based architecture for frontend user interfaces?

You should use component-based architecture for frontend user interfaces when you need to streamline the creation of visually appealing and performant designs. It ensures high-quality user experience through reusable, type-safe component patterns.