Awesome-omni-skill fct-web-ui-ux

UI/UX design intelligence for web and mobile across 13 stacks (React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, etc.). Use when building, designing, reviewing, or optimizing UI/UX for websites, dashboards, apps. Covers styles, palettes, fonts, accessibility, animation, layout.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/fct-web-ui-ux" ~/.claude/skills/diegosouzapw-awesome-omni-skill-fct-web-ui-ux && rm -rf "$T"

manifest: skills/development/fct-web-ui-ux/SKILL.md

source content

UI/UX Design Intelligence

Searchable database of UI styles, color palettes, font pairings, and UX guidelines. Generates complete design systems with reasoning.

Priority Rules

Priority	Category	Impact
1	Accessibility	CRITICAL
2	Touch & Interaction	CRITICAL
3	Performance	HIGH
4	Layout & Responsive	HIGH
5	Typography & Color	MEDIUM
6	Animation	MEDIUM
7	Style Selection	MEDIUM
8	Charts & Data	LOW

Quick Reference

Accessibility (CRITICAL)

```
color-contrast
```
- Minimum 4.5:1 ratio for text
```
focus-states
```
- Visible focus rings on interactive elements
```
alt-text
```
- Descriptive alt text for images
```
aria-labels
```
- aria-label for icon-only buttons
```
keyboard-nav
```
- Tab order matches visual order

Touch & Interaction (CRITICAL)

```
touch-target-size
```
- Minimum 44x44px touch targets
```
loading-buttons
```
- Disable button during async operations
```
cursor-pointer
```
- Add cursor-pointer to clickable elements

Performance (HIGH)

```
image-optimization
```
- Use WebP, srcset, lazy loading
```
reduced-motion
```
- Check prefers-reduced-motion

Layout & Responsive (HIGH)

```
readable-font-size
```
- Minimum 16px body text on mobile
```
z-index-management
```
- Define z-index scale (10, 20, 30, 50)

Workflow

Step 1: Analyze Request

Extract from user request:

Product type: SaaS, e-commerce, portfolio, dashboard, landing page
Style keywords: minimal, playful, professional, elegant, dark mode
Industry: healthcare, fintech, gaming, education
Stack: React, Vue, Next.js, or default to
```
html-tailwind
```

Step 2: Generate Design System (REQUIRED)

uv run scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

Returns: pattern, style, colors, typography, effects, anti-patterns.

Example:

uv run scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Optional)

Save for hierarchical retrieval across sessions:

uv run scripts/search.py "<query>" --design-system --persist -p "Project Name"

Creates:

```
design-system/MASTER.md
```
— Global Source of Truth
```
design-system/pages/
```
— Page-specific overrides

With page override:

uv run scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

Step 3: Detailed Searches (as needed)

uv run scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

Need	Domain	Example
More style options	`style`	`--domain style "glassmorphism dark"`
Chart recommendations	`chart`	`--domain chart "real-time dashboard"`
UX best practices	`ux`	`--domain ux "animation accessibility"`
Alternative fonts	`typography`	`--domain typography "elegant luxury"`
Landing structure	`landing`	`--domain landing "hero social-proof"`

Step 4: Stack Guidelines

uv run scripts/search.py "<keyword>" --stack html-tailwind

Stacks:

html-tailwind

(default),

react

nextjs

astro

vue

nuxtjs

nuxt-ui

svelte

swiftui

react-native

flutter

shadcn

jetpack-compose

Search Reference

Domains

Domain	Use For
`product`	Product type recommendations
`style`	UI styles, colors, effects
`typography`	Font pairings, Google Fonts
`color`	Color palettes by product type
`landing`	Page structure, CTA strategies
`chart`	Chart types, library recommendations
`ux`	Best practices, anti-patterns
`react`	React/Next.js performance
`web`	Web interface guidelines

Common Rules

Icons & Visual Elements

Rule	Do	Don't
No emoji icons	Use SVG (Heroicons, Lucide)	Use emojis as UI icons
Stable hover states	Use color/opacity transitions	Use scale transforms
Consistent sizing	Fixed viewBox (24x24) w-6 h-6	Mix icon sizes

Interaction & Cursor

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to clickable elements	Leave default cursor
Hover feedback	Visual feedback (color, shadow)	No indication of interactivity
Smooth transitions	`transition-colors duration-200`	Instant or >500ms

Light/Dark Mode Contrast

Rule	Do	Don't
Glass card light mode	`bg-white/80` or higher	`bg-white/10`
Text contrast light	`#0F172A` (slate-900)	`#94A3B8` (slate-400)
Border visibility	`border-gray-200` light mode	`border-white/10`

Layout & Spacing

Rule Do Don't

Floating navbar

top-4 left-4 right-4

spacing

top-0 left-0 right-0

Content padding Account for fixed navbar Content behind fixed elements

Consistent max-width

Same

max-w-6xl

max-w-7xl

Mix container widths

Pre-Delivery Checklist

Visual Quality

No emojis as icons (use SVG)
Consistent icon set (Heroicons/Lucide)
Hover states don't cause layout shift
Use theme colors directly (bg-primary)

Interaction

All clickable elements have
```
cursor-pointer
```
Transitions 150-300ms
Focus states visible

Light/Dark Mode

Light mode text contrast 4.5:1 minimum
Glass elements visible in light mode
Borders visible in both modes

Layout

Responsive at 375px, 768px, 1024px, 1440px
No horizontal scroll on mobile
No content behind fixed elements

Accessibility

All images have alt text
Form inputs have labels
```
prefers-reduced-motion
```
respected