What spacing scale does this skill use?

It uses a strict 4px base scale (ranging from xs=4px to 5xl=96px) to eliminate arbitrary 'magic numbers' in your CSS and layouts.

What UI states does it help define?

It provides patterns for the full component lifecycle: default, hover, focus, active, disabled, loading (skeletons), error messages, and empty states.

Does this skill support accessibility?

Yes, it enforces specific WCAG contrast requirements (4.5:1 for normal text) and ensures motion patterns respect 'prefers-reduced-motion' settings.

Can I use this with Tailwind CSS?

Absolutely; the skill is specifically designed to assist when editing Tailwind configurations, design tokens, and UI primitives.

UI/UX Design Systems

Name: UI/UX Design Systems
Author: surfertas

bysurfertas

0•

Design Tools

Standardizes frontend interfaces using a robust design system of spacing scales, semantic tokens, and accessibility patterns.

This skill provides Claude with a comprehensive framework for implementing consistent, production-grade UI/UX designs within any frontend project. It eliminates 'magic numbers' by enforcing a 4px-base spacing scale and a strict typography system, while ensuring high-quality user experiences through defined component states, responsive breakpoints, and hierarchical z-index management. By utilizing semantic color tokens and WCAG contrast requirements, it helps developers build accessible, themed, and motion-optimized interfaces that follow industry best practices for CSS Modules, Tailwind CSS, and styled-components.

Key Features

010 GitHub stars

02WCAG contrast compliance and motion accessibility guidelines

03Semantic color token system to replace hardcoded hex primitives

04Standardized 4px-base spacing scale for layout consistency

05Comprehensive component state management including loading and error patterns

06Mobile-first responsive breakpoints and structured z-index scale

Use Cases

01Building accessible, responsive UI primitives and styled components

02Refactoring inconsistent CSS modules into a unified design system

03Defining design tokens and Tailwind CSS configurations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add surfertas/claude-react-rtk uiux-design

For use in Claude.ai and ChatGPT

Download Skill