oxycode-skills 1.0.0

package/skills/design-md/SKILL.md

@@ -0,0 +1,262 @@
+# design-md
+
+## Description
+
+Generate and validate DESIGN.md files following Google's open-source design system standard. DESIGN.md defines design tokens (colors, typography, spacing, shadows) that ensure consistent UI across projects.
+
+## Trigger
+
+Use this skill when:
+- User asks to create a design system
+- User wants to generate DESIGN.md
+- User needs to validate an existing DESIGN.md
+- User says "create design tokens" or "set up design system"
+
+## Instructions
+
+### Step 1: Understand the Project
+
+Before generating DESIGN.md, understand:
+- Project type (dashboard, landing page, ecommerce, etc.)
+- Brand colors (if provided)
+- Target audience
+- Platform (web, mobile, both)
+
+### Step 2: Generate DESIGN.md
+
+Create a DESIGN.md file with these sections:
+
+```markdown
+# [Project Name] Design System
+
+## Overview
+Brief description of the design system.
+
+## 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
+
+### Navigation
+- Background: white
+- Border bottom: neutral-200
+- Height: 64px
+```
+
+### Step 3: Validate DESIGN.md
+
+Check the DESIGN.md for:
+- All required sections present
+- Color values are valid hex
+- Typography has font families and sizes
+- Spacing is consistent
+- Breakpoints are standard
+
+### Step 4: Convert to Tailwind Config
+
+Generate a tailwind.config.js that uses the DESIGN.md tokens:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          // ... all values from DESIGN.md
+        },
+        neutral: {
+          50: '#fafafa',
+          // ... all values from DESIGN.md
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      fontSize: {
+        'display-lg': ['36px', { lineHeight: '40px', fontWeight: '700' }],
+        // ... all values from DESIGN.md
+      },
+      spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+        '2xl': '48px',
+        '3xl': '64px',
+      },
+      borderRadius: {
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+      },
+      boxShadow: {
+        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+## Examples
+
+### Example 1: Dashboard Design System
+
+**Input:**
+"Create a design system for a dark-themed analytics dashboard"
+
+**Output:**
+```markdown
+# Analytics Dashboard Design System
+
+## Colors
+- background: #09090b (zinc-950)
+- surface: #18181b (zinc-900)
+- border: #27272a (zinc-800)
+- text-primary: #fafafa (zinc-50)
+- text-secondary: #a1a1aa (zinc-400)
+- accent: #3b82f6 (blue-500)
+```
+
+### Example 2: Ecommerce Design System
+
+**Input:**
+"Generate a design system for a modern ecommerce site"
+
+**Output:**
+```markdown
+# Ecommerce Design System
+
+## Colors
+- background: #ffffff (white)
+- surface: #f9fafb (gray-50)
+- border: #e5e7eb (gray-200)
+- primary: #111827 (gray-900)
+- accent: #2563eb (blue-600)
+- success: #059669 (emerald-600)
+```
+
+## References
+
+- [Google DESIGN.md Spec](https://github.com/google-labs-code/design.md)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [shadcn/ui](https://ui.shadcn.com/)
+
+## Validation Rules
+
+1. **Colors**: Must be valid hex (#RRGGBB or #RRGGBBAA)
+2. **Typography**: Must include font-family, size, line-height, weight
+3. **Spacing**: Must be consistent unit (px, rem, or em)
+4. **Breakpoints**: Must follow mobile-first approach
+5. **Components**: Must define variant styles

package/skills/design-md/examples/bad-design.md

@@ -0,0 +1,195 @@
+# Bad DESIGN.md Examples (What NOT To Do)
+
+## ❌ Example 1: Incomplete Design System
+
+```markdown
+# My Design System
+
+## Colors
+- blue: #3b82f6
+- red: #ef4444
+- green: #22c55e
+
+## Font
+- font: Inter
+```
+
+### Why This Is Bad:
+❌ No color hierarchy (no shades)
+❌ No semantic meaning for colors
+❌ No typography scale
+❌ No spacing system
+❌ No component definitions
+❌ Missing essential sections
+
+---
+
+## ❌ Example 2: Too Many Colors
+
+```markdown
+# Rainbow Design System
+
+## Colors
+- red: #ff0000
+- orange: #ff8800
+- yellow: #ffff00
+- green: #00ff00
+- cyan: #00ffff
+- blue: #0000ff
+- purple: #8800ff
+- pink: #ff00ff
+- maroon: #800000
+- olive: #808000
+- lime: #00ff00
+- aqua: #00ffff
+- teal: #008080
+- navy: #000080
+- fuchsia: #ff00ff
+```
+
+### Why This Is Bad:
+❌ Too many colors (overwhelming)
+❌ No primary/secondary hierarchy
+❌ No semantic meaning
+❌ Hard to maintain
+❌ Inconsistent naming
+
+---
+
+## ❌ Example 3: Inconsistent Spacing
+
+```markdown
+# Spacing System
+
+## Sizes
+- tiny: 3px
+- small: 7px
+- medium: 15px
+- large: 23px
+- huge: 41px
+- massive: 67px
+```
+
+### Why This Is Bad:
+❌ Inconsistent values (not on a grid)
+❌ Arbitrary names
+❌ Not following standard scale (4, 8, 16, 24, etc.)
+❌ Hard to remember
+
+---
+
+## ❌ Example 4: No Typography Scale
+
+```markdown
+# Typography
+
+## Font
+- font: Inter
+
+## Sizes
+- small: 12px
+- medium: 16px
+- large: 20px
+- extra large: 24px
+- huge: 32px
+```
+
+### Why This Is Bad:
+❌ No line-height defined
+❌ No font-weight defined
+❌ No font-family for different contexts
+❌ Not following type scale ratio
+❌ Missing code/mono font
+
+---
+
+## ❌ Example 5: Missing Dark Theme
+
+```markdown
+# Light Theme Only
+
+## Colors
+- background: #ffffff
+- text: #000000
+- primary: #007bff
+- secondary: #6c757d
+```
+
+### Why This Is Bad:
+❌ No dark theme support
+❌ No semantic colors (success, error, warning)
+❌ No neutral palette
+❌ Limited use cases
+
+---
+
+## ❌ Example 6: Random Breakpoints
+
+```markdown
+# Breakpoints
+
+## Sizes
+- xs: 320px
+- sm: 480px
+- md: 600px
+- lg: 768px
+- xl: 900px
+- xxl: 1024px
+- xxxl: 1200px
+- huge: 1440px
+```
+
+### Why This Is Bad:
+❌ Non-standard breakpoints
+❌ Too many breakpoints
+❌ Not mobile-first
+❌ Hard to remember
+❌ Inconsistent naming
+
+---
+
+## ❌ Example 7: No Component Tokens
+
+```markdown
+# Design System
+
+## Colors
+- primary: #3b82f6
+- background: #ffffff
+
+## Typography
+- font: Inter
+- size: 16px
+```
+
+### Why This Is Bad:
+❌ No component-specific tokens
+❌ No button styles
+❌ No card styles
+❌ No input styles
+❌ Forces developers to guess
+
+---
+
+## Summary: What Makes a Bad DESIGN.md
+
+| Issue | Impact |
+|-------|--------|
+| Missing sections | Incomplete design system |
+| Too many colors | Visual chaos |
+| Inconsistent spacing | Unpredictable layouts |
+| No typography scale | Inconsistent text |
+| No dark theme | Limited use cases |
+| Random breakpoints | Responsive chaos |
+| No component tokens | Developer confusion |
+
+---
+
+## How To Fix
+
+1. **Add all required sections** (Colors, Typography, Spacing, etc.)
+2. **Use consistent naming** (primary-500, neutral-100, etc.)
+3. **Follow standard scales** (4, 8, 16, 24 for spacing)
+4. **Include dark theme** (background-dark, text-dark, etc.)
+5. **Define component tokens** (button-primary, card-bg, etc.)
+6. **Use standard breakpoints** (sm: 640, md: 768, lg: 1024)

package/skills/design-md/examples/good-design.md

@@ -0,0 +1,250 @@
+# Good DESIGN.md Examples
+
+## Example 1: Dark Dashboard
+
+```markdown
+# Analytics Dashboard Design System
+
+## Overview
+Dark-themed analytics dashboard for data visualization.
+Optimized for long viewing sessions with reduced eye strain.
+
+## Colors
+
+### Background
+- background-primary: #09090b (zinc-950)
+- background-secondary: #18181b (zinc-900)
+- background-tertiary: #27272a (zinc-800)
+
+### Text
+- text-primary: #fafafa (zinc-50)
+- text-secondary: #a1a1aa (zinc-400)
+- text-tertiary: #71717a (zinc-500)
+
+### Borders
+- border-primary: #27272a (zinc-800)
+- border-secondary: #3f3f46 (zinc-700)
+
+### Accent
+- accent-primary: #3b82f6 (blue-500)
+- accent-hover: #2563eb (blue-600)
+
+### Semantic
+- success: #22c55e (green-500)
+- warning: #f59e0b (amber-500)
+- error: #ef4444 (red-500)
+
+## Typography
+
+### Font Family
+- headings: Inter, system-ui, sans-serif
+- body: Inter, system-ui, sans-serif
+- mono: JetBrains Mono, monospace
+
+### Type Scale
+- display: 30px / 36px / 700 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
+
+## Borders
+- radius-sm: 4px
+- radius-md: 8px
+- radius-lg: 12px
+
+## Breakpoints
+- sm: 640px
+- md: 768px
+- lg: 1024px
+```
+
+### Why This Is Good:
+✅ Clear color hierarchy (primary, secondary, tertiary)
+✅ Consistent spacing scale
+✅ Proper typography with weights
+✅ Dark theme optimized
+✅ Semantic colors defined
+
+---
+
+## Example 2: Light SaaS Landing Page
+
+```markdown
+# SaaS Landing Page Design System
+
+## Overview
+Clean, modern landing page for B2B SaaS product.
+Focus on trust signals and conversion.
+
+## Colors
+
+### Background
+- background: #ffffff (white)
+- background-alt: #f9fafb (gray-50)
+
+### Text
+- text-primary: #111827 (gray-900)
+- text-secondary: #6b7280 (gray-500)
+- text-tertiary: #9ca3af (gray-400)
+
+### Primary
+- primary: #2563eb (blue-600)
+- primary-hover: #1d4ed8 (blue-700)
+
+### Secondary
+- secondary: #f3f4f6 (gray-100)
+- secondary-hover: #e5e7eb (gray-200)
+
+### Border
+- border: #e5e7eb (gray-200)
+
+### Semantic
+- success: #059669 (emerald-600)
+- warning: #d97706 (amber-600)
+- error: #dc2626 (red-600)
+
+## Typography
+
+### Font Family
+- headings: Inter, system-ui, sans-serif
+- body: Inter, system-ui, sans-serif
+
+### Type Scale
+- display: 48px / 56px / 700 weight
+- heading-lg: 30px / 36px / 700 weight
+- heading-md: 24px / 32px / 600 weight
+- heading-sm: 20px / 28px / 600 weight
+- body-lg: 18px / 28px / 400 weight
+- body-md: 16px / 24px / 400 weight
+- body-sm: 14px / 20px / 400 weight
+
+## Spacing
+- xs: 4px
+- sm: 8px
+- md: 16px
+- lg: 24px
+- xl: 32px
+- 2xl: 48px
+- 3xl: 64px
+- 4xl: 96px
+
+## 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)
+
+## Breakpoints
+- sm: 640px
+- md: 768px
+- lg: 1024px
+- xl: 1280px
+
+## Components
+
+### Button
+- Primary: primary bg, white text, radius-full, padding 12px 24px
+- Secondary: secondary bg, text-primary text, radius-full, padding 12px 24px
+- Ghost: transparent bg, text-primary text, radius-full, padding 12px 24px
+
+### Card
+- Background: white
+- Border: border
+- Radius: lg
+- Shadow: md
+- Padding: lg
+
+### Badge
+- Background: primary with 10% opacity
+- Text: primary
+- Radius: full
+- Padding: 4px 12px
+```
+
+### Why This Is Good:
+✅ Light theme optimized
+✅ Clear visual hierarchy
+✅ Generous spacing for landing page
+✅ Component variants defined
+✅ Conversion-focused (trust signals)
+
+---
+
+## Example 3: Mobile-First App
+
+```markdown
+# Mobile App Design System
+
+## Overview
+iOS/Android mobile app design system.
+Optimized for touch interactions and small screens.
+
+## Colors
+
+### Background
+- background: #ffffff (white)
+- background-secondary: #f9fafb (gray-50)
+
+### Text
+- text-primary: #111827 (gray-900)
+- text-secondary: #6b7280 (gray-500)
+
+### Primary
+- primary: #8b5cf6 (violet-500)
+- primary-hover: #7c3aed (violet-600)
+
+### Border
+- border: #e5e7eb (gray-200)
+
+## Typography
+
+### Font Family
+- body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
+
+### Type Scale
+- heading-lg: 28px / 34px / 700 weight
+- heading-md: 22px / 28px / 600 weight
+- heading-sm: 18px / 24px / 600 weight
+- body-lg: 17px / 24px / 400 weight
+- body-md: 15px / 22px / 400 weight
+- body-sm: 13px / 18px / 400 weight
+
+## Spacing
+- xs: 4px
+- sm: 8px
+- md: 16px
+- lg: 24px
+- xl: 32px
+
+## Touch Targets
+- minimum: 44px x 44px
+- comfortable: 48px x 48px
+
+## Breakpoints
+- sm: 375px (iPhone SE)
+- md: 390px (iPhone 14)
+- lg: 428px (iPhone 14 Pro Max)
+```
+
+### Why This Is Good:
+✅ Mobile-specific touch targets
+✅ System font stack for performance
+✅ Larger body text for readability
+✅ Proper spacing for thumbs