opencodekit 0.3.3 → 0.5.0

package/dist/template/.opencode/package.json

@@ -11,10 +11,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@opencode-ai/plugin": "1.0.164"
+    "@opencode-ai/plugin": "1.0.180"
   },
   "devDependencies": {
-    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20.19.27",
     "fs": "^0.0.1-security",
     "path": "^0.12.7",

package/dist/template/.opencode/skills/accessibility-audit/SKILL.md

@@ -0,0 +1,180 @@
+# Accessibility Audit Skill
+
+Audit UI accessibility against WCAG 2.1/2.2 guidelines.
+
+## When to Use
+
+- Reviewing UI components for accessibility compliance
+- Auditing pages for WCAG conformance
+- Identifying keyboard navigation issues
+- Checking color contrast
+- Pre-launch accessibility verification
+
+## Core Workflow
+
+### Phase 1: Visual Accessibility Analysis
+
+```
+Perform a comprehensive accessibility audit:
+
+1. COLOR CONTRAST
+   - Check text/background contrast ratios
+   - WCAG AA: 4.5:1 normal text, 3:1 large text
+   - Identify failing elements
+
+2. VISUAL HIERARCHY
+   - Heading structure (logical H1-H6)
+   - Visual grouping of related elements
+   - Touch targets (44x44px minimum)
+
+3. CONTENT ACCESSIBILITY
+   - Images needing alt text
+   - Icons without text labels
+   - Color-only information
+
+4. INTERACTIVE ELEMENTS
+   - Buttons/links with unclear purpose
+   - Form fields without labels
+   - Missing error states
+
+5. MOTION
+   - Auto-playing content
+   - Potential vestibular triggers
+
+Provide WCAG criterion references for each issue.
+```
+
+### Phase 2: Component Checklist
+
+For each interactive component:
+
+```markdown
+## Component: [Name]
+
+### Keyboard Navigation
+
+- [ ] Focusable with Tab
+- [ ] Visible focus indicator
+- [ ] Operable with Enter/Space
+- [ ] Escape closes modals
+- [ ] Arrow keys for menus
+
+### Screen Reader
+
+- [ ] Meaningful accessible name
+- [ ] Role announced correctly
+- [ ] State changes announced
+- [ ] Errors associated with inputs
+
+### Visual
+
+- [ ] 4.5:1 contrast ratio (text)
+- [ ] 3:1 contrast ratio (UI)
+- [ ] 44x44px touch targets
+- [ ] No color-only information
+
+### Motion
+
+- [ ] Respects prefers-reduced-motion
+- [ ] No auto-play >5 seconds
+```
+
+## WCAG Quick Reference
+
+### Level A (Minimum)
+
+| Criterion | Description            | Fix               |
+| --------- | ---------------------- | ----------------- |
+| 1.1.1     | Non-text Content       | Add alt text      |
+| 1.3.1     | Info and Relationships | Use semantic HTML |
+| 2.1.1     | Keyboard               | All via keyboard  |
+| 2.4.1     | Bypass Blocks          | Skip links        |
+| 4.1.2     | Name, Role, Value      | ARIA labels       |
+
+### Level AA (Recommended)
+
+| Criterion | Description   | Fix                    |
+| --------- | ------------- | ---------------------- |
+| 1.4.3     | Contrast      | 4.5:1 text, 3:1 UI     |
+| 1.4.4     | Resize Text   | Support 200% zoom      |
+| 2.4.6     | Headings      | Descriptive headings   |
+| 2.4.7     | Focus Visible | Clear focus indicators |
+
+## Common Fixes
+
+### Accessible Button
+
+```tsx
+// Bad
+<div onClick={handleClick}>Click me</div>
+
+// Good
+<button type="button" onClick={handleClick}>
+  Click me
+</button>
+```
+
+### Accessible Icon Button
+
+```tsx
+// Bad
+<button><Icon /></button>
+
+// Good
+<button aria-label="Close dialog">
+  <Icon aria-hidden="true" />
+</button>
+```
+
+### Form with Error
+
+```tsx
+<label htmlFor="email">Email</label>
+<input
+  id="email"
+  aria-describedby="email-error"
+  aria-invalid={hasError}
+/>
+{hasError && (
+  <span id="email-error" role="alert">
+    Please enter a valid email
+  </span>
+)}
+```
+
+## Report Template
+
+```markdown
+# Accessibility Audit Report
+
+**Date:** [Date]
+**Page:** [Name]
+**WCAG Level:** AA
+
+## Summary
+
+- Critical Issues: X
+- Major Issues: X
+- Minor Issues: X
+
+## Issues
+
+### [Issue Title]
+
+- **Severity:** Critical/Major/Minor
+- **WCAG:** [X.X.X]
+- **Element:** [selector]
+- **Issue:** [Description]
+- **Fix:** [Recommendation]
+```
+
+## Storage
+
+Save audit reports to `.opencode/memory/design/accessibility/`
+
+## Related Skills
+
+| Need           | Skill                 |
+| -------------- | --------------------- |
+| Design quality | `frontend-aesthetics` |
+| UI research    | `ui-ux-research`      |

package/dist/template/.opencode/skills/design-system-audit/SKILL.md

@@ -0,0 +1,141 @@
+# Design System Audit Skill
+
+Audit, document, and improve design systems.
+
+## When to Use
+
+- Auditing existing design systems for consistency
+- Documenting undocumented design tokens
+- Identifying design debt
+- Preparing for design system refactoring
+- Comparing implementation vs design specs
+
+## Core Workflow
+
+### Phase 1: Visual Inventory
+
+```
+Analyze application screenshots and create a visual inventory:
+
+1. COLOR PALETTE
+   - Primary colors (brand)
+   - Secondary colors
+   - Neutral/gray scale
+   - Semantic colors (success, warning, error, info)
+
+2. TYPOGRAPHY SCALE
+   - Heading sizes (H1-H6)
+   - Body text sizes
+   - Font families used
+   - Font weights observed
+
+3. SPACING PATTERNS
+   - Common padding values
+   - Common margin values
+   - Gap patterns
+
+4. COMPONENT VARIANTS
+   - Button styles
+   - Input field styles
+   - Card variations
+
+5. INCONSISTENCIES DETECTED
+   - Similar but different colors
+   - Inconsistent spacing
+   - Typography variations
+
+Output as structured JSON design tokens.
+```
+
+### Phase 2: Consistency Analysis
+
+```
+Compare visual inventory with code.
+
+Identify:
+1. Tokens used in code but not in designs
+2. Visual patterns not codified as tokens
+3. Naming inconsistencies
+4. Redundant/duplicate values
+5. Missing semantic tokens
+```
+
+## Design Token Structure
+
+```json
+{
+  "color": {
+    "primitive": {
+      "blue": { "50": "#eff6ff", "500": "#3b82f6", "900": "#1e3a8a" }
+    },
+    "semantic": {
+      "primary": "{color.primitive.blue.500}",
+      "background": { "default": "#f9fafb", "muted": "#f3f4f6" },
+      "text": { "default": "#111827", "muted": "#6b7280" }
+    }
+  },
+  "spacing": { "1": "0.25rem", "2": "0.5rem", "4": "1rem", "8": "2rem" },
+  "typography": {
+    "fontFamily": { "sans": "Inter", "mono": "JetBrains Mono" },
+    "fontSize": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" }
+  },
+  "borderRadius": { "sm": "0.125rem", "md": "0.375rem", "lg": "0.5rem" }
+}
+```
+
+## Audit Report Template
+
+```markdown
+# Design System Audit Report
+
+**Date:** [Date]
+**Application:** [Name]
+
+## Summary
+
+- Total unique colors: X (recommended: <20)
+- Total spacing values: X (recommended: 8-12)
+- Typography variants: X
+- Consistency score: X/100
+
+## Color Audit
+
+| Category   | Count | Issues       |
+| ---------- | ----- | ------------ |
+| Primitives | X     | X duplicates |
+| Semantics  | X     | X missing    |
+| One-offs   | X     | Should be 0  |
+
+### Recommendations
+
+1. Consolidate similar colors
+2. Add semantic tokens
+3. Remove one-off colors
+
+## Priority Actions
+
+### High Priority
+
+1. [Action with impact]
+
+### Medium Priority
+
+1. [Action]
+
+### Low Priority (Design Debt)
+
+1. [Action]
+```
+
+## Storage
+
+Save audit reports to `.opencode/memory/design/audits/`
+Save design tokens to `.opencode/memory/design/tokens/`
+
+## Related Skills
+
+| Need                 | Skill                 |
+| -------------------- | --------------------- |
+| Aesthetic principles | `frontend-aesthetics` |
+| Implement components | `mockup-to-code`      |
+| Accessibility        | `accessibility-audit` |

package/dist/template/.opencode/skills/frontend-aesthetics/SKILL.md

@@ -1,11 +1,6 @@
----
-name: frontend-aesthetics
-description: Use when building UI components, landing pages, dashboards, or any frontend work - avoids generic AI slop aesthetic by steering toward distinctive typography, cohesive themes, meaningful motion, and atmospheric backgrounds
----
+# Frontend Aesthetics Skill
 
-# Frontend Aesthetics
-
-Prevent distributional convergence that creates generic "AI slop" frontends. Every interface should feel intentionally crafted for its specific context.
+Prevent generic "AI slop" frontends. Create distinctive, intentional designs.
 
 ## When to Use
 
@@ -13,22 +8,22 @@ Prevent distributional convergence that creates generic "AI slop" frontends. Eve
 - Any frontend generation task
 - Reviewing UI for visual quality
 
-## Decision Gate (Do This First)
+## Decision Gate (Do First)
 
-Before writing any code, state in 1-2 sentences:
+Before writing code, state:
 
-1. **Aesthetic direction** — Which style from the list below?
-2. **Why** — How does it fit the context/purpose?
+1. **Aesthetic direction** — Which style?
+2. **Why** — How does it fit the context?
 
-### Aesthetic Directions
+## Aesthetic Directions
 
-Pick ONE (or combine 2 for hybrid):
+Pick ONE (or combine 2):
 
 | Direction        | Character                                       |
 | ---------------- | ----------------------------------------------- |
 | Neo-Brutalist    | Raw textures, bold type, harsh contrasts        |
 | Soft Minimalism  | Muted palettes, generous whitespace             |
-| Retro-Futuristic | CRT effects, scan lines, neon, cyberpunk        |
+| Retro-Futuristic | CRT effects, scan lines, neon                   |
 | Editorial        | Dynamic grids, mixed media, bold type           |
 | Glass Morphism   | Translucent layers, backdrop blur, depth        |
 | Dark Academia    | Rich textures, serif type, scholarly            |
@@ -37,63 +32,35 @@ Pick ONE (or combine 2 for hybrid):
 | Y2K Revival      | Gradients, metallics, early-web nostalgia       |
 | Organic/Natural  | Flowing shapes, nature palettes, paper textures |
 
-## Core Prompt
-
-```xml
-<frontend_aesthetics>
-You tend to converge toward generic outputs. In frontend design, this creates
-"AI slop" aesthetic. Make creative, distinctive frontends that surprise.
-
-Focus on:
-- Typography: Beautiful, unique fonts. Never Inter/Roboto/Arial/system fonts.
-  Good: JetBrains Mono, Fira Code, Space Grotesk, Playfair Display, Crimson Pro,
-  IBM Plex, Bricolage Grotesque, Newsreader, Instrument Serif, Bebas Neue
-- Color: Commit to cohesive theme. CSS variables. Dominant colors with sharp
-  accents beat timid palettes. Draw from IDE themes, cultural aesthetics.
-- Motion: One orchestrated page load with staggered reveals beats scattered
-  micro-interactions. CSS-only for HTML, Motion library for React.
-- Backgrounds: Atmosphere and depth, not solid colors. Layer gradients,
-  geometric patterns, noise textures.
-
-Never do ALL of these together (AI slop signature):
-- Purple/blue gradient backgrounds
-- Inter or system fonts
-- Centered hero with subheading
-- 3-column feature cards with icons
-- Rounded corners on everything (16px border-radius)
-- Drop shadows on all cards
-- #6366F1 or #667eea as primary color
-- "Modern, clean, simple" as only descriptors
+## Typography
 
-Vary light/dark themes, fonts, aesthetics. Make unexpected choices.
-</frontend_aesthetics>
-```
+**Good choices:**
 
-## Typography Quick Reference
+- Code/Tech: JetBrains Mono, Fira Code, Space Mono
+- Editorial: Playfair Display, Crimson Pro, Instrument Serif
+- Display: Bebas Neue, Oswald, Archivo Black
+- Technical: IBM Plex, Source Sans 3, Work Sans
+- Distinctive: Bricolage Grotesque, Syne, Outfit
 
-| Category    | Good Choices                                    | Avoid            |
-| ----------- | ----------------------------------------------- | ---------------- |
-| Code/Tech   | JetBrains Mono, Fira Code, Space Mono           | Roboto Mono      |
-| Editorial   | Playfair Display, Crimson Pro, Instrument Serif | Times New Roman  |
-| Display     | Bebas Neue, Oswald, Archivo Black               | Impact           |
-| Technical   | IBM Plex, Source Sans 3, Work Sans              | Arial, Helvetica |
-| Distinctive | Bricolage Grotesque, Syne, Outfit               | Inter, Lato      |
+**Avoid:** Inter, Roboto, Arial, system fonts without purpose
 
 **Pairing:** High contrast = interesting. Display + monospace, serif + geometric sans.
 
-**Weight:** Use extremes (100/200 vs 800/900), not middle (400 vs 600). Size jumps 3x+.
+**Weight:** Use extremes (100/200 vs 800/900), not middle (400 vs 600).
 
 ## Color Anti-Patterns
 
-```css
-/* BAD - Overused AI gradient */
-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+**Avoid:**
 
-/* GOOD - Intentional duotone */
-background:
-  linear-gradient(45deg, #ff6b6b 0%, transparent 70%),
-  linear-gradient(-45deg, #4ecdc4 0%, transparent 70%), #f7fff7;
-```
+- Purple/blue gradient backgrounds
+- #6366F1 or #667eea as primary
+- Flat white backgrounds
+
+**Do:**
+
+- Commit to cohesive theme
+- Use CSS variables
+- Dominant colors with sharp accents
 
 ## Animation Pattern
 
@@ -121,11 +88,15 @@ One orchestrated entrance beats scattered effects:
 }
 ```
 
-## Framework Integration
-
-**React + Tailwind:** "Use Tailwind with custom theme, animate with Framer Motion"
+## AI Slop Signature (Never Do ALL Together)
 
-**shadcn/ui:** "Use shadcn components but customize theme, avoid default styling"
+- Purple/blue gradient backgrounds
+- Inter or system fonts
+- Centered hero with subheading
+- 3-column feature cards with icons
+- Rounded corners on everything (16px)
+- Drop shadows on all cards
+- "Modern, clean, simple" as only descriptors
 
 ## Quality Check
 
@@ -135,3 +106,7 @@ Before delivery:
 - [ ] Avoids ALL items in the AI slop list?
 - [ ] Would someone remember this tomorrow?
 - [ ] Responsive, accessible, performs well?
+
+## Storage
+
+Save design decisions to `.opencode/memory/design/aesthetics/`

package/dist/template/.opencode/skills/mockup-to-code/SKILL.md

@@ -0,0 +1,158 @@
+# Mockup to Code Skill
+
+Convert UI mockups, screenshots, and designs into production-ready code.
+
+## When to Use
+
+- Converting Figma/Sketch mockups to React/Vue/HTML
+- Implementing pixel-perfect designs
+- Building component libraries from design systems
+- Rapid prototyping from wireframes
+
+## Core Workflow
+
+### Phase 1: Design Analysis
+
+```
+Analyze this UI mockup and extract:
+
+1. LAYOUT STRUCTURE
+   - Grid system (columns, gutters, margins)
+   - Component hierarchy
+   - Container widths
+
+2. VISUAL SPECIFICATIONS
+   - Colors (hex values)
+   - Typography (sizes, weights)
+   - Spacing (padding, margins, gaps)
+   - Border radius, shadows
+
+3. COMPONENTS IDENTIFIED
+   - List each distinct component
+   - Note variations
+   - Identify reusable patterns
+
+4. RESPONSIVE CONSIDERATIONS
+   - How might this adapt to mobile?
+   - Collapsible sections
+   - Priority content
+
+Output as structured JSON.
+```
+
+### Phase 2: Component Breakdown
+
+```markdown
+## Component: [Name]
+
+**Priority:** High/Medium/Low
+**Complexity:** Simple/Medium/Complex
+**Reusability:** One-off/Reusable/Design System
+
+**Props Interface:**
+
+- variant: 'primary' | 'secondary'
+- size: 'sm' | 'md' | 'lg'
+- disabled?: boolean
+
+**Accessibility:**
+
+- Keyboard navigation
+- ARIA labels
+- Focus management
+```
+
+### Phase 3: Implementation
+
+Implement with comparison loop:
+
+```
+Compare mockup vs implementation:
+
+1. What differences do you see?
+2. What's missing?
+3. Spacing/sizing adjustments needed?
+4. Color accuracy?
+5. Typography match?
+
+Prioritize fixes by visual impact.
+```
+
+## Technology Patterns
+
+### React + Tailwind
+
+```
+Convert to React with Tailwind CSS.
+
+Requirements:
+- Functional components with TypeScript
+- Tailwind utility classes
+- Extract repeated patterns
+- Semantic HTML
+- Responsive classes (sm:, md:, lg:)
+```
+
+### Vue 3
+
+```
+Convert to Vue 3 component.
+
+Requirements:
+- Composition API with <script setup>
+- Scoped styles
+- Props with TypeScript
+```
+
+### Plain HTML/CSS
+
+```
+Convert to semantic HTML and CSS.
+
+Requirements:
+- Semantic HTML5 elements
+- CSS Grid/Flexbox layout
+- CSS custom properties
+```
+
+## Quality Checklist
+
+### Visual Fidelity
+
+- [ ] Colors match exactly
+- [ ] Typography matches
+- [ ] Spacing is consistent
+- [ ] Border radius matches
+- [ ] Shadows correct
+
+### Responsiveness
+
+- [ ] Desktop layout matches
+- [ ] Tablet works
+- [ ] Mobile is usable
+- [ ] No horizontal scroll
+
+### Interactions
+
+- [ ] Hover states
+- [ ] Focus states
+- [ ] Transitions smooth
+
+### Code Quality
+
+- [ ] Properly typed
+- [ ] Sensible defaults
+- [ ] Uses tokens (no hardcoded values)
+- [ ] Accessible markup
+
+## Storage
+
+Save implementations to `.opencode/memory/design/implementations/`
+
+## Related Skills
+
+| Need              | Skill                 |
+| ----------------- | --------------------- |
+| Aesthetic quality | `frontend-aesthetics` |
+| Accessibility     | `accessibility-audit` |
+| Design tokens     | `design-system-audit` |