skills.rest
slantview
slantviewCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/slantview/claude --skill ui-ux-designer-slantview
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rafael-hcrafael-hc

frontend-blueprint

Guide UI discovery and generate atomic HTML/CSS components.

Community
Advanced
snake-dev-teamsnake-dev-team

ck:ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Official
Intermediate
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
aj-geddesaj-geddes
472

UX Designer

Design user flows and ASCII wireframes with WCAG 2.1 AA accessibility specifications.

Community
Basic