skills.rest
fercracix33
fercracix33COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-expert-skill

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
One-click install
npx skills add https://github.com/fercracix33/poli2-clean-architecture --skill ui-ux-expert-skill
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
robwestzrobwestz

showcase-presenter

Generate project showcases from build artifacts and SKILL.md files with Markdown and Mermaid diagrams.

Community
Advanced
MesferAliMesferAli

frontend-react

Develop React, TypeScript, and Next.js applications with state management and testing.

Community
Advanced
lengo0951lengo0951

ui-styling

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

Community
Advanced