ui-ux-designer

Design user interfaces and convert them into React components with CSS custom properties.

1|1|Updated Aug 5, 2025

Search Tags:#accessibility #react #design system #ui/ux #prototyping #frontend development

Ready to run

npx skills add https://github.com/slantview/claude --skill ui-ux-designer-slantview

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/slantview/claude/tree/main/skills/ui-ux-designer
Command: npx skills add https://github.com/slantview/claude --skill ui-ux-designer-slantview

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that are not only visually appealing but also highly functional, accessible, and aligned with user needs and business goals.

Core Features & Use Cases

User-Centric Design: Conducts user research, develops personas, and maps user journeys to ensure designs meet user needs.
Interface & Prototyping: Creates modern, responsive UI designs and interactive prototypes.
Frontend Implementation: Translates designs into clean, performant HTML, CSS, and JavaScript (React).
Accessibility: Implements WCAG standards, keyboard navigation, and ARIA for inclusive experiences.
Use Case: Design and implement a new dashboard interface for a project management tool, ensuring it's intuitive for project managers and accessible to all users.

Quick Start

Use the ui-ux-designer skill to create a responsive dashboard card component in React.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema

How do I convert UI designs into functional React components?▼

To build accessible user interfaces, implement WCAG standards, keyboard navigation, and ARIA attributes. This ensures inclusive experiences and cross-platform consistency for all users interacting with your design system or frontend application.

What is the best way to create a design system for modern frontend development?▼

To build interactive UI prototypes, map user journeys and translate them into responsive layouts with animation libraries. This allows you to validate user experience flows and information architecture before final frontend implementation.

Can I use this approach to design a responsive dashboard interface?▼

Yes, you can design responsive dashboard interfaces by creating modern UI layouts tailored to user needs. Developing a dashboard card component in React ensures the interface is intuitive for project managers and accessible to all users.

Does this method support WCAG standards and keyboard navigation for accessibility?▼

Yes, this method fully supports WCAG standards and keyboard navigation for accessibility. It integrates ARIA attributes and inclusive design practices directly into the frontend implementation to ensure cross-platform accessibility compliance.