skills.rest
ckorhonen
ckorhonenCOMMUNITY
Explore all skills by this author →
Website𝕏@ckorhonenGitHub

ui-design

Enforce Tailwind CSS and motion/react UI design constraints for agent-enabled interfaces.

12|Updated Dec 13, 2025
Search Tags:#accessibility#tailwind#ui-design#motion#base-ui#radix#react-aria
One-click install
npx skills add https://github.com/ckorhonen/claude-skills --skill ui-design-ckorhonen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/ckorhonen/claude-skills/tree/main/skills/ui-design
Command: npx skills add https://github.com/ckorhonen/claude-skills --skill ui-design-ckorhonen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds consistent, accessible, and performant UI across agent-enabled interfaces by enforcing opinionated design constraints and best practices.

Core Features & Use Cases

  • Enforces Tailwind CSS defaults (spacing, radius, shadows) to ensure visual consistency.
  • Guides animation usage with motion/react and safe CSS transitions.
  • Promotes accessible primitives usage (Base UI, React Aria, Radix) for keyboard/focus behavior.
  • Helps review frontend code for accessibility, layout correctness, and responsive design.
  • Supports design-system friendly patterns for z-index, spacing, and loading/error states.

Quick Start

Apply the UI design constraints to your next agent-enabled component, ensuring Tailwind defaults, accessible primitives, and motion/react usage.

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 design constraints for agent-enabled interfaces?▼

To enforce consistent UI design constraints for agent-enabled interfaces, apply opinionated rules for Tailwind CSS defaults, accessible primitives, and motion/react animations. This ensures visual consistency and accessibility across frontend components.

What's the best way to review Tailwind frontend code for accessibility and layout correctness?▼

Reviewing Tailwind frontend code for accessibility and layout correctness involves checking Tailwind spacing defaults, ensuring accessible primitives like Base UI or Radix are used, and validating responsive design patterns and focus behavior.

Can I use motion/react animations with Tailwind CSS in agent UI components?▼

Yes, you can use motion/react animations alongside safe CSS transitions within Tailwind-based projects. Combining these allows you to build performant, consistent agent UI components while maintaining strict design constraints.

Do I need accessible primitives like Radix or React Aria for agent UI development?▼

Accessible primitives like Radix, React Aria, or Base UI are needed for agent UI development to ensure proper keyboard and focus behavior. They provide the accessible foundation required for consistent interaction patterns.

How do I manage z-index, loading, and error states in a design-system friendly way?▼

Managing z-index, loading, and error states in a design-system friendly way requires applying opinionated constraints for layout patterns and spacing. This standardizes visual hierarchy and state handling across your interfaces.

Related Skills

Explore More Design & Creative Skills→
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
vobasevobase
59

audit

Audit UI interfaces for accessibility, performance, theming, and responsive design.

Official
Intermediate
TheGoat395TheGoat395
117

radix-accessible-primitives

Automate creation of accessible React UI components with Radix Primitives.

Community
Advanced
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced