skills.rest
marcioaltoe
marcioaltoeCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

14|1|Updated Oct 23, 2025
Search Tags:#accessibility#React#frontend#responsive design#shadcn/ui#Tailwind CSS#UI/UX design
One-click install
npx skills add https://github.com/marcioaltoe/claude-craftkit --skill ui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/marcioaltoe/claude-craftkit/tree/main/plugins/ui/skills/ui-designer
Command: npx skills add https://github.com/marcioaltoe/claude-craftkit --skill ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation of modern, responsive, and accessible user interfaces in React. It automates the application of best practices for shadcn/ui, Tailwind CSS, and accessibility, reducing development time and design inconsistencies.

Core Features & Use Cases

  • Component Generation: Builds custom UI components using shadcn/ui and Tailwind CSS, ensuring responsiveness and dark mode support.
  • Accessibility First: Implements WCAG 2.1 AA compliance with proper ARIA attributes and keyboard navigation.
  • Design System Adherence: Guides on consistent design tokens, typography, and spacing for scalable UIs.
  • Use Case: "Create a responsive navigation bar with dark mode support, using shadcn/ui components and Tailwind CSS, ensuring it's accessible."

Quick Start

Design a responsive card component with a title, description, and a primary button, ensuring dark mode compatibility.

Frequently Asked Questions about ui-designer

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?▼

Accessible React components combine shadcn/ui pre-built elements with Tailwind CSS styling and WCAG 2.1 AA compliance through proper ARIA attributes, semantic HTML, and keyboard navigation. This approach ensures components work across assistive technologies and input methods.

Can I create responsive layouts that work on mobile and desktop with dark mode support?▼

Yes. Responsive layouts use Tailwind CSS's mobile-first breakpoints and design tokens to adapt across screen sizes, while dark mode toggling applies alternate color schemes seamlessly. Both features integrate within shadcn/ui's component architecture.

What's the best way to design a consistent UI system across React applications?▼

Design-token-based styling with shadcn/ui and Tailwind CSS establishes consistent typography, spacing, and colors across components. This system reduces inconsistencies and scales across multiple pages and dashboards while maintaining WCAG compliance.

How do I ensure forms, cards, and navigation meet accessibility standards?▼

Use shadcn/ui components as a foundation and layer Tailwind CSS styling while implementing WCAG 2.1 AA requirements: semantic form labels, ARIA roles, keyboard focus management, and color contrast. This satisfies both functional and technical accessibility requirements.

Does shadcn/ui work with TypeScript for type-safe component props?▼

Yes. shadcn/ui components are built with TypeScript support, allowing strongly-typed props and better IDE integration. Tailwind CSS pairs seamlessly for styling without compromising type safety.

What performance optimizations should I apply to React UI components?▼

Performance optimization includes lazy-loading components, minimizing Tailwind CSS bundle size through purging unused styles, and leveraging shadcn/ui's pre-optimized elements. This maintains responsive behavior across mobile-to-desktop scenarios.

Related Skills

Explore More Design & Creative Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
dylantarredylantarre
38

react

Create token-driven React components with TypeScript and ARIA compliance.

Community
Intermediate
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate
afonsolelisafonsolelis

bootstrap-guidelines

Enforce Bootstrap 5.3.0 conventions and prohibit custom CSS in HTML.

Community
Basic