skills.rest
tarabakz25
tarabakz25COMMUNITY
Explore all skills by this author →
Website𝕏@kz25_kmcGitHub

ui-ux-designer

Design, implement, and review web and mobile UI with Tailwind CSS and React.

1|Updated Jul 2, 2026
Search Tags:#accessibility#react#responsive design#design tokens#tailwind css#ui design#ux
One-click install
npx skills add https://github.com/tarabakz25/my-skills --skill ui-ux-designer-tarabakz25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/tarabakz25/my-skills/tree/main/ui-ux-designer
Command: npx skills add https://github.com/tarabakz25/my-skills --skill ui-ux-designer-tarabakz25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent, accessible, and responsive interfaces requires juggling personas, information architecture, design tokens, component patterns, and WCAG compliance at once. This Skill provides a structured workflow from persona definition through implementation and self-review so UI work stays usable and consistent. ## Core Features & Use Cases - Persona-driven design workflow: Define personas, generate Mermaid sitemaps, and produce style guides before writing any component code. - Design tokens and component patterns: Apply default color, typography, and spacing tokens plus ready-made Tailwind patterns for buttons, forms, cards, modals, tables, and loading states. - Severity-ranked design reviews: Audit UI against a checklist covering WCAG 2.1 AA accessibility, responsive behavior at 375px, design system consistency, and performance, with Critical/Warning/Suggestion findings. - Use Case: When asked to build a new dashboard screen, the Skill walks through persona definition, sitemap validation (3-click rule), token-based Tailwind implementation with React 18 and Next.js App Router, then runs the review checklist before delivery. ## Quick Start Ask the agent to design and implement a responsive settings page using Tailwind CSS and React, following the persona-to-review workflow.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I design a new UI screen with Tailwind CSS and React?▼

Start by defining 1-2 personas and a Mermaid sitemap, then generate a style guide with project-specific colors and typography. Select component patterns, apply design tokens, implement with Tailwind and React, and finish with the self-review checklist.

How do I review a React UI for accessibility issues?▼

Run the review checklist covering WCAG 2.1 AA contrast ratios, keyboard operability, focus rings, semantic HTML, and ARIA labels. Findings are reported by severity: Critical items must be fixed, Warnings are recommended, and Suggestions are optional.

Should I use shadcn/ui or Radix UI with Tailwind components?▼

Prefer shadcn/ui and Radix UI when available because accessibility is built in, especially for modals and dialogs. The component patterns reference provides Tailwind implementations for buttons, forms, cards, and navigation that work alongside these libraries.

When should I not use this UI design workflow?▼

Avoid it for pure visual direction exploration, full design system audits, deep WCAG 2.2 audits, or E2E behavior testing. Those scenarios map to dedicated skills like frontend-design, design-system, accessibility, or browser-qa.

Why do Tailwind arbitrary values like text-[13px] cause problems?▼

Arbitrary values act as magic numbers that break design system consistency and token alignment. Use the defined type scale such as text-xs or text-sm, and reserve bracket syntax for cases no existing token can cover.

Related Skills

Explore More Design & Creative Skills→
deanpetersdeanpeters
6.4k

proto-persona

Generate an assumption-based proto-persona from user research, market data, and stakeholder knowledge.

Community
Basic
fysoul17fysoul17
4

devlyn:browser-validate

Launch a dev server and validate UI features through real browser interactions.

Community
Advanced
FabianrzsFabianrzs

accessibility

Identify and fix web accessibility gaps using WCAG 2.2 guidelines.

Community
Advanced
pedroapp100pedroapp100

frontend-design

Generate production-ready HTML, CSS, and React components for custom frontend designs.

Community
Advanced