oxycode-skills 1.0.0

package/skills/design-md/references/design-md-spec.md

@@ -0,0 +1,267 @@
+# DESIGN.md Specification
+
+## Overview
+
+DESIGN.md is an open-source format created by Google Labs Code for defining design systems in a human-readable, machine-parseable format.
+
+## Purpose
+
+- Single source of truth for design decisions
+- Enables AI tools to understand design systems
+- Ensures consistency across projects
+- Facilitates design-to-code workflows
+
+## File Structure
+
+```markdown
+# [Project Name] Design System
+
+## Overview
+Brief description of the design system purpose and scope.
+
+## Colors
+Color definitions organized by category.
+
+## Typography
+Font families, sizes, weights, and line heights.
+
+## Spacing
+Consistent spacing units.
+
+## Borders
+Border radius and width definitions.
+
+## Shadows
+Box shadow definitions.
+
+## Breakpoints
+Responsive breakpoint values.
+
+## Components
+Component-specific design tokens.
+```
+
+## Required Sections
+
+### 1. Overview
+- Project name
+- Design philosophy
+- Target audience
+- Platform(s)
+
+### 2. Colors
+Must include:
+- Primary palette (50-900 shades)
+- Neutral palette (50-900 shades)
+- Semantic colors (success, warning, error, info)
+- Background/foreground colors
+
+Format:
+```
+- [name]: [hex value]
+```
+
+### 3. Typography
+Must include:
+- Font families (headings, body, mono)
+- Type scale with sizes, line-heights, weights
+- Font weight definitions
+
+Format:
+```
+- [level]: [size] / [line-height] / [weight] weight
+```
+
+### 4. Spacing
+Must include:
+- Consistent unit system
+- Named spacing values (xs, sm, md, lg, xl, etc.)
+
+Format:
+```
+- [name]: [value]
+```
+
+### 5. Borders
+Must include:
+- Border radius values
+- Border width values (optional)
+
+### 6. Shadows
+Must include:
+- Box shadow definitions
+- Organized by elevation level
+
+### 7. Breakpoints
+Must include:
+- Mobile-first breakpoint values
+- Standard breakpoints (sm, md, lg, xl, 2xl)
+
+### 8. Components (Optional)
+Component-specific tokens for:
+- Buttons
+- Cards
+- Inputs
+- Navigation
+- etc.
+
+## Validation Rules
+
+### Colors
+- Must be valid hex format (#RRGGBB or #RRGGBBAA)
+- Must include enough shades for light/dark themes
+
+### Typography
+- Must specify font-family
+- Must include size, line-height, and weight
+- Should follow type scale ratio (1.25 or 1.333)
+
+### Spacing
+- Must use consistent unit (px, rem, or em)
+- Should follow a scale (4, 8, 16, 24, 32, etc.)
+
+### Breakpoints
+- Must be in ascending order
+- Must start with mobile-first (< 640px)
+
+## Example: Minimal DESIGN.md
+
+```markdown
+# MyApp Design System
+
+## Colors
+- primary: #3b82f6
+- background: #ffffff
+- text: #111827
+
+## Typography
+- font-family: Inter, system-ui, sans-serif
+- heading: 24px / 32px / 600 weight
+- body: 16px / 24px / 400 weight
+
+## Spacing
+- sm: 8px
+- md: 16px
+- lg: 24px
+
+## Breakpoints
+- md: 768px
+- lg: 1024px
+```
+
+## Example: Full DESIGN.md
+
+```markdown
+# Enterprise Dashboard Design System
+
+## Overview
+A comprehensive design system for enterprise analytics dashboards.
+Designed for data-heavy interfaces with dark theme support.
+
+## Colors
+
+### Primary Palette
+- primary-50: #eff6ff
+- primary-100: #dbeafe
+- primary-200: #bfdbfe
+- primary-300: #93c5fd
+- primary-400: #60a5fa
+- primary-500: #3b82f6
+- primary-600: #2563eb
+- primary-700: #1d4ed8
+- primary-800: #1e40af
+- primary-900: #1e3a8a
+
+### Neutral Palette
+- neutral-50: #fafafa
+- neutral-100: #f4f4f5
+- neutral-200: #e4e4e7
+- neutral-300: #d4d4d8
+- neutral-400: #a1a1aa
+- neutral-500: #71717a
+- neutral-600: #52525b
+- neutral-700: #3f3f46
+- neutral-800: #27272a
+- neutral-900: #18181b
+
+### Semantic Colors
+- success: #22c55e
+- warning: #f59e0b
+- error: #ef4444
+- info: #3b82f6
+
+## Typography
+
+### Font Family
+- Headings: Inter, system-ui, sans-serif
+- Body: Inter, system-ui, sans-serif
+- Mono: JetBrains Mono, monospace
+
+### Type Scale
+- display-lg: 36px / 40px / 700 weight
+- display-md: 30px / 36px / 700 weight
+- display-sm: 24px / 32px / 600 weight
+- heading-lg: 20px / 28px / 600 weight
+- heading-md: 16px / 24px / 600 weight
+- heading-sm: 14px / 20px / 600 weight
+- body-lg: 16px / 24px / 400 weight
+- body-md: 14px / 20px / 400 weight
+- body-sm: 12px / 16px / 400 weight
+- code: 14px / 20px / 400 weight
+
+## Spacing
+- xs: 4px
+- sm: 8px
+- md: 16px
+- lg: 24px
+- xl: 32px
+- 2xl: 48px
+- 3xl: 64px
+
+## Borders
+- radius-sm: 4px
+- radius-md: 8px
+- radius-lg: 12px
+- radius-xl: 16px
+- radius-full: 9999px
+
+## Shadows
+- shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)
+- shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
+- shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
+- shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
+
+## Breakpoints
+- sm: 640px
+- md: 768px
+- lg: 1024px
+- xl: 1280px
+- 2xl: 1536px
+
+## Components
+
+### Button
+- Primary: primary-600 bg, white text, radius-md
+- Secondary: neutral-100 bg, neutral-900 text, radius-md
+- Ghost: transparent bg, neutral-600 text, radius-md
+
+### Card
+- Background: white
+- Border: neutral-200
+- Radius: lg
+- Shadow: md
+- Padding: lg
+
+### Input
+- Background: white
+- Border: neutral-300
+- Focus border: primary-500
+- Radius: md
+- Padding: sm md
+```
+
+## Resources
+
+- [GitHub: google-labs-code/design.md](https://github.com/google-labs-code/design.md)
+- [Stitch by Google](https://stitch.withgoogle.com)
+- [Tailwind CSS](https://tailwindcss.com)

package/skills/design-md/scripts/validate.sh

@@ -0,0 +1,134 @@
+#!/bin/bash
+
+# DESIGN.md Validator
+# Checks if a DESIGN.md file follows the specification
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Default file
+FILE="${1:-DESIGN.md}"
+
+echo "🔍 Validating $FILE..."
+echo ""
+
+# Check if file exists
+if [ ! -f "$FILE" ]; then
+    echo -e "${RED}❌ Error: $FILE not found${NC}"
+    exit 1
+fi
+
+# Initialize counters
+ERRORS=0
+WARNINGS=0
+
+# Check required sections
+check_section() {
+    local section="$1"
+    if grep -qi "## $section" "$FILE"; then
+        echo -e "${GREEN}✅ Found: $section${NC}"
+    else
+        echo -e "${RED}❌ Missing: $section${NC}"
+        ((ERRORS++))
+    fi
+}
+
+# Check for color format
+check_colors() {
+    echo ""
+    echo "Checking color formats..."
+    
+    # Check for valid hex colors
+    if grep -qE '#[0-9A-Fa-f]{6}' "$FILE"; then
+        echo -e "${GREEN}✅ Valid hex colors found${NC}"
+    else
+        echo -e "${YELLOW}⚠️  No hex colors found (may be using other format)${NC}"
+        ((WARNINGS++))
+    fi
+    
+    # Check for invalid color formats
+    if grep -qE 'rgb\(' "$FILE"; then
+        echo -e "${YELLOW}⚠️  RGB format detected (hex recommended)${NC}"
+        ((WARNINGS++))
+    fi
+}
+
+# Check for typography
+check_typography() {
+    echo ""
+    echo "Checking typography..."
+    
+    if grep -qi "font-family" "$FILE"; then
+        echo -e "${GREEN}✅ Font family defined${NC}"
+    else
+        echo -e "${YELLOW}⚠️  No font family defined${NC}"
+        ((WARNINGS++))
+    fi
+    
+    if grep -qiE "(px|rem|em)" "$FILE"; then
+        echo -e "${GREEN}✅ Font sizes with units found${NC}"
+    else
+        echo -e "${YELLOW}⚠️  No font sizes with units found${NC}"
+        ((WARNINGS++))
+    fi
+}
+
+# Check for spacing
+check_spacing() {
+    echo ""
+    echo "Checking spacing..."
+    
+    if grep -qiE "(xs|sm|md|lg|xl)" "$FILE"; then
+        echo -e "${GREEN}✅ Spacing scale found${NC}"
+    else
+        echo -e "${YELLOW}⚠️  No spacing scale found${NC}"
+        ((WARNINGS++))
+    fi
+}
+
+# Check for breakpoints
+check_breakpoints() {
+    echo ""
+    echo "Checking breakpoints..."
+    
+    if grep -qiE "(sm|md|lg|xl)" "$FILE"; then
+        echo -e "${GREEN}✅ Breakpoints found${NC}"
+    else
+        echo -e "${YELLOW}⚠️  No breakpoints found${NC}"
+        ((WARNINGS++))
+    fi
+}
+
+# Run checks
+echo "📋 Checking required sections..."
+check_section "Colors"
+check_section "Typography"
+check_section "Spacing"
+check_section "Breakpoints"
+
+check_colors
+check_typography
+check_spacing
+check_breakpoints
+
+# Summary
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "📊 Validation Summary"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+if [ $ERRORS -eq 0 ] && [ $WARNINGS -eq 0 ]; then
+    echo -e "${GREEN}✅ Perfect! No errors or warnings.${NC}"
+    exit 0
+elif [ $ERRORS -eq 0 ]; then
+    echo -e "${YELLOW}⚠️  $WARNINGS warning(s) found.${NC}"
+    exit 0
+else
+    echo -e "${RED}❌ $ERRORS error(s) and $WARNINGS warning(s) found.${NC}"
+    exit 1
+fi

package/skills/ui-builder/README.md

@@ -0,0 +1,169 @@
+# ui-builder Skill
+
+> Generate production-ready UI components and pages from text prompts. Creates Vercel-quality React/TypeScript code with Tailwind CSS.
+
+## What Does This Skill Do?
+
+The `ui-builder` skill teaches AI coding agents to:
+1. **Generate** UI components from text descriptions
+2. **Create** full pages (dashboards, landing pages, etc.)
+3. **Apply** design tokens from DESIGN.md files
+4. **Ensure** Vercel-quality output (no AI slop)
+
+## Why Use This Skill?
+
+Most AI-generated UI looks bad:
+- Purple/blue gradients everywhere
+- Centered everything
+- Rainbow colors
+- Oversized border radius
+- Generic Inter font
+
+This skill teaches AI to generate clean, modern UI like Vercel, Linear, or Stripe.
+
+## Quick Start
+
+### Generate a Component
+```bash
+/ui-builder "Create a stats card with title, value, and percentage change"
+```
+
+### Generate a Page
+```bash
+/ui-builder "Build a SaaS landing page with hero, features, pricing, and testimonials"
+```
+
+### Generate with Design System
+```bash
+/ui-builder "Create a dashboard using the design tokens from DESIGN.md"
+```
+
+## Features
+
+- ✅ React/TypeScript output
+- ✅ Tailwind CSS styling
+- ✅ Responsive design
+- ✅ Accessibility attributes
+- ✅ Design token support
+- ✅ No AI slop patterns
+- ✅ Production-ready code
+
+## File Structure
+
+```
+skills/ui-builder/
+├── SKILL.md                    # Main skill instructions
+├── README.md                   # This file
+├── references/
+│   ├── component-patterns.md   # Reusable component patterns
+│   ├── layout-system.md        # Grid and flexbox patterns
+│   └── polish-checklist.md     # Quality checklist
+├── examples/
+│   ├── landing-page.md         # Landing page example
+│   └── dashboard.md            # Dashboard example
+└── templates/
+    └── starter-components/     # Starter templates
+```
+
+## Component Patterns
+
+### Card
+```tsx
+<div className="bg-white border border-zinc-200 rounded-lg p-6 shadow-sm">
+  {children}
+</div>
+```
+
+### Button
+```tsx
+<button className="px-4 py-2 text-sm font-medium text-white bg-zinc-900 rounded-lg hover:bg-zinc-800 transition-colors">
+  Click me
+</button>
+```
+
+### Input
+```tsx
+<input
+  type="text"
+  className="w-full px-3 py-2 text-sm border border-zinc-300 rounded-lg focus:ring-2 focus:ring-zinc-500 focus:border-transparent"
+  placeholder="Enter text..."
+/>
+```
+
+## Layout Patterns
+
+### Dashboard
+```tsx
+<div className="flex h-screen">
+  <aside className="w-64 border-r border-zinc-200">Sidebar</aside>
+  <main className="flex-1 p-6">Content</main>
+</div>
+```
+
+### Landing Page
+```tsx
+<div className="min-h-screen">
+  <nav>Navigation</nav>
+  <section>Hero</section>
+  <section>Features</section>
+  <footer>Footer</footer>
+</div>
+```
+
+## Anti-Patterns to Avoid
+
+### ❌ Don't Use Gradients
+```tsx
+// BAD
+<div className="bg-gradient-to-br from-purple-500 to-blue-500">
+
+// GOOD
+<div className="bg-zinc-900">
+```
+
+### ❌ Don't Center Everything
+```tsx
+// BAD
+<div className="text-center">
+
+// GOOD (when appropriate)
+<div className="text-left">
+```
+
+### ❌ Don't Use Rainbow Colors
+```tsx
+// BAD
+<div className="text-red-500 text-blue-500 text-green-500">
+
+// GOOD
+<div className="text-zinc-100">
+```
+
+## Examples
+
+See [examples/landing-page.md](examples/landing-page.md) for a complete landing page example.
+
+See [examples/dashboard.md](examples/dashboard.md) for a complete dashboard example.
+
+## Validation Checklist
+
+Before delivering UI code, verify:
+- [ ] Uses design tokens (no hardcoded values)
+- [ ] Semantic HTML elements
+- [ ] Accessibility attributes
+- [ ] Responsive design
+- [ ] TypeScript types
+- [ ] No anti-patterns
+- [ ] Consistent spacing
+- [ ] Proper color hierarchy
+
+## Resources
+
+- [Vercel Design System](https://vercel.com/design)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [Tailwind CSS](https://tailwindcss.com)
+- [DESIGN.md Spec](https://github.com/google-labs-code/design.md)
+
+## Contributing
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.