Ui Ux Pro

Name: Ui Ux Pro
Availability: InStock
Author: ashok-1986

Free Verified 259 lines By ashok-1986 CRO Design

Description

Comprehensive UI/UX design intelligence skill for web and mobile applications. Use this skill whenever the user asks to design, build, create, implement, review, fix, or improve any UI — including landing pages, dashboards, SaaS products, components, forms, or any visual interface. Contains 50+…

What Claude Learns

→ When to Apply
→ Rule Categories by Priority
→ Quick Reference Rules
→ 1. Accessibility (CRITICAL)
→ 2. Touch & Interaction (CRITICAL)
→ 3. Performance (HIGH)

Installation

1. Visit the GitHub repository: https://github.com/ashok-1986/fitosys
2. Copy the SKILL.md file contents
3. Save to ~/.claude/commands/skill-name.md
4. Restart Claude Code to load the new skill

Stack & Dependencies

JavaScript React SVG CSS Tailwind

Use Cases

When to Apply

Using JavaScript and React

Rule Categories by Priority

Using JavaScript and React

Quick Reference Rules

Using JavaScript and React

1. Accessibility (CRITICAL)

Using JavaScript and React

2. Touch & Interaction (CRITICAL)

Using JavaScript and React

Related Skills

Frequently Asked Questions

What technologies does Ui Ux Pro require?

This skill works with JavaScript, React, SVG, CSS, and Tailwind. Make sure these are available in your project before using the skill with Claude Code.

How detailed is the Ui Ux Pro skill?

Ui Ux Pro contains 259 lines of structured instructions covering 6 key areas. It provides comprehensive guidance including specific implementation patterns, not just surface-level tips.

Is Ui Ux Pro free to use?

Yes u2014 Ui Ux Pro is free. Install it directly with one command (`npx mkt-skills install ui-ux-pro`) or download the SKILL.md file and drop it into your `~/.claude/skills/` directory. No account, no sign-up, no license fee.

What will Claude Code learn from this skill?

Claude Code will gain expertise in: When to Apply; Rule Categories by Priority; Quick Reference Rules; and 3 more areas.

Download SKILL.md GitHub

---
name: ui-ux-pro
description: >
  Comprehensive UI/UX design intelligence skill for web and mobile applications.
  Use this skill whenever the user asks to design, build, create, implement, review,
  fix, or improve any UI — including landing pages, dashboards, SaaS products,
  components, forms, or any visual interface. Contains 50+ styles, 97 color palettes,
  57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks.
  Always trigger this skill when the user mentions: landing page, dashboard, UI, design
  system, component, dark mode, color palette, typography, accessibility, animations,
  or responsive layout — even if they don't use the word "design."
---

# UI/UX Pro — Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles,
97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across
9 technology stacks.

---

## When to Apply

Reference these guidelines when:
- Designing new UI components or pages
- Choosing color palettes and typography
- Reviewing code for UX issues
- Building landing pages or dashboards
- Implementing accessibility requirements

---

## Rule Categories by Priority

| Priority | Category | Impact | Domain |
|---|---|---|---|
| 1 | Accessibility | CRITICAL | `ux` |
| 2 | Touch & Interaction | CRITICAL | `ux` |
| 3 | Performance | HIGH | `ux` |
| 4 | Layout & Responsive | HIGH | `ux` |
| 5 | Typography & Color | MEDIUM | `typography`, `color` |
| 6 | Animation | MEDIUM | `ux` |
| 7 | Style Selection | MEDIUM | `style`, `product` |
| 8 | Charts & Data | LOW | `chart` |

---

## Quick Reference Rules

### 1. Accessibility (CRITICAL)
- `color-contrast` — Minimum 4.5:1 ratio for normal text
- `focus-states` — Visible focus rings on all interactive elements
- `alt-text` — Descriptive alt text for meaningful images
- `aria-labels` — aria-label for icon-only buttons
- `keyboard-nav` — Tab order matches visual order
- `form-labels` — Use label with for attribute

### 2. Touch & Interaction (CRITICAL)
- `touch-target-size` — Minimum 44×44px touch targets
- `hover-vs-tap` — Use click/tap for primary interactions
- `loading-buttons` — Disable button during async operations
- `error-feedback` — Clear error messages near the problem
- `cursor-pointer` — Add cursor-pointer to all clickable elements

### 3. Performance (HIGH)
- `image-optimization` — Use WebP, srcset, lazy loading
- `reduced-motion` — Always check prefers-reduced-motion
- `content-jumping` — Reserve space for async content to prevent CLS

### 4. Layout & Responsive (HIGH)
- `viewport-meta` — width=device-width, initial-scale=1
- `readable-font-size` — Minimum 16px body text on mobile
- `horizontal-scroll` — Ensure content fits viewport width
- `z-index-management` — Define z-index scale: 10, 20, 30, 50

### 5. Typography & Color (MEDIUM)
- `line-height` — Use 1.5–1.75 for body text
- `line-length` — Limit to 65–75 characters per line
- `font-pairing` — Match heading/body font personalities

### 6. Animation (MEDIUM)
- `duration-timing` — Use 150–300ms for micro-interactions
- `transform-performance` — Animate transform/opacity only, not width/height
- `loading-states` — Skeleton screens or spinners for async

### 7. Style Selection (MEDIUM)
- `style-match` — Match style to product type and industry
- `consistency` — Use same style system across all pages
- `no-emoji-icons` — Use SVG icons (Heroicons, Lucide), never emoji as UI icons

### 8. Charts & Data (LOW)
- `chart-type` — Match chart type to data relationship
- `color-guidance` — Use accessible color palettes for data viz
- `data-table` — Provide table alternative for screen reader accessibility

---

## Workflow — Apply on Every UI Task

### Step 1: Analyze Requirements
Extract from the user's request:
- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page
- **Style keywords**: minimal, playful, professional, elegant, dark mode
- **Industry**: healthcare, fintech, gaming, education, fitness
- **Stack**: React, Vue, Next.js — default to `html-tailwind` if unspecified

### Step 2: Design System Decisions (REQUIRED)
Always define these before writing any code:

**Pattern**: What layout/interaction pattern fits this product?
**Style**: What visual style fits (glassmorphism, flat, minimal, etc.)?
**Colors**: Primary, surface, text, accent — with contrast ratios confirmed
**Typography**: Heading font + body font pairing with weights and sizes
**Effects**: Shadows, borders, blurs, motion

Domains to consider: product → style → color → typography → landing → ux

### Step 3: Supplement with Specific Rules
Based on what you're building:

| Need | Domain | Apply When |
|---|---|---|
| Style direction | `style` | Visual treatment unclear |
| Chart recommendations | `chart` | Data visualisation involved |
| UX best practices | `ux` | Animation, accessibility, forms |
| Alternative fonts | `typography` | More pairing options needed |
| Landing page structure | `landing` | Hero, social-proof, CTA layout |

### Step 4: Stack Guidelines
Apply stack-specific best practices:

| Stack | Key Focus |
|---|---|
| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
| `react` | State, hooks, performance patterns |
| `nextjs` | SSR, routing, images, API routes |
| `vue` | Composition API, Pinia, Vue Router |
| `svelte` | Runes, stores, SvelteKit |
| `shadcn` | shadcn/ui components, theming, forms |
| `react-native` | Components, Navigation, Lists |
| `flutter` | Widgets, State, Layout, Theming |

---

## Common Professional UI Rules

### Icons & Visual Elements
| Rule | Do | Don't |
|---|---|---|
| No emoji icons | Use SVG (Heroicons, Lucide, Simple Icons) | Use 🎨 🚀 ⚙️ as UI icons |
| Stable hover states | Color/opacity transitions | Scale transforms that shift layout |
| Correct brand logos | Official SVG from Simple Icons | Guess or approximate logo paths |
| Consistent icon sizing | Fixed viewBox (24×24) with w-6 h-6 | Mix different icon sizes |

### Interaction & Cursor
| Rule | Do | Don't |
|---|---|---|
| Cursor pointer | `cursor-pointer` on all clickable elements | Leave default cursor on cards |
| Hover feedback | Color, shadow, or border change | No visual indication of interactivity |
| Smooth transitions | `transition-colors duration-200` | Instant changes or >500ms delays |

### Light/Dark Mode Contrast
| Rule | Do | Don't |
|---|---|---|
| Glass card (light) | `bg-white/80` or higher opacity | `bg-white/10` (invisible) |
| Text (light mode) | `#0F172A` (slate-900) for body | `#94A3B8` (slate-400) for body |
| Muted text (light) | `#475569` (slate-600) minimum | gray-400 or lighter |
| Border visibility | `border-gray-200` in light mode | `border-white/10` (invisible) |

### Layout & Spacing
| Rule | Do | Don't |
|---|---|---|
| Floating navbar | `top-4 left-4 right-4` spacing | Stick to `top-0 left-0 right-0` |
| Content padding | Account for fixed navbar height | Let content hide behind nav |
| Container width | Consistent `max-w-6xl` or `max-w-7xl` | Mix different container widths |

---

## Pre-Delivery Checklist

Before delivering any UI code, verify:

### Visual Quality
- [ ] No emojis used as icons — all SVG
- [ ] Icons from one consistent set (Heroicons or Lucide)
- [ ] Brand logos verified from Simple Icons
- [ ] Hover states do not cause layout shift
- [ ] Theme colors used directly (bg-primary, not var() wrappers)

### Interaction
- [ ] All clickable elements have `cursor-pointer`
- [ ] Hover states provide clear visual feedback
- [ ] Transitions are smooth (150–300ms)
- [ ] Focus states visible for keyboard navigation

### Light/Dark Mode
- [ ] Light mode text contrast meets 4.5:1 minimum
- [ ] Glass/transparent elements visible in light mode
- [ ] Borders visible in both modes

### Layout
- [ ] Floating elements have proper spacing from edges
- [ ] No content hidden behind fixed navbars
- [ ] Responsive tested at 375px, 768px, 1024px, 1440px
- [ ] No horizontal scroll on mobile

### Accessibility
- [ ] All images have alt text
- [ ] Form inputs have associated labels
- [ ] Color is not the only information conveyor
- [ ] `prefers-reduced-motion` respected in all animations

---

## Fitosys-Specific Design Tokens (Override Layer)

When building anything for the Fitosys project, apply these tokens on top of
general UI/UX recommendations. These override generic suggestions.

```css
--red:     #F20000   /* Primary accent — use sparingly, max 2-3 elements/section */
--black:   #0A0A0A   /* Page background */
--surface: #111111   /* Cards, panels */
--card:    #141414   /* Elevated cards */
--border:  #222222   /* All borders */
--white:   #FFFFFF   /* Primary text */
--grey:    #A0A0A0   /* Secondary text — minimum contrast level */
--dim:     #555555   /* Disabled, ghost */
--wa:      #25D366   /* WhatsApp elements only */

/* Fonts */
--font-display: 'Barlow Condensed'  /* Headlines only. Max weight 500. Always uppercase. */
--font-body:    'Urbanist'          /* All body, labels, buttons, forms */
--font-serif:   'Instrument Serif'  /* Quotes and mission text only */
```

**Fitosys layout rules:**
- Every section: `min-height: 100vh`
- Section padding: `clamp(80px, 10vw, 140px)` top/bottom
- Body copy max-width: 560px
- Max content width: 1280px
- Three breakpoints only: 1025px+, 769–1024px, 768px-
- Hide complex visual elements (phone mockups, floats) below 1024px

**Fitosys animation rules (GSAP):**
- Library: GSAP + ScrollTrigger only. No mixing.
- Entrance easing: `power3.out`
- Transition easing: `power2.inOut`
- Loop easing: `sine.inOut`
- Max duration: 1.2s. Stagger: 0.08s–0.15s.
- Max 3 scroll-triggered animations per section.
- All scroll animations wrapped in `gsap.matchMedia()` for reduced-motion.

---

## Source
Adapted from ui-ux-pro-max by nextlevelbuilder
https://skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max
GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Description

What Claude Learns

Installation

Stack & Dependencies

Use Cases

When to Apply

Rule Categories by Priority

Quick Reference Rules

1. Accessibility (CRITICAL)

2. Touch & Interaction (CRITICAL)

Related Skills

Hackathon Landing Pwa

Website Design Assistant Skill

Landing Page con Lead Generation — Expert Full Stack UI/UX

Frontend Dev

Frequently Asked Questions

AI Marketing Skills Newsletter