opencodekit 0.15.20 → 0.16.0

package/dist/template/.opencode/commands/design-audit.md

@@ -1,480 +0,0 @@
----
-description: Audit design system from screenshots or codebase
-argument-hint: "<screenshots-path|codebase|both> [output: tokens|report|both] [--quick|--deep]"
-agent: vision
-model: proxypal/gemini-3-pro-preview
-subtask: true
----
-
-# Design Audit: $ARGUMENTS
-
-## Load Beads Skill
-
-```typescript
-skill({ name: "beads" });
-```
-
-## Phase 1: Source Detection & File Discovery
-
-Parse `$ARGUMENTS`:
-
-| Input            | Action                                     |
-| ---------------- | ------------------------------------------ |
-| Screenshots path | Analyze images for visual inventory        |
-| `codebase`       | Search code for design tokens and patterns |
-| `both`           | Screenshots + codebase, then compare       |
-
-**Output format** (default: `both`):
-
-- `tokens` - Design tokens JSON only
-- `report` - Markdown audit report only
-- `both` - Full audit with tokens and report
-
-**Depth** (default: `--deep`):
-
-- `--quick` - Top-level scan, major issues only (~5-10 min)
-- `--deep` - Comprehensive audit with all categories (~20-30 min)
-
----
-
-## Phase 2: File Discovery (for codebase audit)
-
-Search for design-related files:
-
-```typescript
-glob({ pattern: "**/tailwind.config.{js,ts,mjs}" });
-glob({ pattern: "**/globals.css" });
-glob({ pattern: "**/variables.css" });
-glob({ pattern: "**/tokens.{json,js,ts}" });
-glob({ pattern: "**/theme.{js,ts}" });
-glob({ pattern: "**/*.css.ts" }); // vanilla-extract, etc.
-
-glob({ pattern: "**/components/**/*.{tsx,jsx,vue}" });
-```
-
-**Detect design system in use:**
-
-| Pattern Found                | System           |
-| ---------------------------- | ---------------- |
-| `@shadcn/ui` in package.json | shadcn/ui        |
-| `@mui/material`              | Material UI      |
-| `@radix-ui/*`                | Radix Primitives |
-| `@chakra-ui/*`               | Chakra UI        |
-| Tailwind config only         | Custom Tailwind  |
-| CSS variables only           | Custom system    |
-
----
-
-## Phase 3: Token Extraction
-
-skill({ name: "design-system-audit" })
-
-### For Screenshots
-
-Analyze all images and extract:
-
-```
-1. COLOR PALETTE
-   - Primary colors (brand)
-   - Secondary colors
-   - Neutral/gray scale (should be 8-12 shades)
-   - Semantic colors (success, warning, error, info)
-   - Accent colors
-
-2. TYPOGRAPHY SCALE
-   - Font families (sans, serif, mono)
-   - Heading sizes (H1-H6)
-   - Body text sizes (xs, sm, base, lg, xl)
-   - Font weights used
-   - Line heights
-
-3. SPACING PATTERNS
-   - Base unit (typically 4px or 8px)
-   - Common padding values
-   - Common margin values
-   - Gap patterns
-
-4. BORDER & SHADOW
-   - Border radius values
-   - Border widths
-   - Shadow definitions
-
-5. COMPONENT VARIANTS
-   - Button styles (primary, secondary, outline, ghost)
-   - Input field styles
-   - Card variations
-```
-
-### For Codebase
-
-Search for hardcoded values using grep:
-
-```typescript
-grep({ pattern: "color:", include: "*.{css,scss,tsx,jsx}" });
-grep({ pattern: "background:", include: "*.{css,scss,tsx,jsx}" });
-grep({ pattern: "#[0-9a-fA-F]{3,8}", include: "*.{css,scss,tsx,jsx}" });
-grep({ pattern: "rgb\\(", include: "*.{css,scss,tsx,jsx}" });
-grep({ pattern: "hsl\\(", include: "*.{css,scss,tsx,jsx}" });
-
-grep({ pattern: "[0-9]+px", include: "*.{css,scss,tsx,jsx}" });
-grep({ pattern: "[0-9]+rem", include: "*.{css,scss,tsx,jsx}" });
-
-grep({ pattern: "font-size:", include: "*.css" });
-grep({ pattern: "fontSize:", include: "*.{tsx,jsx}" });
-grep({ pattern: "className=", include: "*.{tsx,jsx}" }); // then analyze for arbitrary values
-```
-
----
-
-## Phase 4: Consistency Analysis
-
-Compare findings and identify issues:
-
-### Consistency Score Calculation
-
-```
-Score = 100 - (penalties)
-
-Penalties:
-- Each one-off color: -2 points (max -20)
-- Each duplicate/similar color (ΔE < 5): -1 point (max -10)
-- Missing semantic token: -3 points (max -15)
-- Inconsistent spacing (not on base grid): -1 point (max -10)
-- Typography not in scale: -2 points (max -10)
-- Hardcoded values in components: -1 point per 5 instances (max -15)
-- No dark mode support: -10 points
-- Missing focus states: -10 points
-
-Score interpretation:
-90-100: Excellent - Well-maintained design system
-70-89: Good - Minor inconsistencies
-50-69: Fair - Needs attention
-<50: Poor - Significant design debt
-```
-
-### Issue Categories
-
-| Category              | Check For                                     |
-| --------------------- | --------------------------------------------- |
-| **Duplicates**        | Colors within ΔE < 5, similar spacing values  |
-| **One-offs**          | Values used only once, not in token file      |
-| **Missing Semantics** | Using primitives where semantic tokens needed |
-| **Hardcoded**         | Values in components instead of tokens        |
-| **Naming**            | Inconsistent naming conventions               |
-| **Accessibility**     | Contrast ratios, focus states                 |
-
----
-
-## Phase 5: Theme Analysis
-
-### Light/Dark Mode Coverage
-
-| Token        | Light Value | Dark Value | Status  |
-| ------------ | ----------- | ---------- | ------- |
-| --background | #FFFFFF     | #0A0A0A    | Covered |
-| --foreground | #0A0A0A     | #FAFAFA    | Covered |
-| --primary    | #0066CC     | #3B82F6    | Covered |
-| --muted      | #F3F4F6     | ???        | MISSING |
-
-### Semantic Token Completeness
-
-```markdown
-## Required Semantic Tokens
-
-### Colors
-
-- [x] background (default, muted, subtle)
-- [x] foreground (default, muted, subtle)
-- [x] primary (default, hover, active)
-- [x] secondary
-- [ ] accent (MISSING)
-- [x] destructive/error
-- [x] success
-- [ ] warning (MISSING)
-- [x] border
-- [x] ring/focus
-
-### Typography
-
-- [x] font-sans
-- [x] font-mono
-- [ ] font-serif (optional)
-
-### Spacing
-
-- [x] Base unit defined
-- [x] Scale follows pattern (4, 8, 12, 16, 24, 32, 48, 64)
-
-### Borders
-
-- [x] radius scale (sm, md, lg, full)
-- [x] border-width (default)
-```
-
----
-
-## Phase 6: Audit Report Output
-
-### Summary Dashboard
-
-| Metric                | Value      | Target | Status |
-| --------------------- | ---------- | ------ | ------ |
-| Unique colors         | 47         | < 30   | Over   |
-| Color duplicates      | 8          | 0      | Issue  |
-| Spacing values        | 12         | 8-12   | OK     |
-| Typography variants   | 9          | 6-10   | OK     |
-| One-off values        | 23         | 0      | Issue  |
-| Dark mode coverage    | 85%        | 100%   | Issue  |
-| **Consistency Score** | **72/100** | > 80   | Fair   |
-
-### Findings by Category
-
-#### Colors (High Priority)
-
-| Severity | Issue                 | Location   | Recommendation                 |
-| -------- | --------------------- | ---------- | ------------------------------ |
-| Critical | 8 duplicate blues     | Various    | Consolidate to --primary scale |
-| Warning  | 15 one-off grays      | Components | Create --gray scale            |
-| Info     | No semantic "warning" | Theme      | Add --warning token            |
-
-#### Typography (Medium Priority)
-
-| Severity | Issue                    | Location            | Recommendation          |
-| -------- | ------------------------ | ------------------- | ----------------------- |
-| Warning  | 3 undefined sizes        | Card.tsx, Modal.tsx | Add to typography scale |
-| Info     | Inconsistent line-height | Body text           | Standardize to 1.5      |
-
-#### Spacing (Low Priority)
-
-| Severity | Issue                | Location         | Recommendation       |
-| -------- | -------------------- | ---------------- | -------------------- |
-| Info     | 5 values not on grid | Padding in cards | Round to nearest 4px |
-
-### Priority Actions
-
-#### High Priority (Fix This Week)
-
-1. Consolidate 8 duplicate blue colors → single `--primary` scale
-2. Add dark mode values for 5 missing tokens
-3. Create `--warning` semantic token
-
-#### Medium Priority (Fix This Sprint)
-
-1. Replace 15 one-off grays with `--gray` scale
-2. Add missing typography sizes to scale
-
-#### Low Priority (Design Debt)
-
-1. Round spacing values to base-4 grid
-2. Document token naming conventions
-
----
-
-## Phase 7: Token Export
-
-### Design Tokens JSON
-
-```json
-{
-  "color": {
-    "primitive": {
-      "blue": {
-        "50": "#EFF6FF",
-        "100": "#DBEAFE",
-        "200": "#BFDBFE",
-        "300": "#93C5FD",
-        "400": "#60A5FA",
-        "500": "#3B82F6",
-        "600": "#2563EB",
-        "700": "#1D4ED8",
-        "800": "#1E40AF",
-        "900": "#1E3A8A"
-      },
-      "gray": {
-        "50": "#F9FAFB",
-        "100": "#F3F4F6",
-        "200": "#E5E7EB",
-        "300": "#D1D5DB",
-        "400": "#9CA3AF",
-        "500": "#6B7280",
-        "600": "#4B5563",
-        "700": "#374151",
-        "800": "#1F2937",
-        "900": "#111827"
-      }
-    },
-    "semantic": {
-      "background": {
-        "DEFAULT": "{color.primitive.white}",
-        "muted": "{color.primitive.gray.100}"
-      },
-      "foreground": {
-        "DEFAULT": "{color.primitive.gray.900}",
-        "muted": "{color.primitive.gray.500}"
-      },
-      "primary": {
-        "DEFAULT": "{color.primitive.blue.600}",
-        "hover": "{color.primitive.blue.700}"
-      },
-      "destructive": { "DEFAULT": "#EF4444", "hover": "#DC2626" },
-      "success": { "DEFAULT": "#10B981", "hover": "#059669" },
-      "warning": { "DEFAULT": "#F59E0B", "hover": "#D97706" },
-      "border": "{color.primitive.gray.200}",
-      "ring": "{color.primitive.blue.500}"
-    }
-  },
-  "spacing": {
-    "0": "0",
-    "1": "0.25rem",
-    "2": "0.5rem",
-    "3": "0.75rem",
-    "4": "1rem",
-    "5": "1.25rem",
-    "6": "1.5rem",
-    "8": "2rem",
-    "10": "2.5rem",
-    "12": "3rem",
-    "16": "4rem",
-    "20": "5rem"
-  },
-  "typography": {
-    "fontFamily": {
-      "sans": "Inter, system-ui, sans-serif",
-      "mono": "JetBrains Mono, monospace"
-    },
-    "fontSize": {
-      "xs": ["0.75rem", { "lineHeight": "1rem" }],
-      "sm": ["0.875rem", { "lineHeight": "1.25rem" }],
-      "base": ["1rem", { "lineHeight": "1.5rem" }],
-      "lg": ["1.125rem", { "lineHeight": "1.75rem" }],
-      "xl": ["1.25rem", { "lineHeight": "1.75rem" }],
-      "2xl": ["1.5rem", { "lineHeight": "2rem" }],
-      "3xl": ["1.875rem", { "lineHeight": "2.25rem" }],
-      "4xl": ["2.25rem", { "lineHeight": "2.5rem" }]
-    }
-  },
-  "borderRadius": {
-    "none": "0",
-    "sm": "0.125rem",
-    "DEFAULT": "0.25rem",
-    "md": "0.375rem",
-    "lg": "0.5rem",
-    "xl": "0.75rem",
-    "2xl": "1rem",
-    "full": "9999px"
-  },
-  "shadow": {
-    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    "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)"
-  }
-}
-```
-
-### CSS Variables Output
-
-```css
-:root {
-  /* Primitives */
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-900: #111827;
-
-  /* Semantics */
-  --background: #ffffff;
-  --foreground: #111827;
-  --primary: #2563eb;
-  --primary-hover: #1d4ed8;
-  --muted: #f3f4f6;
-  --muted-foreground: #6b7280;
-  --border: #e5e7eb;
-  --ring: #3b82f6;
-
-  /* Typography */
-  --font-sans: Inter, system-ui, sans-serif;
-  --font-mono: JetBrains Mono, monospace;
-
-  /* Spacing */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-4: 1rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-
-  /* Radius */
-  --radius-sm: 0.125rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-}
-
-.dark {
-  --background: #0a0a0a;
-  --foreground: #fafafa;
-  --muted: #262626;
-  --muted-foreground: #a3a3a3;
-  --border: #262626;
-}
-```
-
----
-
-## Phase 8: Create Tracking Issues
-
-For high-priority findings:
-
-```bash
-bd create "[Design] Consolidate duplicate blue colors" -t task -p 1
-bd create "[Design] Add missing dark mode tokens" -t task -p 1
-```
-
----
-
-## Storage
-
-Save outputs to:
-
-- **Tokens**: `.opencode/memory/design/tokens/[project]-tokens.json`
-- **Report**: `.opencode/memory/design/audits/[date]-audit.md`
-- **CSS**: `.opencode/memory/design/tokens/[project]-variables.css`
-
----
-
-## Examples
-
-```bash
-# Audit from screenshots
-/design-audit designs/screens/ --deep
-
-# Audit codebase only
-/design-audit codebase tokens
-
-# Full audit with comparison
-/design-audit both report --deep
-
-# Quick consistency check
-/design-audit codebase --quick
-```
-
----
-
-## Follow-up Commands
-
-| Finding                  | Command                                      |
-| ------------------------ | -------------------------------------------- |
-| Need to implement tokens | `/design src/styles/tokens.css`              |
-| Fix specific component   | `/fix-ui src/components/Button.tsx`          |
-| Accessibility issues     | `/accessibility-check`                       |
-| Compare to mockup        | `/analyze-mockup designs/spec.png --compare` |
-
----
-
-## Related Skills
-
-| Need                   | Skill                 |
-| ---------------------- | --------------------- |
-| Aesthetic improvements | `frontend-design` |
-| Implement from mockup  | `mockup-to-code`      |
-| Accessibility audit    | `accessibility-audit` |
-| Visual analysis        | `visual-analysis`     |

package/dist/template/.opencode/commands/edit-image.md

@@ -1,242 +0,0 @@
----
-description: Edit image with natural language instructions
-argument-hint: "<image-path> <edit-instruction> [--hd] [--preserve-size] [--compare]"
-agent: painter
----
-
-# Edit Image: $ARGUMENTS
-
-Edit an existing image using natural language instructions.
-
-## Parse Arguments
-
-Extract from `$ARGUMENTS`:
-
-| Argument          | Required | Description                    |
-| ----------------- | -------- | ------------------------------ |
-| Image path        | Yes      | Path to source image           |
-| Edit instruction  | Yes      | Natural language edit request  |
-| `--hd`            | No       | Higher quality output (slower) |
-| `--preserve-size` | No       | Maintain original dimensions   |
-| `--compare`       | No       | Output before/after comparison |
-
----
-
-## Edit Types & What Works
-
-### Works Well
-
-| Edit Type                  | Example                                   | Success Rate |
-| -------------------------- | ----------------------------------------- | ------------ |
-| **Background removal**     | "remove the background"                   | High         |
-| **Background replacement** | "replace background with beach sunset"    | High         |
-| **Color changes**          | "change the shirt to blue"                | High         |
-| **Style transfer**         | "make it look like a watercolor painting" | High         |
-| **Add elements**           | "add a hat to the person"                 | Medium-High  |
-| **Remove objects**         | "remove the car from the image"           | Medium-High  |
-| **Lighting adjustments**   | "make it look like golden hour"           | High         |
-| **Extend canvas**          | "extend the image to the right"           | Medium       |
-
-### Works Poorly (Set Expectations)
-
-| Edit Type                       | Why It's Hard                  | Alternative             |
-| ------------------------------- | ------------------------------ | ----------------------- |
-| **Text changes**                | AI struggles with precise text | Use image editor        |
-| **Face/hand details**           | Often distorts                 | Mask specific region    |
-| **Precise positioning**         | "Move object 50px left"        | Use coordinates in mask |
-| **Multiple simultaneous edits** | Conflicts                      | Do one edit at a time   |
-| **Preserving fine details**     | May blur/change                | Use `--preserve-size`   |
-
----
-
-## Process
-
-1. **Load** the source image from path
-2. **Analyze** the original (note key features to preserve)
-3. **Interpret** the edit instruction
-4. **Apply** the edit, preserving unaffected areas
-5. **Save** with versioning to track iterations
-6. **Compare** if `--compare` flag set
-
----
-
-## Common Edit Patterns
-
-### Background Operations
-
-```bash
-# Remove background (transparent)
-/edit-image photo.jpg remove the background
-
-# Replace background
-/edit-image photo.jpg replace background with a modern office
-
-# Extend/outpaint
-/edit-image landscape.jpg extend the sky upward
-```
-
-### Color & Style
-
-```bash
-# Color change
-/edit-image product.jpg change the product color to red
-
-# Style transfer
-/edit-image photo.jpg convert to anime style
-
-# Mood change
-/edit-image scene.jpg make it look like nighttime with city lights
-```
-
-### Object Manipulation
-
-```bash
-# Add object
-/edit-image room.jpg add a plant in the corner
-
-# Remove object
-/edit-image street.jpg remove the person on the left
-
-# Replace object
-/edit-image desk.jpg replace the laptop with a typewriter
-```
-
-### Enhancement
-
-```bash
-# Lighting
-/edit-image portrait.jpg add dramatic studio lighting
-
-# Quality
-/edit-image old-photo.jpg enhance and sharpen, remove grain --hd
-
-# Composition
-/edit-image product.jpg add subtle shadow underneath
-```
-
----
-
-## Output
-
-### Standard Output
-
-```markdown
-## Edit Complete
-
-**Source:** `path/to/original.jpg`
-**Edit:** "remove the background"
-**Output:** `.opencode/memory/design/edited/original-v1-bg-removed.png`
-
-### Original Analysis
-
-- Dimensions: 1920x1080
-- Key elements: Person in center, office background
-- Preserved: Person, clothing, pose
-
-### Edit Applied
-
-- Background detected and removed
-- Edges refined with feathering
-- Output format: PNG (transparent)
-
-### Refinements Available
-
-- "Soften the edges more"
-- "Keep the shadow underneath"
-- "Make background white instead of transparent"
-```
-
-### Comparison Output (--compare)
-
-```markdown
-## Before/After Comparison
-
-| Aspect     | Before       | After       |
-| ---------- | ------------ | ----------- |
-| Background | Office scene | Transparent |
-| Subject    | Unchanged    | Unchanged   |
-| Dimensions | 1920x1080    | 1920x1080   |
-| File size  | 450KB        | 380KB       |
-
-**Visual diff:** Key changes highlighted in output
-```
-
----
-
-## Version History
-
-Edits are saved with version tracking:
-
-```
-.opencode/memory/design/edited/
-├── photo-v1-bg-removed.png      # First edit
-├── photo-v2-color-change.png    # Second edit
-├── photo-v3-add-shadow.png      # Third edit
-└── photo-history.json           # Edit history
-```
-
-**History file:**
-
-```json
-{
-  "source": "photo.jpg",
-  "edits": [
-    { "v": 1, "instruction": "remove background", "timestamp": "..." },
-    { "v": 2, "instruction": "change shirt to blue", "timestamp": "..." }
-  ]
-}
-```
-
-To revert: Reference previous version as source.
-
----
-
-## Tips for Better Results
-
-1. **Be specific**: "Add a red baseball cap" > "add a hat"
-2. **One edit at a time**: Chain simple edits for complex changes
-3. **Describe what to keep**: "Change background but keep the shadow"
-4. **Use style references**: "Make it look like a Pixar movie"
-5. **Specify format needs**: "Remove background, keep as PNG with transparency"
-
----
-
-## Limitations
-
-- **Text editing**: AI cannot reliably modify or add text
-- **Precise geometry**: Exact pixel-level positioning not supported
-- **Faces**: May alter facial features unintentionally
-- **Hands**: Often produces artifacts
-- **Multiple subjects**: May struggle to isolate specific elements
-- **Brand logos**: May distort or refuse (safety filters)
-
-For precise edits, consider: Photoshop, GIMP, or Figma.
-
----
-
-## Examples
-
-```bash
-# Basic edit
-/edit-image screenshot.png remove the background
-
-# High quality with comparison
-/edit-image product.jpg enhance lighting and add reflection --hd --compare
-
-# Preserve dimensions
-/edit-image banner.png change the color scheme to dark mode --preserve-size
-
-# Style transfer
-/edit-image photo.jpg convert to oil painting style --hd
-```
-
----
-
-## Related Commands
-
-| Need               | Command           |
-| ------------------ | ----------------- |
-| Generate new image | `/generate-image` |
-| Analyze image      | `/analyze-mockup` |
-| Restore old photo  | `/restore-image`  |
-| Create icon        | `/generate-icon`  |