skills.rest
0xkynz
0xkynzCOMMUNITY
Explore all skills by this author →
GitHub

uiux-design-expert

Generate design tokens, components, and style guidelines for accessible UI across frameworks.

Updated Dec 22, 2025
Search Tags:#accessibility#css#responsive#tokens#ui-ux#design-system#design-guidelines
One-click install
npx skills add https://github.com/0xkynz/codekit --skill uiux-design-expert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-design-expert
Source: https://github.com/0xkynz/codekit/tree/main/templates/skills/uiux-design-expert
Command: npx skills add https://github.com/0xkynz/codekit --skill uiux-design-expert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX design teams often struggle to create cohesive, accessible interfaces across web, mobile, and product dashboards, leading to inconsistent visuals and degraded usability.

Core Features & Use Cases

  • Design System Creation: standardizes tokens, components, typography, color palettes, and accessibility rules to enable consistent UI across platforms.
  • Visual Style Implementation: translates brand aesthetics into responsive, accessible UI patterns across frameworks (Tailwind, CSS Modules, styled-components).
  • Accessibility & Performance Guidance: embeds WCAG-compliant patterns and performance-conscious CSS to ensure inclusive experiences.

Quick Start

Describe a complete UI design system for a web app that ensures accessibility, responsive behavior, and cross-framework compatibility.

Frequently Asked Questions about uiux-design-expert

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

FAQPage Schema
How do I create a UI design system that ensures accessibility and cross-framework compatibility?▼

Generate a comprehensive UI design system by standardizing tokens, components, and color palettes, which enforces WCAG accessibility rules and ensures cross-framework compatibility across web, mobile, and dashboard platforms.

What's the best way to translate brand aesthetics into responsive and accessible UI patterns?▼

Translate brand aesthetics into accessible UI by embedding WCAG-compliant patterns and performance-conscious CSS, generating standardized style guidelines that ensure responsive behavior across frameworks like Tailwind, CSS Modules, and styled-components.

Does this design system approach work with CSS frameworks like Tailwind and styled-components?▼

Yes, the design system approach works with CSS frameworks like Tailwind, CSS Modules, and styled-components, translating visual styles into responsive, accessible UI patterns while enforcing cross-framework compatibility.

Can I generate design tokens and components for both web and mobile platforms?▼

Yes, you can generate design tokens and components for web, mobile, and product dashboards, applying standardized design system criteria and accessibility rules to ensure cohesive, accessible interfaces across multiple platforms.

Why does my UI design lack visual consistency across different product dashboards?▼

Your UI design lacks visual consistency across product dashboards due to missing standardized design tokens, unenforced accessibility standards, and fragmented style guidelines, leading to inconsistent visuals and degraded usability across web and mobile platforms.

Related Skills

Explore More Design & Creative Skills→
JaylaelikeJaylaelike

premium-ui-systems

Codify design tokens for spacing, radii, color, and typography into reusable UI guidelines.

Community
Advanced
istinataFTSistinataFTS
2

ckm:ui-styling

Build accessible React UIs with Radix UI, Tailwind CSS, and canvas-based design.

Community
Advanced
TheGreatLTheGreatL

ui-visual-validator

Validate UI modifications for visual regressions, design compliance, and accessibility.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate