ui-ux-expert-skill

Name: ui-ux-expert-skill
Availability: InStock
Author: fercracix33

Automate React component UI implementation with shadcn/ui, Tailwind CSS, and TanStack Query.

Updated Sep 29, 2025

Search Tags:#accessibility #React #responsive design #shadcn/ui #TanStack Query #UI implementation #form validation

Ready to run

npx skills add https://github.com/fercracix33/poli2-clean-architecture --skill ui-ux-expert-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-expert-skill
Source: https://github.com/fercracix33/poli2-clean-architecture/tree/main/.claude/skills/ui-ux-expert-skill
Command: npx skills add https://github.com/fercracix33/poli2-clean-architecture --skill ui-ux-expert-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill eliminates the guesswork in implementing production-ready React user interfaces that meet strict quality standards.

Core Features & Use Cases

6-Phase Workflow: From Style Guide study to Chrome DevTools validation.
Accessibility Compliance: Ensures WCAG 2.1 AA standards and Core Web Vitals optimization.
Use Case: When you need to implement a new feature UI, this Skill provides the complete technical workflow to create components that pass 100% of E2E tests without modification.
Real Example: Create a task management interface with React, shadcn/ui, and TanStack Query integration.

Quick Start

Use the ui-ux-expert-skill to implement the user interface for the new 'projects' feature.

Quick Start

Use the ui-ux-expert-skill to build the projects page with create, edit, and delete functionality.

Frequently Asked Questions about ui-ux-expert-skill

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

FAQPage Schema

How do I build accessible React components that pass WCAG 2.1 AA standards?▼

Build accessible React components using shadcn/ui with built-in accessibility patterns, semantic HTML, and ARIA attributes. This Skill automates the workflow to ensure WCAG 2.1 AA compliance through style guide conformance, component research, and Chrome DevTools validation across all phases of implementation.

Can I use shadcn/ui with TanStack Query for form validation and data fetching?▼

Yes. This Skill integrates shadcn/ui components with TanStack Query for data fetching and implements form validation across your React UI. The workflow covers component architecture, validation setup, and E2E testing to ensure performant, validated interfaces that pass all tests.

What's the best way to implement a responsive React UI that meets Core Web Vitals targets?▼

Implement responsive design using Tailwind CSS within shadcn/ui components, following a 6-phase workflow from style guide study through Chrome DevTools validation. This Skill automates the end-to-end process to achieve Core Web Vitals compliance and production-ready UI without modification.

How do I ensure my React components pass E2E tests without manual fixes?▼

Use this Skill's 6-phase workflow to design, implement, and validate React components with Playwright E2E tests and Chrome DevTools MCP integration. The systematic approach covers style guide conformance, accessibility checks, and iteration artifacts to deliver components that pass 100% of tests on first implementation.

Do I need to know shadcn/ui and Tailwind CSS before building production React UIs?▼

This Skill guides you through the complete UI implementation workflow using shadcn/ui and Tailwind CSS as core tools. It covers design architecture, component research, and validation, making it suitable for teams building production-ready React interfaces with strict quality and accessibility requirements.

What's included in the UI implementation workflow for React feature pages?▼

The 6-phase workflow covers style guide study, component research, design architecture, implementation with shadcn/ui and TanStack Query, validation via Playwright and Chrome DevTools, and documentation. Each phase ensures style-guide conformance, WCAG 2.1 AA accessibility, Core Web Vitals optimization, and iteration artifacts.