oxycode-skills 1.0.0

package/skills/anti-slop/examples/before-after.md

@@ -0,0 +1,380 @@
+# Before & After: AI Slop vs Vercel-Quality
+
+## Example 1: Hero Section
+
+### ❌ Before (AI Slop)
+```tsx
+<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center p-8">
+  <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 text-center max-w-md border border-white/20">
+    <div className="w-20 h-20 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
+      <Star className="w-10 h-10 text-white" />
+    </div>
+    <h1 className="text-4xl font-bold text-white mb-4 tracking-tight">
+      Welcome to the Future
+    </h1>
+    <p className="text-purple-200 mb-8 leading-relaxed">
+      Experience the next generation of innovation
+    </p>
+    <button className="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-110 transition-transform duration-500 shadow-xl hover:shadow-2xl">
+      Get Started Free
+    </button>
+  </div>
+</div>
+```
+
+**Issues:**
+- ❌ Purple/blue gradient background
+- ❌ Backdrop blur glassmorphism
+- ❌ Centered everything
+- ❌ Rainbow gradient button
+- ❌ Hover scale animation
+- ❌ Oversized border radius (3xl, full)
+- ❌ Generic "Welcome to the Future"
+
+### ✅ After (Vercel-Quality)
+```tsx
+<div className="min-h-screen bg-zinc-950 flex items-center justify-center px-6">
+  <div className="max-w-2xl">
+    <div className="inline-flex items-center gap-2 px-3 py-1 bg-zinc-900 border border-zinc-800 rounded-full text-sm text-zinc-400 mb-6">
+      <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+      Now in public beta
+    </div>
+    
+    <h1 className="text-4xl sm:text-5xl font-semibold text-zinc-100 tracking-tight">
+      Build faster with modern tools
+    </h1>
+    
+    <p className="mt-6 text-lg text-zinc-400 max-w-xl">
+      The all-in-one platform that helps teams ship products faster.
+      Automate your workflow and focus on what matters.
+    </p>
+    
+    <div className="mt-10 flex flex-col sm:flex-row items-start gap-4">
+      <button className="px-6 py-3 text-sm font-medium text-zinc-900 bg-zinc-100 rounded-lg hover:bg-white transition-colors">
+        Start for free
+      </button>
+      <button className="px-6 py-3 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+        Learn more →
+      </button>
+    </div>
+    
+    <p className="mt-4 text-sm text-zinc-500">
+      No credit card required • 14-day free trial
+    </p>
+  </div>
+</div>
+```
+
+**Improvements:**
+- ✅ Solid zinc background
+- ✅ No glassmorphism
+- ✅ Left-aligned text
+- ✅ Solid color button
+- ✅ Subtle hover effect
+- ✅ Appropriate border radius
+- ✅ Realistic content
+
+---
+
+## Example 2: Card Component
+
+### ❌ Before (AI Slop)
+```tsx
+<div className="bg-gradient-to-br from-white to-gray-50 p-8 rounded-3xl shadow-2xl hover:shadow-3xl hover:scale-105 transition-all duration-500 border border-gray-100">
+  <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-blue-500 rounded-2xl flex items-center justify-center mb-6">
+    <Zap className="w-8 h-8 text-white" />
+  </div>
+  <h3 className="text-2xl font-bold text-gray-900 mb-3 text-center">
+    Lightning Fast
+  </h3>
+  <p className="text-gray-500 text-center leading-relaxed mb-6">
+    Built for speed with modern technologies
+  </p>
+  <button className="w-full bg-gradient-to-r from-purple-500 to-blue-500 text-white py-3 rounded-xl font-medium hover:from-purple-600 hover:to-blue-600 transition-all">
+    Learn More
+  </button>
+</div>
+```
+
+**Issues:**
+- ❌ Gradient background
+- ❌ Shadow overload (2xl, 3xl)
+- ❌ Hover scale + shadow
+- ❌ Gradient icon background
+- ❌ Gradient button
+- ❌ Centered text
+- ❌ Oversized radius (3xl, 2xl, xl)
+
+### ✅ After (Vercel-Quality)
+```tsx
+<div className="bg-white border border-zinc-200 rounded-lg p-6">
+  <div className="w-10 h-10 bg-zinc-900 rounded-lg flex items-center justify-center">
+    <Zap className="w-5 h-5 text-white" />
+  </div>
+  
+  <h3 className="mt-4 text-lg font-semibold text-zinc-900">
+    Lightning Fast
+  </h3>
+  
+  <p className="mt-2 text-sm text-zinc-500">
+    Built for speed with modern technologies
+  </p>
+  
+  <button className="mt-4 w-full px-4 py-2 text-sm font-medium text-white bg-zinc-900 rounded-lg hover:bg-zinc-800 transition-colors">
+    Learn More
+  </button>
+</div>
+```
+
+**Improvements:**
+- ✅ Solid background
+- ✅ Border instead of shadow
+- ✅ No hover transform
+- ✅ Solid icon background
+- ✅ Solid button
+- ✅ Left-aligned text
+- ✅ Appropriate radius (lg)
+
+---
+
+## Example 3: Navigation
+
+### ❌ Before (AI Slop)
+```tsx
+<nav className="bg-white/80 backdrop-blur-xl border-b border-gray-100 sticky top-0 z-50">
+  <div className="max-w-7xl mx-auto px-8 py-4 flex items-center justify-between">
+    <div className="flex items-center gap-3">
+      <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-blue-500 rounded-xl flex items-center justify-center">
+        <span className="text-white font-bold">A</span>
+      </div>
+      <span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+        AppName
+      </span>
+    </div>
+    
+    <div className="hidden md:flex items-center gap-8">
+      <a href="#" className="text-gray-600 hover:text-purple-600 transition-colors font-medium">
+        Features
+      </a>
+      <a href="#" className="text-gray-600 hover:text-purple-600 transition-colors font-medium">
+        Pricing
+      </a>
+      <a href="#" className="text-gray-600 hover:text-purple-600 transition-colors font-medium">
+        About
+      </a>
+    </div>
+    
+    <button className="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-6 py-2 rounded-full font-medium hover:scale-105 transition-transform">
+      Sign Up
+    </button>
+  </div>
+</nav>
+```
+
+**Issues:**
+- ❌ Backdrop blur
+- ❌ Gradient logo
+- ❌ Gradient text
+- ❌ Gradient button
+- ❌ Hover scale
+- ❌ Purple hover colors
+- ❌ Oversized radius (xl, full)
+
+### ✅ After (Vercel-Quality)
+```tsx
+<nav className="sticky top-0 z-50 border-b border-zinc-200 bg-white">
+  <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+    <div className="flex items-center gap-2">
+      <div className="w-8 h-8 bg-zinc-900 rounded-lg flex items-center justify-center">
+        <span className="text-white text-sm font-bold">A</span>
+      </div>
+      <span className="text-xl font-bold text-zinc-900">AppName</span>
+    </div>
+    
+    <div className="hidden md:flex items-center gap-8">
+      <a href="#" className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors">
+        Features
+      </a>
+      <a href="#" className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors">
+        Pricing
+      </a>
+      <a href="#" className="text-sm text-zinc-600 hover:text-zinc-900 transition-colors">
+        About
+      </a>
+    </div>
+    
+    <button className="px-4 py-2 text-sm font-medium text-white bg-zinc-900 rounded-lg hover:bg-zinc-800 transition-colors">
+      Sign Up
+    </button>
+  </div>
+</nav>
+```
+
+**Improvements:**
+- ✅ No backdrop blur
+- ✅ Solid logo
+- ✅ Regular text
+- ✅ Solid button
+- ✅ Subtle hover
+- ✅ Zinc hover colors
+- ✅ Appropriate radius (lg)
+
+---
+
+## Example 4: Pricing Card
+
+### ❌ Before (AI Slop)
+```tsx
+<div className="bg-gradient-to-br from-purple-600 to-blue-600 p-8 rounded-3xl text-white relative overflow-hidden">
+  <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16" />
+  <div className="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full -ml-12 -mb-12" />
+  
+  <span className="inline-block px-4 py-1 bg-white/20 rounded-full text-sm font-medium mb-4">
+    Most Popular
+  </span>
+  
+  <h3 className="text-2xl font-bold mb-2">Pro Plan</h3>
+  <p className="text-purple-100 mb-6">Perfect for growing teams</p>
+  
+  <div className="mb-6">
+    <span className="text-5xl font-bold">$29</span>
+    <span className="text-purple-200">/month</span>
+  </div>
+  
+  <ul className="space-y-3 mb-8">
+    <li className="flex items-center gap-3">
+      <Check className="w-5 h-5 text-green-300" />
+      <span>10,000 API calls</span>
+    </li>
+    <li className="flex items-center gap-3">
+      <Check className="w-5 h-5 text-green-300" />
+      <span>Advanced analytics</span>
+    </li>
+  </ul>
+  
+  <button className="w-full bg-white text-purple-600 py-3 rounded-xl font-semibold hover:scale-105 transition-transform">
+    Get Started
+  </button>
+</div>
+```
+
+**Issues:**
+- ❌ Gradient background
+- ❌ Decorative circles (fake depth)
+- ❌ Gradient text
+- ❌ Hover scale
+- ❌ Oversized radius (3xl, xl)
+- ❌ Too many visual effects
+
+### ✅ After (Vercel-Quality)
+```tsx
+<div className="bg-zinc-900 p-8 rounded-xl text-white relative">
+  <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-zinc-900 text-white text-xs font-medium rounded-full border border-zinc-700">
+    Most popular
+  </div>
+  
+  <h3 className="text-lg font-semibold">Pro Plan</h3>
+  <p className="mt-2 text-sm text-zinc-400">For growing teams</p>
+  
+  <div className="mt-6">
+    <span className="text-4xl font-bold">$29</span>
+    <span className="text-zinc-400">/month</span>
+  </div>
+  
+  <ul className="mt-8 space-y-4">
+    <li className="flex items-center gap-3 text-sm text-zinc-300">
+      <Check className="w-5 h-5 text-green-400" />
+      10,000 API calls
+    </li>
+    <li className="flex items-center gap-3 text-sm text-zinc-300">
+      <Check className="w-5 h-5 text-green-400" />
+      Advanced analytics
+    </li>
+  </ul>
+  
+  <button className="mt-8 w-full py-2 text-sm font-medium text-zinc-900 bg-white rounded-lg hover:bg-zinc-100 transition-colors">
+    Get started
+  </button>
+</div>
+```
+
+**Improvements:**
+- ✅ Solid background
+- ✅ No decorative elements
+- ✅ Regular text
+- ✅ Subtle hover
+- ✅ Appropriate radius (xl, lg)
+- ✅ Clean, minimal design
+
+---
+
+## Example 5: Stats Card
+
+### ❌ Before (AI Slop)
+```tsx
+<div className="bg-gradient-to-br from-white to-gray-50 p-6 rounded-2xl shadow-xl border border-gray-100">
+  <div className="flex items-center justify-between mb-4">
+    <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center">
+      <TrendingUp className="w-6 h-6 text-white" />
+    </div>
+    <span className="text-green-500 font-semibold text-sm bg-green-50 px-3 py-1 rounded-full">
+      +12%
+    </span>
+  </div>
+  <h4 className="text-gray-500 text-sm font-medium mb-1">Total Revenue</h4>
+  <p className="text-3xl font-bold text-gray-900">$45,678</p>
+</div>
+```
+
+**Issues:**
+- ❌ Gradient background
+- ❌ Shadow overload
+- ❌ Gradient icon
+- ❌ Oversized radius (2xl, xl)
+- ❌ Centered layout
+
+### ✅ After (Vercel-Quality)
+```tsx
+<div className="bg-white border border-zinc-200 rounded-lg p-6">
+  <div className="flex items-center justify-between">
+    <p className="text-sm font-medium text-zinc-500">Total Revenue</p>
+    <span className="text-xs font-medium text-green-700 bg-green-100 px-2 py-1 rounded-full">
+      +12%
+    </span>
+  </div>
+  <p className="mt-2 text-3xl font-bold text-zinc-900">$45,678</p>
+</div>
+```
+
+**Improvements:**
+- ✅ Solid background
+- ✅ Border instead of shadow
+- ✅ No gradient icon
+- ✅ Appropriate radius (lg)
+- ✅ Left-aligned content
+
+---
+
+## Summary
+
+### Key Differences
+
+| Aspect | AI Slop | Vercel-Quality |
+|--------|---------|----------------|
+| Background | Gradients | Solid colors |
+| Shadows | Heavy (xl, 2xl) | None or subtle |
+| Radius | 3xl, 2xl | lg, xl |
+| Hover | scale, heavy transition | colors, subtle |
+| Colors | Purple, blue, rainbow | Zinc, semantic |
+| Text | Centered | Left-aligned |
+| Content | Generic | Realistic |
+
+### Rules to Remember
+
+1. **No gradients** — Use solid colors
+2. **No heavy shadows** — Use borders
+3. **No oversized radius** — Use lg or xl
+4. **No hover transforms** — Use color changes
+5. **No rainbow colors** — Use zinc palette
+6. **No centered everything** — Use left alignment
+7. **No generic content** — Use realistic data

package/skills/anti-slop/references/quality-rubric.md

@@ -0,0 +1,313 @@
+# Quality Rubric
+
+## Overview
+
+This rubric defines the criteria for evaluating UI code quality. Use this to score UI components and identify areas for improvement.
+
+---
+
+## Scoring Dimensions
+
+### 1. Visual Design (25 points)
+
+| Criteria | Points | Description |
+|----------|--------|-------------|
+| Color System | 5 | Uses design tokens, proper hierarchy, no random colors |
+| Typography | 5 | Consistent scale, proper weights, readable |
+| Spacing | 5 | Consistent scale, proper padding/margins |
+| Layout | 5 | Grid/flex used correctly, responsive |
+| Visual Hierarchy | 5 | Clear focal points, proper size/weight contrast |
+
+### 2. Code Quality (25 points)
+
+| Criteria | Points | Description |
+|----------|--------|-------------|
+| TypeScript | 5 | Proper types, no `any` |
+| Component Structure | 5 | Single responsibility, reusable |
+| Naming | 5 | Clear, descriptive names |
+| Imports | 5 | Organized, no unused imports |
+| Comments | 5 | Useful comments where needed |
+
+### 3. Accessibility (25 points)
+
+| Criteria | Points | Description |
+|----------|--------|-------------|
+| Semantic HTML | 5 | Proper elements (nav, section, article) |
+| ARIA Attributes | 5 | Labels, roles, states |
+| Keyboard Navigation | 5 | Focusable, logical tab order |
+| Color Contrast | 5 | 4.5:1 for text, 3:1 for UI |
+| Screen Reader | 5 | Readable by assistive technology |
+
+### 4. Performance (25 points)
+
+| Criteria | Points | Description |
+|----------|--------|-------------|
+| Bundle Size | 5 | No unnecessary imports |
+| Rendering | 5 | No layout shifts |
+| Images | 5 | Optimized, lazy loaded |
+| Code Splitting | 5 | Dynamic imports where needed |
+| Caching | 5 | Proper cache headers |
+
+---
+
+## Scoring Guide
+
+### 90-100: Excellent (Vercel-Quality)
+- Production-ready code
+- No AI slop patterns
+- Excellent accessibility
+- Optimized performance
+- Clean, maintainable code
+
+### 70-89: Good
+- Minor improvements needed
+- Mostly follows best practices
+- Good accessibility
+- Acceptable performance
+
+### 50-69: Average
+- Several issues to fix
+- Some AI slop patterns
+- Accessibility issues
+- Performance concerns
+
+### 30-49: Poor
+- Many issues to fix
+- Significant AI slop
+- Poor accessibility
+- Performance problems
+
+### 0-29: Terrible
+- Complete rewrite needed
+- Pure AI slop
+- No accessibility
+- Major performance issues
+
+---
+
+## Detailed Criteria
+
+### Visual Design
+
+#### Color System (5 points)
+- **5**: Uses design tokens, proper hierarchy, semantic colors only
+- **4**: Mostly uses tokens, minor inconsistencies
+- **3**: Some hardcoded values, inconsistent hierarchy
+- **2**: Many hardcoded values, random colors
+- **1**: Pure AI slop (purple gradients, rainbow colors)
+
+#### Typography (5 points)
+- **5**: Consistent scale, proper weights, readable line heights
+- **4**: Mostly consistent, minor issues
+- **3**: Inconsistent sizes/weights
+- **2**: Poor readability
+- **1**: Random sizes, no hierarchy
+
+#### Spacing (5 points)
+- **5**: Consistent scale (4, 8, 16, 24, 32)
+- **4**: Mostly consistent
+- **3**: Some inconsistent spacing
+- **2**: Random spacing values
+- **1**: No spacing system
+
+#### Layout (5 points)
+- **5**: Proper grid/flex, responsive, clean
+- **4**: Mostly correct, minor issues
+- **3**: Some layout problems
+- **2**: Broken on mobile
+- **1**: Complete layout chaos
+
+#### Visual Hierarchy (5 points)
+- **5**: Clear focal points, proper contrast
+- **4**: Good hierarchy, minor issues
+- **3**: Some confusion in hierarchy
+- **2**: Poor hierarchy
+- **1**: No visual hierarchy
+
+---
+
+### Code Quality
+
+#### TypeScript (5 points)
+- **5**: Proper types, no `any`, interfaces defined
+- **4**: Mostly typed, minor issues
+- **3**: Some `any` types
+- **2**: Many untyped values
+- **1**: No TypeScript usage
+
+#### Component Structure (5 points)
+- **5**: Single responsibility, reusable, composable
+- **4**: Mostly well-structured
+- **3**: Some monolithic components
+- **2**: Poor structure
+- **1**: One giant component
+
+#### Naming (5 points)
+- **5**: Clear, descriptive, follows conventions
+- **4**: Mostly clear
+- **3**: Some unclear names
+- **2**: Poor naming
+- **1**: Cryptic names
+
+#### Imports (5 points)
+- **5**: Organized, no unused, proper aliases
+- **4**: Mostly organized
+- **3**: Some messiness
+- **2**: Many unused imports
+- **1**: Complete chaos
+
+#### Comments (5 points)
+- **5**: Useful comments where needed
+- **4**: Mostly helpful
+- **3**: Some unnecessary comments
+- **2**: Missing important comments
+- **1**: No comments or spam comments
+
+---
+
+### Accessibility
+
+#### Semantic HTML (5 points)
+- **5**: Proper elements (nav, section, article, main)
+- **4**: Mostly semantic
+- **3**: Some divs where elements needed
+- **2**: Many accessibility issues
+- **1**: All divs, no semantics
+
+#### ARIA Attributes (5 points)
+- **5**: Proper labels, roles, states
+- **4**: Mostly complete
+- **3**: Some missing attributes
+- **2**: Many missing attributes
+- **1**: No ARIA usage
+
+#### Keyboard Navigation (5 points)
+- **5**: All interactive elements focusable, logical order
+- **4**: Mostly keyboard accessible
+- **3**: Some issues
+- **2**: Many keyboard traps
+- **1**: Not keyboard accessible
+
+#### Color Contrast (5 points)
+- **5**: All text 4.5:1, UI 3:1
+- **4**: Mostly compliant
+- **3**: Some contrast issues
+- **2**: Many contrast issues
+- **1**: Poor contrast
+
+#### Screen Reader (5 points)
+- **5**: Readable by assistive technology
+- **4**: Mostly readable
+- **3**: Some issues
+- **2**: Many issues
+- **1**: Not screen reader accessible
+
+---
+
+### Performance
+
+#### Bundle Size (5 points)
+- **5**: No unnecessary imports, tree shaking
+- **4**: Mostly optimized
+- **3**: Some large imports
+- **2**: Many unnecessary imports
+- **1**: Huge bundle
+
+#### Rendering (5 points)
+- **5**: No layout shifts, proper loading
+- **4**: Mostly stable
+- **3**: Some layout shifts
+- **2**: Many layout shifts
+- **1**: Constant layout shifts
+
+#### Images (5 points)
+- **5**: Optimized, lazy loaded, responsive
+- **4**: Mostly optimized
+- **3**: Some issues
+- **2**: Many issues
+- **1**: Unoptimized images
+
+#### Code Splitting (5 points)
+- **5**: Dynamic imports where needed
+- **4**: Mostly split
+- **3**: Some large chunks
+- **2**: No code splitting
+- **1**: One giant bundle
+
+#### Caching (5 points)
+- **5**: Proper cache headers
+- **4**: Mostly cached
+- **3**: Some caching issues
+- **2**: No caching
+- **1**: Cache busting issues
+
+---
+
+## Usage
+
+### Step 1: Score Each Dimension
+Rate the UI code on each of the 4 dimensions (Visual Design, Code Quality, Accessibility, Performance).
+
+### Step 2: Calculate Total
+Add up all scores to get a total out of 100.
+
+### Step 3: Identify Issues
+Note specific issues in each dimension.
+
+### Step 4: Prioritize Fixes
+Fix high-impact issues first:
+1. Accessibility issues (legal risk)
+2. Visual design issues (user experience)
+3. Code quality issues (maintainability)
+4. Performance issues (user experience)
+
+### Step 5: Re-score
+After fixes, re-score to verify improvement.
+
+---
+
+## Example Scoring
+
+### Component: Stats Card
+
+**Visual Design: 22/25**
+- Color System: 5/5 (uses design tokens)
+- Typography: 4/5 (slight inconsistency)
+- Spacing: 5/5 (consistent scale)
+- Layout: 4/5 (minor responsive issue)
+- Visual Hierarchy: 4/5 (good but could be better)
+
+**Code Quality: 23/25**
+- TypeScript: 5/5 (proper types)
+- Component Structure: 5/5 (single responsibility)
+- Naming: 4/5 (mostly clear)
+- Imports: 5/5 (organized)
+- Comments: 4/5 (useful but sparse)
+
+**Accessibility: 20/25**
+- Semantic HTML: 4/5 (mostly semantic)
+- ARIA Attributes: 4/5 (some missing)
+- Keyboard Navigation: 4/5 (mostly accessible)
+- Color Contrast: 4/5 (mostly compliant)
+- Screen Reader: 4/5 (mostly readable)
+
+**Performance: 22/25**
+- Bundle Size: 5/5 (optimized)
+- Rendering: 4/5 (minor issues)
+- Images: 5/5 (optimized)
+- Code Splitting: 4/5 (mostly split)
+- Caching: 4/5 (mostly cached)
+
+**Total: 87/100 (Good)**
+
+**Issues to Fix:**
+1. Typography inconsistency
+2. Minor responsive issue
+3. Missing ARIA attributes
+4. Screen reader improvements
+
+**Priority:**
+1. Fix ARIA attributes (accessibility)
+2. Fix responsive issue (visual)
+3. Fix typography (visual)
+4. Improve screen reader (accessibility)