oxycode-skills 1.0.0 → 1.1.0

package/.agents/plugins/marketplace.json

@@ -0,0 +1,21 @@
+{
+  "name": "oxycode-skills",
+  "interface": {
+    "displayName": "OxyCode Skills",
+    "shortDescription": "Vercel-quality UI skills — no more AI slop"
+  },
+  "plugins": [
+    {
+      "name": "oxycode-skills",
+      "source": {
+        "source": "url",
+        "url": "./"
+      },
+      "policy": {
+        "installation": "AVAILABLE",
+        "authentication": "ON_INSTALL"
+      },
+      "category": "Developer Tools"
+    }
+  ]
+}

package/.agents/skills/anti-slop.md

@@ -0,0 +1,24 @@
+# anti-slop
+
+Block generic AI patterns like purple gradients and centered cards.
+
+## Usage
+
+```bash
+/anti-slop "Review this component for AI slop patterns"
+```
+
+## Description
+
+This skill teaches AI coding agents to detect and fix common AI slop patterns — generic, template-driven UI that looks polished but lacks intention.
+
+## What It Detects
+
+- Wrong background colors (#0a0a1a, #0d1117)
+- Purple/blue gradients and cyan accents
+- Glassmorphism and backdrop-blur
+- Glow effects and colored shadows
+- Framer Motion page load animations
+- Centered text layouts
+- Doodle/pattern backgrounds
+- Gradient text

package/.agents/skills/component-architect.md

@@ -0,0 +1,21 @@
+# component-architect
+
+Design scalable component architectures with atomic design.
+
+## Usage
+
+```bash
+/component-architect "Design a component system for an e-commerce dashboard"
+```
+
+## Description
+
+This skill teaches AI coding agents to design scalable component architectures following atomic design principles: Atoms → Molecules → Organisms → Templates → Pages.
+
+## Features
+
+- Atomic design methodology
+- Compound component patterns
+- Composition over configuration
+- TypeScript prop interfaces
+- Accessibility-first design

package/.agents/skills/design-audit.md

@@ -0,0 +1,20 @@
+# design-audit
+
+Score UI quality 0-100 with 10-dimension rubric.
+
+## Usage
+
+```bash
+/design-audit "Audit this landing page for design quality"
+```
+
+## Description
+
+This skill teaches AI coding agents to score UI quality on 10 dimensions: Typography, Color, Spacing, Layout, Components, Accessibility, Responsiveness, Visual Hierarchy, Consistency, and Polish.
+
+## Scoring
+
+- 90-100: Vercel/Stripe quality
+- 70-89: Good, minor improvements needed
+- 50-69: Average, needs work
+- Below 50: AI slop detected

package/.agents/skills/design-md.md

@@ -0,0 +1,21 @@
+# design-md
+
+Generate and validate DESIGN.md files following Google's standard.
+
+## Usage
+
+```bash
+/design-md "Create a design system for a dark-themed analytics dashboard"
+```
+
+## Description
+
+This skill teaches AI coding agents to generate DESIGN.md files that define design tokens (colors, typography, spacing, shadows) for consistent UI across projects.
+
+## Features
+
+- Automatic color palette generation
+- Typography scale with proper ratios
+- Consistent spacing system
+- Component token definitions
+- Google DESIGN.md standard compliance

package/.agents/skills/ui-builder.md

@@ -0,0 +1,31 @@
+# ui-builder
+
+Build production-quality UI with React, Tailwind, and Next.js.
+
+## Usage
+
+```bash
+/ui-builder "Create a stats card with title, value, and percentage change"
+```
+
+## Description
+
+This skill teaches AI coding agents to generate Vercel-quality React/TypeScript code with Tailwind CSS. It follows design tokens from DESIGN.md files and avoids common AI slop patterns.
+
+## Features
+
+- React/TypeScript output
+- Tailwind CSS styling
+- Responsive design
+- Accessibility attributes
+- Design token integration
+- Anti-slop pattern enforcement
+
+## What It Prevents
+
+- Purple gradients and cyan accents
+- Glassmorphism and backdrop-blur
+- Glow effects and colored shadows
+- Centered everything layouts
+- Framer Motion page load animations
+- Doodle/pattern backgrounds

package/.agents/skills/website-design.md

@@ -0,0 +1,24 @@
+# website-design
+
+Professional website design with clean typography, proper spacing, and Vercel-quality patterns.
+
+## Usage
+
+```bash
+/website-design "Build a SaaS landing page with pricing section"
+```
+
+## Description
+
+This skill teaches AI coding agents to build production-quality websites with Vercel-quality design: pure black backgrounds, clean typography, minimal effects, left-aligned layouts, and proper spacing.
+
+## Non-Negotiable Rules
+
+- Background is pure black (#000)
+- Never add gradients
+- Never add glassmorphism
+- Never add glow effects
+- Never add doodle/pattern backgrounds
+- Never use Framer Motion page load animations
+- Text is left-aligned
+- Typography is hierarchical

package/.claude-plugin/plugin.json

@@ -0,0 +1,27 @@
+{
+  "name": "oxycode-skills",
+  "version": "1.1.0",
+  "description": "Vercel-quality UI skills for AI coding agents. No more AI slop.",
+  "author": "oxycode-ai",
+  "license": "MIT",
+  "skills": [
+    "ui-builder",
+    "design-md",
+    "anti-slop",
+    "design-audit",
+    "component-architect",
+    "website-design"
+  ],
+  "repository": "https://github.com/oxycodeai/OXYCODE-SKILLS",
+  "keywords": [
+    "ui",
+    "ux",
+    "design",
+    "anti-slop",
+    "react",
+    "nextjs",
+    "tailwind",
+    "vercel",
+    "stitch"
+  ]
+}

package/.codex-plugin/plugin.json

@@ -0,0 +1,23 @@
+{
+  "name": "oxycode-skills",
+  "version": "1.1.0",
+  "description": "Vercel-quality UI skills for AI coding agents. No more AI slop.",
+  "author": "oxycode-ai",
+  "license": "MIT",
+  "skills": "./skills/",
+  "repository": "https://github.com/oxycodeai/OXYCODE-SKILLS",
+  "interface": {
+    "displayName": "OxyCode Skills",
+    "shortDescription": "Vercel-quality UI skills — no more AI slop",
+    "longDescription": "Teaches AI coding agents to produce Vercel-quality UI instead of generic AI slop. Covers design tokens, component architecture, accessibility, and anti-slop patterns.",
+    "developerName": "oxycode-ai",
+    "category": "Developer Tools",
+    "capabilities": [
+      "Interactive",
+      "Read",
+      "Write"
+    ],
+    "websiteURL": "https://github.com/oxycodeai/OXYCODE-SKILLS",
+    "brandColor": "#000000"
+  }
+}

package/.opencode/plugins/oxycode.js

@@ -0,0 +1,17 @@
+const path = require("path");
+
+const OxycodePlugin = async ({ client, directory }) => {
+  const skillsDir = path.join(directory, "skills");
+
+  return {
+    name: "oxycode-skills",
+    config: (config) => {
+      if (!config.skills) config.skills = {};
+      if (!config.skills.paths) config.skills.paths = [];
+      config.skills.paths.push(skillsDir);
+      return config;
+    },
+  };
+};
+
+module.exports = OxycodePlugin;

package/README.md

@@ -4,20 +4,20 @@
 
 <p align="center">
   <img src="https://img.shields.io/badge/license-MIT-green" alt="License">
-  <img src="https://img.shields.io/badge/version-1.0.0-blue" alt="Version">
-  <img src="https://img.shields.io/badge/platform-Claude%20%7C%20Codex%20%7C%20OpenCode%20%7C%20Cursor%20%7C%20Gemini-purple" alt="Platforms">
+  <img src="https://img.shields.io/badge/version-1.1.0-blue" alt="Version">
+  <img src="https://img.shields.io/badge/agents-5-purple" alt="Agents">
 </p>
 
 ## What is this?
 
-**oxycode-skills** teaches AI coding agents to produce Vercel-quality UI instead of generic "AI slop" — the purple gradients, Inter font, and centered cards that every developer hates.
+**oxycode-skills** teaches AI coding agents to produce Vercel-quality UI instead of generic "AI slop" — the purple gradients, backdrop-blur, and centered cards that every developer hates.
 
 ### The Problem
 
 AI-generated UI usually looks like this:
 ```tsx
 // ❌ AI Slop
-<div className="bg-gradient-to-br from-purple-500 to-blue-500 p-8 rounded-2xl">
+<div className="bg-gradient-to-br from-purple-500 to-blue-500 p-8 rounded-2xl backdrop-blur-md">
   <h1 className="text-3xl font-bold text-white text-center">Welcome</h1>
 </div>
 ```
@@ -27,91 +27,119 @@ AI-generated UI usually looks like this:
 With oxycode-skills, AI generates this:
 ```tsx
 // ✅ Vercel-Quality UI
-<section className="bg-zinc-950 border border-zinc-800 rounded-xl p-6">
-  <h2 className="text-xl font-semibold text-zinc-100 tracking-tight">
-    Welcome
-  </h2>
-  <p className="mt-2 text-sm text-zinc-400 leading-relaxed">
-    Description here
-  </p>
+<section className="py-24">
+  <div className="max-w-6xl mx-auto px-6">
+    <h1 className="text-5xl font-bold tracking-tight">Welcome</h1>
+    <p className="text-xl text-gray-400 mt-4 max-w-2xl">Description here</p>
+  </div>
 </section>
 ```
 
+## Demo Video
+
+### Before (AI Slop)
+[![Watch Before Video](https://img.shields.io/badge/▶_Watch_Before_Video-FF0000?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/OXYCODE_SKILLS_PREVIEW/2)
+
+### After (oxycode-skills)
+[![Watch After Video](https://img.shields.io/badge/▶_Watch_After_Video-00AA00?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/OXYCODE_SKILLS_PREVIEW/3)
+
 ## Skills Included
 
-| Skill | Description | Status |
-|-------|-------------|--------|
-| `ui-builder` | Full UI workflow: brief → tokens → components → polish | ✅ Ready |
-| `design-md` | Generate & validate DESIGN.md files (Google's standard) | ✅ Ready |
-| `anti-slop` | Block generic AI patterns | ✅ Ready |
-| `design-audit` | Score UI quality 0-100 | ✅ Ready |
-| `component-architect` | Atomic design patterns | ✅ Ready |
+| Skill | Description |
+|-------|-------------|
+| `ui-builder` | Full UI workflow: brief → tokens → components → polish |
+| `design-md` | Generate & validate DESIGN.md files (Google's standard) |
+| `anti-slop` | Block generic AI patterns (gradients, glassmorphism, glow) |
+| `design-audit` | Score UI quality 0-100 with 10-dimension rubric |
+| `component-architect` | Atomic design patterns & compound components |
+| `website-design` | Vercel-quality website patterns & anti-slop rules |
 
 ## Installation
 
-### For Claude Code
+### Interactive Install (Recommended)
+
 ```bash
-/install-skill oxycode-skills/ui-builder
+npx skills add oxycodeai/OXYCODE-SKILLS
 ```
 
-### For OpenCode / Codex / Cursor / Gemini
+The CLI will prompt you to:
+1. **Select your agent** — Claude Code, Codex, OpenCode, Antigravity, Cursor, or Universal
+2. **Select skills** — Choose which skills to install
+
+### Quick Install (All Skills, All Agents)
+
 ```bash
-npx skills add oxycode-skills --skill ui-builder
+npx skills add oxycodeai/OXYCODE-SKILLS --all
 ```
 
-### All Skills
+### Install for Specific Agent
+
 ```bash
-npx skills add oxycode-skills --all
+# Claude Code
+npx skills add oxycodeai/OXYCODE-SKILLS --agent claude-code
+
+# Codex
+npx skills add oxycodeai/OXYCODE-SKILLS --agent codex
+
+# OpenCode
+npx skills add oxycodeai/OXYCODE-SKILLS --agent opencode
+
+# Antigravity
+npx skills add oxycodeai/OXYCODE-SKILLS --agent antigravity
+
+# Universal (works on all agents)
+npx skills add oxycodeai/OXYCODE-SKILLS --agent universal
 ```
 
+### Install Specific Skills
+
+```bash
+# Just ui-builder
+npx skills add oxycodeai/OXYCODE-SKILLS --skill ui-builder
+
+# Multiple skills
+npx skills add oxycodeai/OXYCODE-SKILLS --skill ui-builder --skill anti-slop
+```
+
+## Supported Agents
+
+| Agent | Status | Install Command |
+|-------|--------|----------------|
+| Claude Code | ✅ | `--agent claude-code` |
+| Codex | ✅ | `--agent codex` |
+| OpenCode | ✅ | `--agent opencode` |
+| Antigravity | ✅ | `--agent antigravity` |
+| Cursor | ✅ | `--agent cursor` |
+| Universal | ✅ | `--agent universal` |
+
 ## Quick Start
 
-### 1. Create a DESIGN.md
-```markdown
-# My App Design System
-
-## Colors
-- Primary: #18181b (zinc-900)
-- Secondary: #27272a (zinc-800)
-- Accent: #3b82f6 (blue-500)
-
-## Typography
-- Font: Inter
-- Headings: 600 weight, tracking-tight
-- Body: 400 weight, leading-relaxed
-
-## Spacing
-- XS: 4px
-- SM: 8px
-- MD: 16px
-- LG: 24px
-- XL: 32px
+### 1. Install skills
+```bash
+npx skills add oxycodeai/OXYCODE-SKILLS --all
 ```
 
-### 2. Use the ui-builder skill
+### 2. Use in your AI agent
 ```bash
 # Generate a dashboard
-/ui-builder "Create a analytics dashboard with sidebar navigation"
+/ui-builder "Create an analytics dashboard with sidebar navigation"
 
 # Generate a landing page
 /ui-builder "Build a SaaS landing page with pricing table"
+
+# Audit existing UI
+/design-audit "Score this landing page for design quality"
+
+# Fix AI slop
+/anti-slop "Review this component for AI slop patterns"
 ```
 
 ### 3. Get production-ready code
-The skill will output:
 - React/TypeScript components
 - Tailwind CSS styling
 - Responsive design
-- Dark mode support
 - Accessibility attributes
-
-## Platforms Supported
-
-- ✅ Claude Code
-- ✅ OpenCode
-- ✅ Codex
-- ✅ Cursor
-- ✅ Gemini CLI
+- Design token integration
 
 ## What Makes This Different?
 
@@ -122,7 +150,8 @@ The skill will output:
 | React/TypeScript output | ❌ | ✅ |
 | Next.js integration | ❌ | ✅ |
 | Quality scoring | ❌ | ✅ |
-| Cross-platform | ❌ | ✅ |
+| 5+ agents supported | ❌ | ✅ |
+| Interactive install | ❌ | ✅ |
 
 ## Contributing
 
@@ -134,9 +163,10 @@ MIT License - see [LICENSE](LICENSE) for details.
 
 ## Support
 
-- 📧 Email: support@oxycode.ai
-- 🐦 Twitter: @oxycode_ai
-- 💬 Discord: [Join our server](https://discord.gg/oxycode)
+- 📧 Email: oxycodeai@gmail.com
+- 🐦 X (Twitter): @oxycode_ai
+- ✈️ Telegram Channel: [Join](https://t.me/OXYCODEAI)
+- 💬 Telegram Group: [Join](https://t.me/+YXwFGkYYjdJlNjE1)
 
 ---
 

package/package.json

@@ -1,40 +1,42 @@
 {
   "name": "oxycode-skills",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vercel-quality UI skills for AI coding agents. No more AI slop.",
-  "main": "index.js",
   "files": [
     "skills/**/*",
+    ".claude-plugin/**",
+    ".codex-plugin/**",
+    ".opencode/**",
+    ".agents/**",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "validate": "bash skills/design-md/scripts/validate.sh"
+    "test": "echo \"No tests yet\" && exit 0"
   },
   "keywords": [
     "ai",
     "skills",
     "ui",
+    "ux",
     "design",
+    "anti-slop",
     "claude",
     "codex",
     "opencode",
     "cursor",
+    "antigravity",
     "gemini",
+    "universal",
     "react",
     "nextjs",
     "tailwind",
     "vercel",
     "stitch",
-    "design-md",
-    "ui-builder",
-    "anti-slop",
-    "design-audit",
-    "component-architect",
-    "component-library",
     "design-system",
-    "atomic-design"
+    "atomic-design",
+    "component-architecture",
+    "accessibility"
   ],
   "author": "oxycode-ai",
   "license": "MIT",

package/skills/anti-slop/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: anti-slop
+description: Block generic AI patterns like purple gradients and centered cards
+---
+
 # anti-slop
 
 ## Description

package/skills/component-architect/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: component-architect
+description: Design scalable component architectures with atomic design
+---
+
 # component-architect
 
 ## Description

package/skills/design-audit/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: design-audit
+description: Score UI quality 0-100 with 10-dimension rubric
+---
+
 # design-audit
 
 ## Description

package/skills/design-md/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: design-md
+description: Generate and validate DESIGN.md files following Google's standard
+---
+
 # design-md
 
 ## Description

package/skills/ui-builder/SKILL.md

@@ -1,3 +1,8 @@
+---
+name: ui-builder
+description: Build production-quality UI with React, Tailwind, and Next.js
+---
+
 # ui-builder
 
 ## Description

package/skills/website-design/SKILL.md

@@ -0,0 +1,336 @@
+---
+name: website-design
+description: "Professional website design with clean typography, proper spacing, and Vercel-quality patterns. Use when building landing pages, SaaS websites, portfolios, or any modern web application."
+---
+
+# Website Design Skill
+
+## Non-Negotiable Rules
+
+1. **Background is pure black** — `#000` only. Never `#0a0a1a`, `#0d1117`, `#0f172a`, or any other near-black.
+2. **Never add gradients** — No purple-to-blue, no cyan, no gradient text. Solid colors only.
+3. **Never add glow effects** — No `shadow-cyan`, no `shadow-purple`, no colored shadows.
+4. **Never add glassmorphism** — No `backdrop-blur`, no `bg-white/5`, no frosted glass cards.
+5. **Never add doodle/pattern backgrounds** — No SVG patterns, no radial-gradient dots.
+6. **Never use Framer Motion for page load animations** — No `initial={{ opacity: 0, y: 20 }}`. No `whileInView`. No stagger animations. Content is visible immediately.
+7. **Text is left-aligned** — Never center-align hero headings. Never center-align body text.
+8. **Typography is hierarchical** — One `h1` per page, proper `h2` → `h3` → `p` hierarchy.
+
+---
+
+## Design Tokens
+
+### Colors
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--bg` | `#000` | Page background |
+| `--bg-subtle` | `#0a0a0a` | Subtle section backgrounds |
+| `--surface` | `#111` | Card backgrounds |
+| `--border` | `#222` | Borders |
+| `--text` | `#fff` | Primary text |
+| `--text-secondary` | `#888` | Secondary text |
+| `--text-muted` | `#555` | Muted text |
+| `--accent` | `#3b82f6` | Links, buttons, interactive |
+
+### Typography
+
+| Level | Font | Size | Weight | Line Height |
+|-------|------|------|--------|-------------|
+| Display | Inter/system | 48px | 700 | 1.1 |
+| H1 | Inter/system | 36px | 700 | 1.2 |
+| H2 | Inter/system | 28px | 600 | 1.3 |
+| H3 | Inter/system | 20px | 600 | 1.4 |
+| Body | Inter/system | 16px | 400 | 1.6 |
+| Small | Inter/system | 14px | 400 | 1.5 |
+
+### Spacing (8px grid)
+
+| Token | Value |
+|-------|-------|
+| `--space-1` | 4px |
+| `--space-2` | 8px |
+| `--space-3` | 12px |
+| `--space-4` | 16px |
+| `--space-6` | 24px |
+| `--space-8` | 32px |
+| `--space-12` | 48px |
+| `--space-16` | 64px |
+| `--space-24` | 96px |
+| `--space-32` | 128px |
+
+### Transitions
+
+| Type | Duration | Easing |
+|------|----------|--------|
+| Micro (hover) | 150ms | ease |
+| Default | 200ms | ease |
+| Slow | 300ms | ease-out |
+
+---
+
+## Layout Patterns
+
+### Page Container
+
+```tsx
+<div className="min-h-screen bg-black text-white">
+  <div className="max-w-6xl mx-auto px-6">
+    {/* Content */}
+  </div>
+</div>
+```
+
+### Section Spacing
+
+```tsx
+<section className="py-24">
+  <div className="max-w-6xl mx-auto px-6">
+    <h2 className="text-3xl font-bold mb-4">Section Title</h2>
+    <p className="text-gray-400 text-lg mb-12 max-w-2xl">
+      Section description text.
+    </p>
+    {/* Section content */}
+  </div>
+</section>
+```
+
+### Grid
+
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+  {/* Items */}
+</div>
+```
+
+### Two-Column Layout
+
+```tsx
+<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+  <div>
+    {/* Left column */}
+  </div>
+  <div>
+    {/* Right column */}
+  </div>
+</div>
+```
+
+---
+
+## Component Patterns
+
+### Navigation
+
+```tsx
+<nav className="border-b border-white/10">
+  <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+    <a href="/" className="text-lg font-semibold">
+      Logo
+    </a>
+    <div className="flex items-center gap-8">
+      <a href="#features" className="text-sm text-gray-400 hover:text-white transition-colors">
+        Features
+      </a>
+      <a href="#pricing" className="text-sm text-gray-400 hover:text-white transition-colors">
+        Pricing
+      </a>
+      <button className="bg-white text-black text-sm font-medium px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors">
+        Get Started
+      </button>
+    </div>
+  </div>
+</nav>
+```
+
+**Rules:**
+- No `backdrop-blur`. No glassmorphism. Solid background.
+- Border-bottom: `border-white/10` or `border-white/5`
+- Height: `h-16` (64px) standard
+- Logo: text-based, not image (unless brand logo exists)
+
+### Hero Section
+
+```tsx
+<section className="py-32">
+  <div className="max-w-6xl mx-auto px-6">
+    <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">
+      Build faster.<br />Ship better.
+    </h1>
+    <p className="text-xl text-gray-400 mb-10 max-w-2xl">
+      One paragraph that explains what this product does. Keep it under 2 lines.
+    </p>
+    <div className="flex items-center gap-4">
+      <button className="bg-white text-black text-sm font-medium px-5 py-3 rounded-lg hover:bg-gray-200 transition-colors">
+        Get Started
+      </button>
+      <button className="border border-white/20 text-white text-sm font-medium px-5 py-3 rounded-lg hover:bg-white/5 transition-colors">
+        Learn More
+      </button>
+    </div>
+  </div>
+</section>
+```
+
+**Rules:**
+- Text is left-aligned. Never centered.
+- `h1`: `text-5xl md:text-6xl font-bold tracking-tight`
+- One-line subtitle: `text-xl text-gray-400 max-w-2xl`
+- CTA buttons: Primary (white bg, black text) + Secondary (border only)
+- Max height: no `min-h-screen`. Use `py-32` for breathing room.
+
+### Feature Card
+
+```tsx
+<div className="p-6">
+  <div className="w-10 h-10 rounded-lg bg-white/5 flex items-center justify-center mb-4">
+    {/* Icon */}
+  </div>
+  <h3 className="text-base font-semibold mb-2">Feature Name</h3>
+  <p className="text-sm text-gray-400 leading-relaxed">
+    Feature description. Keep it to 2 lines max.
+  </p>
+</div>
+```
+
+**Rules:**
+- No card backgrounds. Just padding.
+- If cards needed: `border border-white/10 rounded-xl p-6`
+- Icon container: `w-10 h-10 rounded-lg bg-white/5`
+- No hover glow. No hover shadow. No colored shadows.
+
+### Pricing Card
+
+```tsx
+<div className="border border-white/10 rounded-xl p-8">
+  <h3 className="text-lg font-semibold mb-2">Pro</h3>
+  <p className="text-sm text-gray-400 mb-6">For growing teams</p>
+  <div className="mb-6">
+    <span className="text-4xl font-bold">$29</span>
+    <span className="text-gray-400 text-sm">/month</span>
+  </div>
+  <ul className="space-y-3 mb-8">
+    <li className="flex items-center gap-3 text-sm">
+      <span className="text-white">✓</span> Feature one
+    </li>
+    <li className="flex items-center gap-3 text-sm">
+      <span className="text-white">✓</span> Feature two
+    </li>
+  </ul>
+  <button className="w-full bg-white text-black text-sm font-medium py-3 rounded-lg hover:bg-gray-200 transition-colors">
+    Get Started
+  </button>
+</div>
+```
+
+**Rules:**
+- No gradient borders. No "featured" tier with glow.
+- Checkmark: `✓` character, not icon library
+- Price: `text-4xl font-bold`
+- Monthly toggle: simple `text-sm text-gray-400` toggle, not animated
+
+### Testimonial
+
+```tsx
+<div className="border border-white/10 rounded-xl p-6">
+  <p className="text-sm text-gray-300 mb-4 leading-relaxed">
+    "Quote text goes here. Keep it to 2-3 sentences max."
+  </p>
+  <div className="flex items-center gap-3">
+    <div className="w-8 h-8 rounded-full bg-white/10" />
+    <div>
+      <p className="text-sm font-medium">Name</p>
+      <p className="text-xs text-gray-500">Company, Role</p>
+    </div>
+  </div>
+</div>
+```
+
+**Rules:**
+- No star ratings (unless explicitly requested)
+- No carousel (grid is better for 3-6 testimonials)
+- Avatar: `w-8 h-8 rounded-full bg-white/10` (placeholder)
+- Quote: `text-sm text-gray-300 leading-relaxed`
+
+### Footer
+
+```tsx
+<footer className="border-t border-white/10 py-12">
+  <div className="max-w-6xl mx-auto px-6">
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+      <div>
+        <h4 className="text-sm font-semibold mb-4">Product</h4>
+        <ul className="space-y-2">
+          <li><a href="#" className="text-sm text-gray-400 hover:text-white transition-colors">Features</a></li>
+        </ul>
+      </div>
+    </div>
+    <div className="mt-12 pt-8 border-t border-white/10">
+      <p className="text-xs text-gray-500">© 2026 Company. All rights reserved.</p>
+    </div>
+  </div>
+</footer>
+```
+
+---
+
+## What NOT to Do (AI Slop)
+
+| Pattern | ❌ Never | ✅ Instead |
+|---------|---------|-----------|
+| Background | `#0a0a1a`, `#0d1117` | `#000` |
+| Accent | `#00d4ff` (cyan) | `#3b82f6` (blue) or `#fff` |
+| Gradient | `from-purple-500 to-blue-500` | Solid colors |
+| Gradient text | `bg-clip-text text-transparent` | `text-white` |
+| Glass | `backdrop-blur-md bg-white/5` | Solid bg or no bg |
+| Glow | `shadow-cyan-500/20` | `shadow-sm` or none |
+| Pattern bg | SVG doodles, radial dots | Pure `#000` |
+| Animation | `initial={{ opacity: 0 }}` | Content visible immediately |
+| Hover | `whileHover={{ scale: 1.05 }}` | `hover:bg-gray-200 transition-colors` |
+| Center align | `text-center` on hero | `text-left` |
+| Framer Motion | Page load animations | CSS transitions only |
+| Icon library | Lucide/Heroicons everywhere | Text or simple SVG |
+| Card bg | `bg-white/5` | `bg-transparent` or `bg-white/[0.02]` |
+
+---
+
+## Accessibility
+
+- `aria-label` on icon-only buttons
+- `role="navigation"` on nav
+- Focus states: `focus-visible:ring-2 focus-visible:ring-white/20`
+- Skip link: `<a href="#main" className="sr-only focus:not-sr-only">Skip to content</a>`
+- Semantic HTML: `<nav>`, `<main>`, `<footer>`, `<section>`
+
+---
+
+## Responsive
+
+- Mobile-first: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
+- Container: `max-w-6xl mx-auto px-6`
+- Text: `text-3xl md:text-5xl` for headings
+- Navigation: hamburger menu on mobile (`md:hidden`)
+
+---
+
+## Final Checklist
+
+- [ ] Background is `#000` (pure black)
+- [ ] No gradients anywhere
+- [ ] No glassmorphism / backdrop-blur
+- [ ] No glow effects / colored shadows
+- [ ] No doodle/pattern backgrounds
+- [ ] No Framer Motion page load animations
+- [ ] Text is left-aligned (not centered)
+- [ ] Typography hierarchy is correct
+- [ ] Transitions are 150-200ms max
+- [ ] Mobile responsive
+- [ ] Accessibility (aria labels, focus states)
+- [ ] Semantic HTML
+
+---
+
+## Reference Files
+
+- `references/anti-slop-rules.md` — Full list of AI slop patterns to avoid
+- `references/design-tokens.md` — Complete design token system

package/skills/website-design/references/anti-slop-rules.md

@@ -0,0 +1,103 @@
+# Anti-Slop Rules
+
+## What is AI Slop?
+
+AI slop is generic, template-driven UI that looks polished but lacks intention. It follows the same patterns regardless of context. Every dark website ends up looking identical.
+
+## The Anti-Slop Checklist
+
+### Colors
+
+| Slop | Why It's Bad | Fix |
+|------|-------------|-----|
+| `#0a0a1a` background | Looks like every other AI website | `#000` — pure black |
+| `#00d4ff` cyan accent | Overused, looks synthetic | `#3b82f6` blue or `#fff` white |
+| Purple-blue gradients | Gradients are decorative, not functional | Solid colors only |
+| Gradient text | Hard to read, looks gimmicky | `text-white` |
+| `bg-white/5` card backgrounds | Makes everything look the same | `bg-transparent` or `bg-white/[0.02]` |
+
+### Effects
+
+| Slop | Why It's Bad | Fix |
+|------|-------------|-----|
+| `backdrop-blur` glassmorphism | Overused, hurts performance | Solid backgrounds |
+| `shadow-cyan-500/20` glow | Looks like neon, not professional | `shadow-sm` or none |
+| `hover:shadow-lg hover:shadow-cyan-500/10` | Distracting, not functional | `hover:bg-gray-200 transition-colors` |
+| SVG doodle backgrounds | Clutters the page, adds no value | Pure `#000` |
+| Radial gradient dots | Looks like every AI landing page | Solid background |
+
+### Animation
+
+| Slop | Why It's Bad | Fix |
+|------|-------------|-----|
+| `initial={{ opacity: 0, y: 20 }}` | Content invisible on load | Content visible immediately |
+| `whileInView` scroll reveal | Slows down browsing | No scroll animations |
+| `staggerChildren` | Delays information delivery | Static layout |
+| `whileHover={{ scale: 1.05 }}` | Distracting micro-interactions | `transition-colors` only |
+| `whileTap={{ scale: 0.95 }}` | Over-animated | No tap animation |
+| Framer Motion for page load | Adds 40KB+ bundle for no reason | CSS transitions |
+
+### Typography
+
+| Slop | Why It's Bad | Fix |
+|------|-------------|-----|
+| `text-center` on hero | Looks like a template | `text-left` |
+| Center-aligned body text | Hard to read | `text-left` |
+| `text-6xl font-bold` everywhere | No hierarchy | Proper h1 → h2 → h3 |
+| `gradient-text` | Hard to read, looks gimmicky | `text-white` |
+
+### Layout
+
+| Slop | Why It's Bad | Fix |
+|------|-------------|-----|
+| `min-h-screen` hero | Forces full viewport | `py-32` for natural height |
+| `flex items-center justify-center` everywhere | Everything centered | Left-aligned by default |
+| `grid-cols-1 md:grid-cols-3` always | Same layout every time | Layout matches content |
+| `max-w-7xl` container | Too wide for most content | `max-w-6xl` or `max-w-4xl` |
+
+### Components
+
+| Slop | Why It's Bad | Fix |
+|------|-------------|-----|
+| Gradient CTA button | Looks like every other AI site | Solid `bg-white text-black` |
+| `border-cyan-400/30` | Colored borders look synthetic | `border-white/10` |
+| `bg-gradient-to-r from-cyan-400/20` | Gradient buttons are distracting | Solid backgrounds |
+| Lucide icons everywhere | Adds dependency, looks generic | Text or simple SVG |
+| Star ratings in testimonials | Fake social proof | Remove unless real data |
+| Carousel testimonials | Hard to browse | Grid layout |
+
+---
+
+## Detection Script
+
+Before shipping, check for these patterns:
+
+```bash
+# Check for AI slop patterns
+grep -r "#0a0a1a\|#0d1117\|#0f172a" src/
+grep -r "backdrop-blur" src/
+grep -r "from-purple\|to-blue\|from-cyan" src/
+grep -r "shadow-cyan\|shadow-purple" src/
+grep -r "initial={{" src/
+grep -r "whileInView" src/
+grep -r "staggerChildren" src/
+grep -r "text-center" src/
+```
+
+---
+
+## Why This Matters
+
+AI slop is:
+- **Boring** — Every website looks the same
+- **Slow** — Gradients, blur, and animations hurt performance
+- **Hard to read** — Low contrast, gradient text, centered layouts
+- **Unprofessional** — Looks like a template, not a product
+- **Forgettable** — Nothing distinctive, nothing memorable
+
+Vercel quality is:
+- **Fast** — No unnecessary effects
+- **Readable** — Clear typography hierarchy
+- **Professional** — Clean, minimal, intentional
+- **Memorable** — Distinctive through restraint
+- **Accessible** — Works for everyone

package/skills/website-design/references/design-tokens.md

@@ -0,0 +1,228 @@
+# Design Tokens
+
+## Colors
+
+### Backgrounds
+
+| Token | Hex | Tailwind | Use |
+|-------|-----|----------|-----|
+| `--bg` | `#000` | `bg-black` | Page background |
+| `--bg-subtle` | `#0a0a0a` | `bg-neutral-950` | Subtle section backgrounds |
+| `--surface` | `#111` | `bg-neutral-900` | Card backgrounds |
+| `--surface-hover` | `#1a1a1a` | `bg-neutral-800` | Card hover states |
+
+### Borders
+
+| Token | Hex | Tailwind | Use |
+|-------|-----|----------|-----|
+| `--border` | `#222` | `border-neutral-800` | Default borders |
+| `--border-subtle` | `rgba(255,255,255,0.05)` | `border-white/5` | Subtle separators |
+| `--border-strong` | `rgba(255,255,255,0.1)` | `border-white/10` | Stronger borders |
+
+### Text
+
+| Token | Hex | Tailwind | Use |
+|-------|-----|----------|-----|
+| `--text` | `#fff` | `text-white` | Primary text |
+| `--text-secondary` | `#888` | `text-neutral-400` | Secondary text |
+| `--text-muted` | `#555` | `text-neutral-500` | Muted text |
+| `--text-inverse` | `#000` | `text-black` | Text on light backgrounds |
+
+### Interactive
+
+| Token | Hex | Tailwind | Use |
+|-------|-----|----------|-----|
+| `--accent` | `#3b82f6` | `text-blue-500` | Links, interactive elements |
+| `--accent-hover` | `#2563eb` | `text-blue-600` | Link hover states |
+| `--focus-ring` | `rgba(59,130,246,0.5)` | `ring-blue-500/50` | Focus states |
+
+---
+
+## Typography
+
+### Font Stack
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+```
+
+Or with Inter:
+
+```css
+font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+```
+
+### Type Scale
+
+| Level | Size | Weight | Line Height | Letter Spacing | Tailwind |
+|-------|------|--------|-------------|----------------|----------|
+| Display | 48px | 700 | 1.1 | -0.02em | `text-5xl font-bold tracking-tight leading-tight` |
+| H1 | 36px | 700 | 1.2 | -0.01em | `text-4xl font-bold tracking-tight` |
+| H2 | 28px | 600 | 1.3 | 0 | `text-2xl font-semibold` |
+| H3 | 20px | 600 | 1.4 | 0 | `text-xl font-semibold` |
+| Body | 16px | 400 | 1.6 | 0 | `text-base` |
+| Body Large | 18px | 400 | 1.6 | 0 | `text-lg` |
+| Small | 14px | 400 | 1.5 | 0 | `text-sm` |
+| Caption | 12px | 400 | 1.5 | 0 | `text-xs` |
+
+### Line Length
+
+- Body text: `max-w-2xl` (672px) — optimal reading line length
+- Headings: `max-w-3xl` or `max-w-4xl`
+- Never exceed `max-w-5xl` for text content
+
+---
+
+## Spacing
+
+### 8px Grid
+
+All spacing should be multiples of 8px (or 4px for tight spacing).
+
+| Token | Value | Tailwind |
+|-------|-------|----------|
+| `--space-0` | 0 | `p-0` / `m-0` |
+| `--space-1` | 4px | `p-1` / `m-1` |
+| `--space-2` | 8px | `p-2` / `m-2` |
+| `--space-3` | 12px | `p-3` / `m-3` |
+| `--space-4` | 16px | `p-4` / `m-4` |
+| `--space-5` | 20px | `p-5` / `m-5` |
+| `--space-6` | 24px | `p-6` / `m-6` |
+| `--space-8` | 32px | `p-8` / `m-8` |
+| `--space-10` | 40px | `p-10` / `m-10` |
+| `--space-12` | 48px | `p-12` / `m-12` |
+| `--space-16` | 64px | `p-16` / `m-16` |
+| `--space-20` | 80px | `p-20` / `m-20` |
+| `--space-24` | 96px | `p-24` / `m-24` |
+| `--space-32` | 128px | `p-32` / `m-32` |
+
+### Section Spacing
+
+| Context | Spacing | Tailwind |
+|---------|---------|----------|
+| Between sections | 96px | `py-24` |
+| Section to content | 48px | `mb-12` |
+| Between elements | 24px | `gap-6` or `mb-6` |
+| Between tight elements | 16px | `gap-4` or `mb-4` |
+| Inside cards | 24px | `p-6` |
+
+---
+
+## Borders
+
+### Border Radius
+
+| Token | Value | Tailwind | Use |
+|-------|-------|----------|-----|
+| `--radius-sm` | 6px | `rounded-md` | Buttons, inputs |
+| `--radius-md` | 8px | `rounded-lg` | Cards, small containers |
+| `--radius-lg` | 12px | `rounded-xl` | Large cards, modals |
+| `--radius-full` | 9999px | `rounded-full` | Avatars, pills |
+
+### Border Width
+
+| Token | Value | Tailwind | Use |
+|-------|-------|----------|-----|
+| Default | 1px | `border` | Standard borders |
+| Strong | 2px | `border-2` | Emphasis borders |
+
+---
+
+## Shadows
+
+| Token | Value | Tailwind | Use |
+|-------|-------|----------|-----|
+| None | `none` | `shadow-none` | Default |
+| Small | `0 1px 2px rgba(0,0,0,0.5)` | `shadow-sm` | Subtle elevation |
+| Default | `0 4px 6px rgba(0,0,0,0.5)` | `shadow` | Cards |
+| Large | `0 10px 15px rgba(0,0,0,0.5)` | `shadow-lg` | Modals, dropdowns |
+
+**Never use colored shadows.** No `shadow-cyan`, no `shadow-purple`.
+
+---
+
+## Transitions
+
+| Token | Duration | Easing | Tailwind |
+|-------|----------|--------|----------|
+| Micro | 150ms | ease | `transition duration-150` |
+| Default | 200ms | ease | `transition` |
+| Slow | 300ms | ease-out | `transition duration-300` |
+
+### Transition Properties
+
+| Element | Property | Tailwind |
+|---------|----------|----------|
+| Background | `background-color` | `transition-colors` |
+| Text color | `color` | `transition-colors` |
+| Border | `border-color` | `transition-colors` |
+| Opacity | `opacity` | `transition-opacity` |
+| Transform | `transform` | `transition-transform` |
+| Shadow | `box-shadow` | `transition-shadow` |
+
+---
+
+## Breakpoints
+
+| Name | Width | Tailwind |
+|------|-------|----------|
+| sm | 640px | `sm:` |
+| md | 768px | `md:` |
+| lg | 1024px | `lg:` |
+| xl | 1280px | `xl:` |
+| 2xl | 1536px | `2xl:` |
+
+---
+
+## Z-Index
+
+| Token | Value | Tailwind | Use |
+|-------|-------|----------|-----|
+| Behind | -1 | `-z-10` | Background elements |
+| Default | 0 | `z-0` | Normal flow |
+| Above | 10 | `z-10` | Sticky elements |
+| Dropdown | 20 | `z-20` | Dropdowns, popovers |
+| Modal | 30 | `z-30` | Modals, overlays |
+| Toast | 40 | `z-40` | Toast notifications |
+| Skip link | 50 | `z-50` | Skip to content |
+
+---
+
+## Container Widths
+
+| Name | Max Width | Tailwind | Use |
+|------|-----------|----------|-----|
+| Narrow | 640px | `max-w-xl` | Articles, forms |
+| Default | 768px | `max-w-2xl` | Blog posts |
+| Wide | 1024px | `max-w-4xl` | Content pages |
+| Extra Wide | 1280px | `max-w-6xl` | Landing pages, dashboards |
+| Full | 1536px | `max-w-7xl` | Full-width layouts |
+
+---
+
+## Example: Complete Tailwind Config
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        bg: '#000',
+        surface: '#111',
+        border: '#222',
+        muted: '#555',
+      },
+      maxWidth: {
+        'content': '672px',
+        'prose': '768px',
+      },
+      spacing: {
+        '18': '4.5rem',
+        '88': '22rem',
+        '128': '32rem',
+      },
+    },
+  },
+};
+```

package/index.js

@@ -1,17 +0,0 @@
-/**
- * oxycode-skills
- * 
- * Vercel-quality UI skills for AI coding agents.
- * No more AI slop.
- * 
- * @package oxycode-skills
- * @author oxycode-ai
- * @license MIT
- */
-
-const skills = {
-  'ui-builder': require('./skills/ui-builder/SKILL.md'),
-  'design-md': require('./skills/design-md/SKILL.md'),
-};
-
-module.exports = skills;