skills.rest
MUmerRazzaq
MUmerRazzaqCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Design accessible React and Tailwind CSS web interfaces with reusable components.

1|Updated Dec 13, 2025
Search Tags:#ui#accessibility#react#component#responsive#tailwind#ux
One-click install
npx skills add https://github.com/MUmerRazzaq/fast-next-todo --skill ui-ux-designer-mumerrazzaq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/MUmerRazzaq/fast-next-todo/tree/main/.claude/skills/ui-ux-designer
Command: npx skills add https://github.com/MUmerRazzaq/fast-next-todo --skill ui-ux-designer-mumerrazzaq

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It simplifies the process of designing and implementing high-quality, accessible, and visually appealing web interfaces, reducing the time and effort required to achieve professional standards.

Core Features & Use Cases

  • Design System Integration: Utilize predefined color palettes, typography, and spacing guidelines to ensure consistency.
  • Component Creation & Customization: Build reusable React components following best practices for accessibility and responsiveness.
  • Responsive Layouts: Develop layouts that adapt seamlessly to different screen sizes, employing CSS grid and Flexbox techniques.
  • Accessibility Compliance: Ensure web interfaces meet WCAG 2.1 AA standards, including semantic HTML and ARIA roles.
  • Design Collaboration: Use references and assets for design tokens, style guides, and UI patterns to streamline teamwork.

Quick Start

Import component templates from assets/components and customize them to match your brand's style and interaction requirements.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I build accessible React components that meet WCAG standards?▼

To build accessible React components, you need semantic HTML and ARIA roles to meet WCAG 2.1 AA standards. This Skill provides component templates and guidelines focusing on accessibility compliance and responsive design.

What is the best way to create a consistent design system for web interfaces?▼

A consistent design system uses predefined color palettes, typography, and spacing guidelines. This Skill includes design tokens, style guides, and UI pattern references to streamline team collaboration and ensure visual consistency.

Can I use Tailwind CSS to develop responsive layouts with this approach?▼

Yes, Tailwind CSS is used to develop responsive layouts. The approach employs CSS grid and Flexbox techniques to ensure interfaces adapt seamlessly to different screen sizes across projects.

How do I customize reusable web UI components for my brand?▼

You can customize reusable web UI components by importing templates from the assets directory. Tailor these predefined React components to match your brand's specific style and interaction requirements.

Does this workflow require any external dependencies to start building user interfaces?▼

No external dependencies are required to start building user interfaces. The Skill operates independently using modern React, Tailwind CSS, and built-in assets to deliver high-quality front-end solutions.

Related Skills

Explore More Personal & Entrepreneur Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
HsienWHsienW
63

frontend-ui-engineering

Develop React and TypeScript UI components with responsive layouts and state management.

Community
Advanced
ingpocingpoc
9

theme-factory

Apply predefined color palettes and typography from themes/*.md to slides, docs, and landing pages.

Community
Intermediate
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate