skills.rest
jawwad-ali
jawwad-aliCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-engineering

Create accessible, mobile-first React components using Tailwind CSS and Shadcn/UI patterns.

4|2|Updated Jan 17, 2026
Search Tags:#ui#accessibility#frontend#react#tailwind#shadcn-ui#ux-patterns
One-click install
npx skills add https://github.com/jawwad-ali/claude-code-skills --skill ui-ux-engineering-jawwad-ali
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-engineering
Source: https://github.com/jawwad-ali/claude-code-skills/tree/main/.claude/skills/ui-ux-engineering
Command: npx skills add https://github.com/jawwad-ali/claude-code-skills --skill ui-ux-engineering-jawwad-ali

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures Claude builds production-grade UI components by enforcing a Tailwind CSS + Shadcn/UI-based workflow, preventing missing states, accessibility gaps, and inconsistent responsive behavior.

Core Features & Use Cases

  • Shadcn/UI First Rule: check for existing pre-built components before coding from scratch, and use imports like Button, Dialog, DropdownMenu, Input, Select, Table, Tabs, and more to ensure accessibility and consistency.
  • Mobile-first, accessible UI patterns: guidance on focus states, color contrast, and keyboard navigation, with a consistent visual language using CSS variables.
  • Design polish and consistency: guidance on states, transitions, shadows, spacing, and dark-mode compatibility to deliver production-quality interfaces.

Quick Start

Begin every UI component by checking Shadcn/UI coverage, then implement a production-grade, accessible, mobile-first component using Tailwind utilities.

Frequently Asked Questions about ui-ux-engineering

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

FAQPage Schema
How do I build accessible React components with Tailwind CSS and Shadcn/UI?▼

Building accessible React components with Tailwind CSS and Shadcn/UI requires checking pre-built Shadcn/UI components before coding to enforce focus states, keyboard navigation, and responsive mobile-first behavior.

What is the best way to ensure consistent design polish across frontend components?▼

Ensuring consistent design polish across frontend components involves applying standardized UX patterns for transitions, shadows, spacing, and dark-mode compatibility using CSS variables for a consistent visual language.

Can I use Shadcn/UI components for dashboards and interactive widgets?▼

Yes, you can use Shadcn/UI components for dashboards and interactive widgets by importing pre-built elements like Buttons, Dialogs, DropdownMenus, and Tables to ensure accessibility and consistency.

Why does my frontend UI have missing states and accessibility gaps?▼

Frontend UI has missing states and accessibility gaps when components are coded from scratch without a standardized workflow. Enforcing a Tailwind CSS and Shadcn/UI pattern approach prevents these inconsistencies and ensures production-grade quality.

Does this approach enforce mobile-first responsive behavior for forms and layouts?▼

Yes, this approach enforces mobile-first responsive behavior for forms and layouts by imposing a mobile-first design workflow that guarantees correct component imports, accessible interactions, and responsive behavior.

Related Skills

Explore More Design & Creative Skills→
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced
saranskumarsaranskumar

react-component-generator

Generate React components with explicit props, state hooks, and accessible Tailwind markup.

Community
Intermediate
jubalmjubalm
1

shadcn/ui Advanced Patterns

Automate advanced shadcn/ui integration patterns for forms, tables, and modals.

Community
Advanced
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced