skills.rest
Yoriichi-Dang
Yoriichi-DangCOMMUNITY
Explore all skills by this author →
GitHub

react-uiux-design-first

Inspect React components and implement UI elements following design-first guidelines with accessibility checks.

Updated Dec 26, 2025
Search Tags:#performance#accessibility#React#UI/UX#micro-interactions#design-first
One-click install
npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill react-uiux-design-first
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-uiux-design-first
Source: https://github.com/Yoriichi-Dang/dashboard_web_template/tree/main/.cursor/skills/react-uiux-design-first
Command: npx skills add https://github.com/Yoriichi-Dang/dashboard_web_template --skill react-uiux-design-first

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a design-first approach to building React user interfaces, prioritizing UX clarity, visual rhythm, accessibility, micro-interactions, loading states, and performance to reduce polish gaps during development.

Core Features & Use Cases

  • Design-first methodology for React components and UI systems.
  • Ensures consistent spacing, accessible controls, and polished interactions across apps.
  • Use Case: develop a reusable button component library with clear focus, keyboard navigation, and responsive behavior at scale.

Quick Start

Inspect an existing component and implement a new UI element following the design-first guidelines: define UX goals, apply 8px spacing, add accessible labels and focus states, and review with a designer checklist.

Frequently Asked Questions about react-uiux-design-first

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

FAQPage Schema
How do I standardize React UI design quality across a component library?▼

Standardize React UI design quality by applying a design-first methodology that enforces consistent spacing rhythm, accessible controls, and polished micro-interactions across your component library.

What is a design-first approach for React components?▼

A design-first approach for React components prioritizes UX clarity, visual rhythm, accessibility, and micro-interactions early in development to reduce polish gaps in your application.

How do I add micro-interactions and accessibility checks to a React dashboard?▼

Add micro-interactions and accessibility checks to a React dashboard by applying design-first guidelines that enforce focus states, keyboard navigation, and accessible labels for UI elements.

Does this design-first React methodology work for building reusable button components?▼

Yes, the design-first React methodology works for reusable button components by defining clear UX goals, applying 8px spacing, and ensuring responsive behavior and keyboard navigation at scale.

How do I review an existing React component for UI polish and performance?▼

Review an existing React component for UI polish and performance by inspecting it against a designer checklist that evaluates loading states, accessible controls, and visual rhythm.

Why does my React app have inconsistent spacing and UI polish gaps?▼

React apps have inconsistent spacing and UI polish gaps without design-first guidelines that standardize spacing rhythm, accessible controls, and high-performance UI patterns across dashboards and apps.

Related Skills

Explore More Design & Creative Skills→
sanky369sanky369
29

component-architecture

Design reusable React TypeScript Tailwind components with Atomic Design.

Community
Basic
ncsound919ncsound919

frontend-design

Design frontend interfaces and components for React or HTML/CSS.

Community
Advanced
bovinphangbovinphang
21

fec-component-testing

Write and audit UI component tests for props, emits, interactions, and accessibility.

Community
Advanced
rattamnoonrattamnoon

layout

Assess and improve layout spacing and visual rhythm across web interfaces.

Community
Advanced