skills.rest
thesaifalitai
thesaifalitaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

uiux-design

Convert design concepts into accessible, responsive Tailwind CSS components.

8|1|Updated Feb 27, 2026
Search Tags:#ui#accessibility#frontend#components#storybook#tailwind#design-systems
One-click install
npx skills add https://github.com/thesaifalitai/claude-setup --skill uiux-design-thesaifalitai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-design
Source: https://github.com/thesaifalitai/claude-setup/tree/main/skills/uiux-design
Command: npx skills add https://github.com/thesaifalitai/claude-setup --skill uiux-design-thesaifalitai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps frontend developers translate design concepts into production-ready UI components with consistent design tokens, accessibility, and responsive behavior.

Core Features & Use Cases

  • Tailwind-based component patterns with design tokens to ensure visual consistency across projects.
  • Accessibility and ARIA-compliant components with proper focus management and keyboard navigation.
  • Support for dark mode, responsive layouts, animations, and Storybook-ready component stories.

Quick Start

Provide a UI component concept and I will generate a production-ready Tailwind-based implementation with accessibility features.

Frequently Asked Questions about uiux-design

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

FAQPage Schema
How do I convert Figma designs into production-ready Tailwind components?▼

To convert Figma designs into production-ready Tailwind components, you provide a UI component concept to generate an implementation with consistent design tokens, responsive behavior, and accessible patterns.

Can I generate components with ARIA attributes and keyboard navigation?▼

Yes, you can generate components with ARIA attributes and keyboard navigation. The skill creates accessibility-compliant components with proper focus management to ensure frontend UI is usable.

How do I build a responsive UI with dark mode and design tokens?▼

You build a responsive UI with dark mode by applying Tailwind-based component patterns with design tokens. This ensures visual consistency across projects while supporting dark mode and responsive layouts.

Does this skill support creating Storybook stories for UI components?▼

Yes, this skill supports creating Storybook stories for UI components. It generates Storybook-ready component stories alongside the production-ready Tailwind CSS implementation and animation guidelines.

What is the best way to implement accessible frontend components from design specs?▼

The best way to implement accessible frontend components from design specs is to translate design concepts using defined constraints for ARIA attributes, focus management, breakpoints, and animation guidelines.

Do I need to define design tokens before generating UI components?▼

Yes, you need to define design tokens before generating UI components. The skill uses constraints for design tokens, breakpoints, and ARIA attributes defined in the frontmatter and body to ensure visual consistency.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
VictorSmaniottoVictorSmaniotto

tailwind-expert

Automate Tailwind CSS styling for Laravel Blade projects.

Community
Advanced
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate
Arbab1308Arbab1308

tailwind-patterns

Standardize Tailwind CSS v4 patterns with CSS-first architecture and design tokens.

Community
Advanced