skills.rest
zzafergok
zzafergokCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

premium-ui-ux-designer

Consolidate frontend design decisions and design-system governance into an authoritative reference.

1|1|Updated Mar 22, 2026
Search Tags:#accessibility#tailwind#ui-design#ux#design-system#responsive-design
One-click install
npx skills add https://github.com/zzafergok/skills --skill premium-ui-ux-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: premium-ui-ux-designer
Source: https://github.com/zzafergok/skills/tree/main/04-frontend-development/premium-ui-ux-designer
Command: npx skills add https://github.com/zzafergok/skills --skill premium-ui-ux-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates frontend design decisions, design system governance, and implementation practices into a single authoritative reference to reduce decision fatigue and ensure consistency across the platform.

Core Features & Use Cases

  • Establish design-system governance and token strategy (Tailwind tokens, semantic tokens, component patterns) for scalable frontend work.
  • Guide accessibility, responsive design, animation, and UX writing to ensure cohesive user experiences across web platforms.
  • Provide immediate design and implementation guidance for new components, reviews, and audits, including Tailwind usage, CVA patterns, and Radix UI integration.

Quick Start

Create a new UI component using the design-system rules: define tokens, structure components with CVA variants, ensure accessibility, and document decisions in the component's story.

Frequently Asked Questions about premium-ui-ux-designer

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

FAQPage Schema
How do I scale consistent frontend design across a corporate web platform?▼

To scale consistent frontend design, consolidate design decisions and system governance into an authoritative reference. This ensures consistent Tailwind token usage, component patterns, and accessibility standards across interfaces.

What is the best way to manage design tokens using Tailwind for UI components?▼

Manage Tailwind design tokens by establishing a governance strategy that defines semantic tokens and component patterns. This approach reduces decision fatigue and ensures scalable, consistent UI implementation.

How do I structure a new UI component with CVA variants and Radix UI?▼

Structure new UI components by defining design tokens, building CVA-based variant architectures, and integrating Radix UI. This provides immediate guidance for component structure, accessibility, and implementation.

Does this design system governance approach ensure WCAG AA accessibility standards?▼

Yes, the design system governance approach ensures WCAG AA accessibility standards. It guides accessibility, responsive design, and animation across web platforms to maintain cohesive user experiences.

Can I use these component pattern guidelines for responsive design and UX writing?▼

Yes, you can use these component pattern guidelines for responsive design and UX writing. The governance strategy provides rules for cohesive user experiences across modern corporate web platforms.

Related Skills

Explore More Design & Creative Skills→
oalansilvaoalansilva

tailwind-patterns

Apply Tailwind v4 CSS-first patterns with container queries and design tokens.

Community
Advanced
pohlai88pohlai88

radix-ui-design-system

Builds accessible React components with Tailwind CVA or Stitches theming.

Community
Advanced
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
vibbsvibbs
6

design-system

Generate design tokens and UX guidance from selected archetypes.

Community
Advanced