omgkit 2.0.7 → 2.1.1

package/plugin/skills/frontend/advanced-ui-design/SKILL.md

@@ -0,0 +1,426 @@
+---
+name: advanced-ui-design
+description: Agency-grade interface design with systematic aesthetic framework (BEAUTIFUL → RIGHT → SATISFYING → PEAK)
+category: frontend
+triggers:
+  - ui design
+  - beautiful interface
+  - professional design
+  - aesthetic
+  - agency quality
+  - stunning ui
+---
+
+# Advanced UI Design
+
+Create **agency-grade interfaces** using the BEAUTIFUL → RIGHT → SATISFYING → PEAK framework. This skill elevates designs from functional to exceptional through systematic aesthetic principles.
+
+## Purpose
+
+Transform ordinary interfaces into memorable experiences by applying:
+
+- Systematic aesthetic evaluation framework
+- Color theory and emotional design
+- Typography hierarchy mastery
+- Micro-interaction excellence
+- Visual rhythm and spacing systems
+
+## The BRSP Framework
+
+### BEAUTIFUL (Visual Appeal)
+```
+CHECKLIST: First Impression (< 3 seconds)
+==========================================
+□ Color palette evokes intended emotion
+□ Typography is readable and elegant
+□ Whitespace feels intentional, not empty
+□ Visual hierarchy guides the eye
+□ Images/illustrations are high quality
+□ No visual clutter or competing elements
+
+SCORING:
+- Does it make users want to explore more?
+- Would users screenshot and share it?
+- Does it feel premium/trustworthy?
+```
+
+### RIGHT (Functional Correctness)
+```
+CHECKLIST: Does It Work?
+========================
+□ All interactive elements are obvious
+□ Forms validate and provide feedback
+□ Loading states are clear
+□ Error states are helpful
+□ Navigation is intuitive
+□ Responsive across devices
+□ Accessibility standards met (WCAG 2.1)
+
+SCORING:
+- Can a new user complete core tasks?
+- Are there any "where do I click?" moments?
+- Does it work for all users?
+```
+
+### SATISFYING (Emotional Response)
+```
+CHECKLIST: How Does It Feel?
+============================
+□ Interactions provide immediate feedback
+□ Animations are smooth and purposeful
+□ Success states celebrate the user
+□ Transitions feel natural
+□ Sounds (if any) enhance experience
+□ Progress indicators reduce anxiety
+
+SCORING:
+- Do users smile when using it?
+- Would they use it again?
+- Does it reduce cognitive load?
+```
+
+### PEAK (Memorable Excellence)
+```
+CHECKLIST: What Makes It Exceptional?
+=====================================
+□ Unique design elements (signature)
+□ Delightful surprises (easter eggs)
+□ Storytelling through design
+□ Emotional connection established
+□ Brand personality shines through
+□ Sets new standard in category
+
+SCORING:
+- Will users remember this in 6 months?
+- Will they tell others about it?
+- Does it define the brand?
+```
+
+## Features
+
+### 1. Color System Design
+```css
+/* Primary color with semantic variations */
+:root {
+  /* Base palette */
+  --primary-50: #eff6ff;
+  --primary-100: #dbeafe;
+  --primary-500: #3b82f6;
+  --primary-600: #2563eb;
+  --primary-900: #1e3a8a;
+
+  /* Semantic colors */
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #3b82f6;
+
+  /* Neutral scale */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-500: #6b7280;
+  --gray-900: #111827;
+
+  /* Surface colors */
+  --surface-primary: var(--gray-50);
+  --surface-elevated: white;
+  --surface-overlay: rgba(0, 0, 0, 0.5);
+}
+
+/* Color usage rules:
+   - Primary: CTAs, links, active states
+   - Gray: Text, borders, backgrounds
+   - Semantic: Feedback and status only
+   - Limit: 3 colors + neutrals per view
+*/
+```
+
+### 2. Typography Hierarchy
+```css
+/* Type scale based on 1.25 ratio */
+:root {
+  --text-xs: 0.75rem;    /* 12px - Labels, captions */
+  --text-sm: 0.875rem;   /* 14px - Secondary text */
+  --text-base: 1rem;     /* 16px - Body text */
+  --text-lg: 1.125rem;   /* 18px - Lead paragraphs */
+  --text-xl: 1.25rem;    /* 20px - Section headers */
+  --text-2xl: 1.5rem;    /* 24px - Card titles */
+  --text-3xl: 1.875rem;  /* 30px - Page titles */
+  --text-4xl: 2.25rem;   /* 36px - Hero headlines */
+  --text-5xl: 3rem;      /* 48px - Display text */
+}
+
+/* Font weight usage */
+.heading { font-weight: 600; } /* Semibold for headings */
+.body { font-weight: 400; }    /* Regular for body */
+.emphasis { font-weight: 500; } /* Medium for emphasis */
+
+/* Line height rules */
+.heading { line-height: 1.2; }  /* Tight for headings */
+.body { line-height: 1.6; }     /* Relaxed for body */
+```
+
+### 3. Spacing System (8-Point Grid)
+```css
+/* Spacing scale */
+:root {
+  --space-1: 0.25rem;   /* 4px - Tight spacing */
+  --space-2: 0.5rem;    /* 8px - Related elements */
+  --space-3: 0.75rem;   /* 12px - Form gaps */
+  --space-4: 1rem;      /* 16px - Standard gap */
+  --space-6: 1.5rem;    /* 24px - Section padding */
+  --space-8: 2rem;      /* 32px - Card padding */
+  --space-12: 3rem;     /* 48px - Section margins */
+  --space-16: 4rem;     /* 64px - Page sections */
+  --space-24: 6rem;     /* 96px - Hero spacing */
+}
+
+/* Usage patterns:
+   - space-1: Icon padding, badge spacing
+   - space-2: Input padding, button gaps
+   - space-4: Card content gaps
+   - space-8: Section internal padding
+   - space-16: Between major sections
+*/
+```
+
+### 4. Micro-Interaction Library
+```css
+/* Button hover effect */
+.btn {
+  transition: all 0.2s ease;
+}
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.btn:active {
+  transform: translateY(0);
+}
+
+/* Card hover effect */
+.card {
+  transition: all 0.3s ease;
+}
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* Focus ring for accessibility */
+.interactive:focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+
+/* Loading skeleton pulse */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.skeleton {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+```
+
+### 5. Emotional Design Patterns
+```jsx
+// Success celebration
+const SuccessState = () => (
+  <motion.div
+    initial={{ scale: 0.8, opacity: 0 }}
+    animate={{ scale: 1, opacity: 1 }}
+    transition={{ type: "spring", stiffness: 200 }}
+  >
+    <CheckCircle className="text-green-500 w-16 h-16" />
+    <h2>Payment Successful!</h2>
+    <Confetti /> {/* Subtle celebration */}
+  </motion.div>
+);
+
+// Empty state with personality
+const EmptyState = () => (
+  <div className="text-center py-12">
+    <Illustration name="empty-inbox" />
+    <h3>No messages yet</h3>
+    <p className="text-gray-500">
+      When you receive messages, they'll show up here.
+      <br />
+      <span className="text-sm">
+        Pro tip: Say hi to someone! 👋
+      </span>
+    </p>
+  </div>
+);
+```
+
+## Use Cases
+
+### Landing Page Design
+```
+BRSP Assessment:
+
+BEAUTIFUL (8/10):
+✓ Hero gradient creates visual interest
+✓ Clean typography hierarchy
+✓ High-quality product screenshots
+△ Could use more whitespace in features section
+
+RIGHT (9/10):
+✓ Clear CTA above the fold
+✓ Mobile responsive
+✓ Fast load time (1.2s)
+✓ Accessibility checked
+△ Social proof could be more prominent
+
+SATISFYING (7/10):
+✓ Smooth scroll animations
+✓ Interactive pricing toggle
+△ Could add micro-interactions to cards
+△ Success state for signup needs work
+
+PEAK (6/10):
+✓ Memorable hero illustration
+△ Missing brand signature element
+△ No delightful surprises
+△ Feels similar to competitors
+
+PRIORITY IMPROVEMENTS:
+1. Add signature animation to hero
+2. Create memorable loading state
+3. Add personality to empty states
+```
+
+### Dashboard Design
+```jsx
+// Dashboard with BRSP principles
+
+export function Dashboard() {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* BEAUTIFUL: Clean header with visual hierarchy */}
+      <header className="bg-white border-b border-gray-200 px-6 py-4">
+        <h1 className="text-2xl font-semibold text-gray-900">
+          Good morning, Sarah 👋
+        </h1>
+        <p className="text-gray-500 mt-1">
+          Here's what's happening today
+        </p>
+      </header>
+
+      {/* RIGHT: Clear information architecture */}
+      <main className="p-6 grid grid-cols-12 gap-6">
+        {/* Key metrics - immediate visibility */}
+        <MetricCards className="col-span-12" />
+
+        {/* Primary content area */}
+        <ActivityFeed className="col-span-8" />
+
+        {/* Secondary information */}
+        <Sidebar className="col-span-4" />
+      </main>
+
+      {/* SATISFYING: Helpful feedback */}
+      <Toast
+        type="success"
+        message="Report exported successfully"
+        action={{ label: "View", onClick: viewReport }}
+      />
+
+      {/* PEAK: Delightful detail */}
+      <AchievementBadge
+        title="First Week Complete!"
+        description="You've been using the app for 7 days"
+      />
+    </div>
+  );
+}
+```
+
+### E-commerce Product Page
+```
+DESIGN SPECIFICATIONS:
+
+LAYOUT:
+┌─────────────────────────────────────────┐
+│  ┌─────────┐  Product Name              │
+│  │         │  ★★★★☆ (128 reviews)       │
+│  │  IMAGE  │                            │
+│  │  GALLERY│  $149.00 $199.00          │
+│  │         │                            │
+│  └─────────┘  [Select Size ▾]          │
+│               [Add to Cart]  [♡]        │
+│               ───────────────           │
+│               📦 Free shipping          │
+│               ↩️ 30-day returns         │
+└─────────────────────────────────────────┘
+
+INTERACTIONS:
+- Image gallery: Swipe + zoom on mobile
+- Size selector: Visual size guide
+- Add to cart: Satisfying animation + haptic
+- Wishlist: Heart fills with animation
+
+TRUST SIGNALS:
+- Verified purchase badges on reviews
+- "12 people viewing now" social proof
+- Security badges at checkout
+```
+
+## Best Practices
+
+### Do's
+- **Start with content** - Design around real content, not lorem ipsum
+- **Use 8-point grid** - Consistent spacing creates harmony
+- **Limit color palette** - 3 colors + neutrals maximum
+- **Test with real users** - Assumptions fail, testing wins
+- **Document decisions** - Future you will thank present you
+
+### Don'ts
+- Don't use more than 2 font families
+- Don't ignore accessibility (contrast, focus states)
+- Don't overload with animations
+- Don't design for yourself - design for users
+- Don't skip mobile-first approach
+
+### Design Checklist
+```
+Before shipping, verify:
+
+Visual Polish:
+□ Consistent spacing throughout
+□ Proper text hierarchy
+□ Color contrast passes WCAG AA
+□ Images optimized and responsive
+□ Icons consistent in style/weight
+
+Interaction Quality:
+□ All hover states defined
+□ Focus states visible
+□ Loading states designed
+□ Error states helpful
+□ Success states celebratory
+
+Responsiveness:
+□ Mobile layout tested
+□ Tablet breakpoint checked
+□ Large screen utilizes space
+□ Touch targets 44px minimum
+□ No horizontal scroll
+```
+
+## Related Skills
+
+- **frontend-design** - Foundation for design implementation
+- **tailwindcss** - Utility classes for rapid styling
+- **shadcn-ui** - Pre-built accessible components
+- **accessibility** - WCAG compliance requirements
+- **responsive** - Mobile-first design patterns
+
+## Reference Resources
+
+- [Laws of UX](https://lawsofux.com) - Psychology principles
+- [Refactoring UI](https://refactoringui.com) - Practical design tips
+- [Design Systems](https://designsystems.com) - System thinking
+- [Dribbble](https://dribbble.com) - Visual inspiration
+- [Mobbin](https://mobbin.com) - Mobile pattern library