Enforce cohesive UI design standards across React and Tailwind components.
npx skills add https://github.com/gunning4it/openorder --skill ui-design-gunning4it
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
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.
Review a component and apply the base 8 spacing, semantic color tokens, and accessible interaction states to align with the design system.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
DevattomCreate responsive interfaces with shadcn/ui components and Tailwind CSS.
Higashi-KotaBuild accessible React UI components with design tokens and ARIA patterns.
distribucionesfayosmoreno-sysValidate UI modifications for visual regression, compliance, and accessibility.
qodex-aiDesign accessible UIs with component libraries and generate React code with Tailwind CSS.
