ui-design

Enforce cohesive UI design standards across React and Tailwind components.

Updated Feb 8, 2026

Search Tags:#ui #accessibility #react #components #tailwind #ux #design-system

Ready to run

npx skills add https://github.com/gunning4it/openorder --skill ui-design-gunning4it

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/gunning4it/openorder/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/gunning4it/openorder --skill ui-design-gunning4it

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often implement UI components without a unified system, leading to inconsistent interfaces and higher maintenance costs. This skill enforces a cohesive design system with Base 8 spacing, semantic color usage, and accessible interactive states across React + Tailwind UIs.

Core Features & Use Cases

Enforce an 8-point spacing system and a standardized Tailwind mapping across components.
Ensure semantic color usage and WCAG-compliant contrast for accessibility.
Review and refactor UI implementations for new components, layouts, and existing code to uphold the OpenOrder design language.

Quick Start

Review a component and apply the base 8 spacing, semantic color tokens, and accessible interaction states to align with the design system.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I enforce consistent UI spacing and accessibility in React and Tailwind components?▼

To enforce consistent UI spacing and accessibility in React and Tailwind components, apply an 8-point spacing system, semantic color tokens, and WCAG-compliant contrast rules. This ensures cohesive design standards and accessible interactive focus states across your component library.

What is an 8-point spacing system and how does it standardize Tailwind UI components?▼

An 8-point spacing system standardizes Tailwind UI components by enforcing base-8 spacing increments across layouts. This creates a predictable visual rhythm, reducing design inconsistencies and lowering maintenance costs when building or refactoring React user interfaces.

How do I refactor existing React code to meet design system standards?▼

To refactor existing React code to meet design system standards, review your layouts and replace arbitrary values with standardized Tailwind mappings. Apply semantic color usage and accessible interaction states to align the code with the design language.

Does this UI design skill check WCAG color contrast and semantic color usage?▼

Yes, this UI design skill checks WCAG color contrast and semantic color usage. It reviews your React components to ensure that color tokens are applied semantically and meet accessibility requirements for compliant interactive states.

Can I use this to review responsive behavior and focus states for new UI elements?▼

Yes, you can use this to review responsive behavior and focus states for new UI elements. It evaluates newly created React and Tailwind components to ensure they satisfy spacing rules, typography, and accessibility focus state requirements.

Why does my Tailwind UI component lack cohesive design across different layouts?▼

Your Tailwind UI component lacks cohesive design across different layouts if it is implemented without a unified design system. Applying standardized spacing rules, semantic color tokens, and accessible interactive states resolves these inconsistencies.