UI Design

ui-design

Opinionated constraints for building better interfaces with agents. Use when building UI components, implementing animations, designing layouts, reviewing frontend accessibility, or working with Tailwind CSS, motion/react, or accessible primitives like Radix/Base UI.

diegosouzapw/awesome-omni-skill·0installs62stars

SKILL.md

Full skill instructions

UI Design

Opinionated constraints for building better interfaces with agents.

When to Use

Building UI components with Tailwind CSS
Implementing animations or transitions
Adding interactive elements with keyboard/focus behavior
Reviewing frontend code for accessibility
Designing layouts with proper z-index and spacing
Working with loading states, error handling, or empty states

Stack

Requirement	Rule
Tailwind CSS	MUST use defaults (spacing, radius, shadows) before custom values
Animation library	MUST use `motion/react` (formerly `framer-motion`) for JS animation
CSS animation	SHOULD use `tw-animate-css` for entrance and micro-animations
Class logic	MUST use `cn` utility (`clsx` + `tailwind-merge`)

Components

Requirement	Rule
Interactive primitives	MUST use accessible primitives (`Base UI`, `React Aria`, `Radix`) for keyboard/focus behavior
Existing components	MUST use project's existing primitives first
Consistency	NEVER mix primitive systems within the same interaction surface
New primitives	SHOULD prefer `Base UI` if compatible with stack
Icon buttons	MUST add `aria-label` to icon-only buttons
Custom behavior	NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

Interaction

Requirement	Rule
Destructive actions	MUST use `AlertDialog` for destructive or irreversible actions
Loading states	SHOULD use structural skeletons
Viewport height	NEVER use `h-screen`, use `h-dvh`
Fixed elements	MUST respect `safe-area-inset`
Error display	MUST show errors next to where the action happens
Input behavior	NEVER block paste in `input` or `textarea` elements

Animation

Requirement	Rule
Default	NEVER add animation unless explicitly requested
Compositor props	MUST animate only `transform`, `opacity`
Layout props	NEVER animate `width`, `height`, `top`, `left`, `margin`, `padding`
Paint props	SHOULD avoid `background`, `color` except for small, local UI (text, icons)
Entrance easing	SHOULD use `ease-out` on entrance
Feedback timing	NEVER exceed `200ms` for interaction feedback
Looping	MUST pause looping animations when off-screen
Accessibility	MUST respect `prefers-reduced-motion`
Custom easing	NEVER introduce custom easing curves unless explicitly requested
Large surfaces	SHOULD avoid animating large images or full-screen surfaces

Typography

Requirement	Rule
Headings	MUST use `text-balance`
Body text	MUST use `text-pretty` for paragraphs
Data	MUST use `tabular-nums`
Dense UI	SHOULD use `truncate` or `line-clamp`
Letter spacing	NEVER modify `letter-spacing` (`tracking-`) unless explicitly requested

Layout

Requirement	Rule
Z-index	MUST use a fixed scale (no arbitrary `z-x`)
Square elements	SHOULD use `size-x` instead of `w-x` + `h-x`

Performance

Requirement	Rule
Blur effects	NEVER animate large `blur()` or `backdrop-filter` surfaces
Will-change	NEVER apply `will-change` outside an active animation
useEffect	NEVER use for anything expressible as render logic

Design

Requirement	Rule
Gradients	NEVER use unless explicitly requested
Purple/multicolor gradients	NEVER use
Glow effects	NEVER use as primary affordances
Shadows	SHOULD use Tailwind CSS default scale unless explicitly requested
Empty states	MUST give one clear next action
Accent colors	SHOULD limit to one per view
Color tokens	SHOULD use existing theme or Tailwind CSS tokens before introducing new ones

Quick Reference

Allowed Animation Properties

transform, opacity

Forbidden Animation Properties

width, height, top, left, margin, padding, blur(), backdrop-filter

Required Accessibility Patterns

// Icon button - always add aria-label
<button aria-label="Close dialog">
  <XIcon />
</button>

// Respect reduced motion
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Class Utility Pattern

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/diegosouzapw/awesome-omni-skill --skill ui-design-ckorhonen

View on GitHub

skills/development/ui-design-ckorhonen/SKILL.md

ui-ux-design-system
Expert in building premium, accessible UI/UX design systems for SaaS apps. Covers design tokens, component architecture with shadcn/ui and Radix, dark mode, glassmorphism, micro-animations, responsive layouts, and accessibility. Use when: ui, ux, design system, shadcn, radix, tailwind, dark mode,...
1 installs
frontend
Defines frontend standards for Next.js App Router, React 19, React Query, shadcn/ui. Use when building components, pages, hooks, or frontend state management.
1 installs
design-ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projec...
1 installs
sql-and-database
SQL writing and database engineering patterns, standards, and procedures. Use for designing database schemas, writing performant SQL queries, normalisation strategies, indexing, joins optimisation, locking mechanics, transactions, query debugging with EXPLAIN, and ORM integration. Applies to Post...
1 installs