npm - opencodekit - Versions diffs - 0.15.20 → 0.16.0 - Mend

opencodekit 0.15.20 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (606) hide show

package/dist/template/.opencode/commands/analyze-mockup.md DELETED Viewed

@@ -1,423 +0,0 @@
----
-description: Analyze UI mockup or screenshot with structured output
-argument-hint: "<image-path> [focus: layout|colors|components|typography|a11y|all] [--quick|--deep] [--compare <file>]"
-agent: vision
-model: proxypal/gemini-3-flash-preview
-subtask: true
----
-# Analyze Mockup: $ARGUMENTS
-## Load Beads Skill
-```typescript
-skill({ name: "beads" });
-```
-## Phase 1: Parse Arguments
-Extract from `$ARGUMENTS`:
-| Argument   | Default  | Options                                                       |
-| ---------- | -------- | ------------------------------------------------------------- |
-| Image path | required | File path or URL                                              |
-| Focus      | `all`    | `layout`, `colors`, `components`, `typography`, `a11y`, `all` |
-| Depth      | `--deep` | `--quick` (2-3 min), `--deep` (10-15 min)                     |
-| Compare    | none     | `--compare <existing-file.tsx>` for diff analysis             |
-Load the image and determine analysis scope.
-## Phase 2: Structured Analysis
-skill({ name: "visual-analysis" })
-Run analysis based on focus area. Each section has specific output format.
----
-### Colors Analysis
-**Extract:**
-```json
-{
-  "primary": {
-    "hex": "#0066CC",
-    "usage": "buttons, links",
-    "percentage": "15%"
-  },
-  "secondary": {
-    "hex": "#6B7280",
-    "usage": "text, borders",
-    "percentage": "25%"
-  },
-  "background": {
-    "hex": "#FFFFFF",
-    "usage": "page background",
-    "percentage": "50%"
-  },
-  "accent": { "hex": "#10B981", "usage": "success states", "percentage": "5%" },
-  "error": { "hex": "#EF4444", "usage": "error states", "percentage": "2%" },
-  "neutral": ["#F3F4F6", "#E5E7EB", "#D1D5DB", "#9CA3AF"]
-}
-```
-**Accessibility Check:**
-| Combination | Contrast Ratio | WCAG AA | WCAG AAA |
-|-------------|----------------|---------|----------|
-| primary on background | 4.5:1 | Pass | Fail |
-| text on background | 7.2:1 | Pass | Pass |
-**CSS Output:**
-```css
-:root {
-  --color-primary: #0066cc;
-  --color-primary-hover: #0052a3;
-  --color-secondary: #6b7280;
-  --color-background: #ffffff;
-  --color-surface: #f3f4f6;
-  --color-accent: #10b981;
-  --color-error: #ef4444;
-}
-```
-**Tailwind Output:**
-```js
-// tailwind.config.js
-colors: {
-  primary: { DEFAULT: '#0066CC', hover: '#0052A3' },
-  secondary: '#6B7280',
-  accent: '#10B981',
-  error: '#EF4444',
-}
-```
----
-### Layout Analysis
-**Grid System:**
-- Type: [12-column grid | Flexbox | CSS Grid | Mixed]
-- Container max-width: [e.g., 1280px]
-- Gutters: [e.g., 24px]
-- Margins: [e.g., 16px mobile, 32px desktop]
-**Section Breakdown:**
-```
-┌─────────────────────────────────────┐
-│ Header (h-16, sticky)               │
-├─────────────────────────────────────┤
-│ Hero (h-96, flex center)            │
-├─────────────────────────────────────┤
-│ Content (grid cols-3, gap-6)        │
-│ ┌─────┐ ┌─────┐ ┌─────┐            │
-│ │Card │ │Card │ │Card │            │
-│ └─────┘ └─────┘ └─────┘            │
-├─────────────────────────────────────┤
-│ Footer (py-8)                       │
-└─────────────────────────────────────┘
-```
-**Responsive Breakpoints:**
-| Breakpoint | Layout Change |
-|------------|---------------|
-| < 640px (sm) | Stack to single column, hide sidebar |
-| < 1024px (lg) | 2-column grid, collapsible nav |
-| >= 1280px (xl) | Full 3-column layout |
-**CSS Structure:**
-```css
-.container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.5rem;
-}
-@media (max-width: 1024px) {
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (max-width: 640px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
-}
-```
----
-### Components Analysis
-**Component Inventory:**
-| Component | Library Match | Variants                    | Complexity | Priority |
-| --------- | ------------- | --------------------------- | ---------- | -------- |
-| Button    | shadcn/Button | primary, secondary, outline | S          | High     |
-| Card      | shadcn/Card   | default, hover, selected    | M          | High     |
-| Input     | shadcn/Input  | default, error, disabled    | S          | Medium   |
-| Modal     | Radix Dialog  | -                           | M          | Low      |
-| Dropdown  | shadcn/Select | -                           | M          | Medium   |
-**Component Details (for each):**
-```markdown
-## Component: [Name]
-**Library:** shadcn/ui, MUI, Radix, custom
-**Variants:** primary | secondary | outline
-**States:** default, hover, focus, active, disabled
-**Props Interface:**
-- variant: 'primary' | 'secondary' | 'outline'
-- size: 'sm' | 'md' | 'lg'
-- disabled?: boolean
-**Accessibility:**
-- Focus ring visible
-- ARIA labels needed
-- Keyboard: Enter/Space to activate
-```
----
-### Typography Analysis
-**Font Stack:**
-```css
---font-sans: "Inter", system-ui, -apple-system, sans-serif;
---font-mono: "JetBrains Mono", monospace;
-```
-**Type Scale:**
-| Element | Size | Weight | Line Height | Letter Spacing |
-|---------|------|--------|-------------|----------------|
-| h1 | 2.5rem (40px) | 700 | 1.2 | -0.02em |
-| h2 | 2rem (32px) | 600 | 1.25 | -0.01em |
-| h3 | 1.5rem (24px) | 600 | 1.3 | 0 |
-| body | 1rem (16px) | 400 | 1.5 | 0 |
-| small | 0.875rem (14px) | 400 | 1.4 | 0 |
-| caption | 0.75rem (12px) | 500 | 1.3 | 0.02em |
-**CSS Output:**
-```css
-:root {
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-  --font-size-4xl: 2.5rem;
-  --line-height-tight: 1.2;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.75;
-}
-```
----
-### Accessibility Analysis (a11y)
-**Color Contrast:**
-| Element | Foreground | Background | Ratio | Status |
-|---------|------------|------------|-------|--------|
-| Body text | #1F2937 | #FFFFFF | 14.7:1 | AAA Pass |
-| Link | #0066CC | #FFFFFF | 4.5:1 | AA Pass |
-| Button text | #FFFFFF | #0066CC | 4.5:1 | AA Pass |
-| Muted text | #9CA3AF | #FFFFFF | 2.9:1 | FAIL |
-**Touch Targets:**
-- Minimum size check: 44x44px for mobile
-- [ ] Buttons meet minimum
-- [ ] Links have adequate padding
-- [ ] Icons have tap area
-**Focus States:**
-- [ ] Visible focus ring on interactive elements
-- [ ] Focus order logical (left-right, top-bottom)
-- [ ] Skip links present (if applicable)
-**Issues Found:**
-| Severity | Issue | Location | Fix |
-|----------|-------|----------|-----|
-| Critical | Low contrast muted text | Body paragraphs | Change to #6B7280 |
-| Warning | Small touch target | Icon buttons | Add 8px padding |
-| Info | No focus ring | Cards | Add focus-visible ring |
----
-## Phase 3: Design Token Export
-Consolidate all findings into ready-to-use code:
-**Complete CSS Variables:**
-```css
-:root {
-  /* Colors */
-  --color-primary: #0066cc;
-  --color-secondary: #6b7280;
-  --color-background: #ffffff;
-  --color-surface: #f3f4f6;
-  --color-accent: #10b981;
-  --color-error: #ef4444;
-  /* Typography */
-  --font-sans: "Inter", system-ui, sans-serif;
-  --font-size-base: 1rem;
-  --line-height-base: 1.5;
-  /* Spacing */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-4: 1rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  /* Borders */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 1rem;
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-```
-**Tailwind Config Extension:**
-```js
-// tailwind.config.js
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        /* extracted colors */
-      },
-      fontFamily: { sans: ["Inter", ...defaultTheme.fontFamily.sans] },
-      spacing: {
-        /* if custom */
-      },
-      borderRadius: {
-        /* if custom */
-      },
-    },
-  },
-};
-```
----
-## Phase 4: Comparison Mode (if --compare)
-When `--compare <existing-file>` is provided:
-skill({ name: "mockup-to-code" })
-**Diff Analysis:**
-| Aspect | Mockup | Implementation | Delta |
-|--------|--------|----------------|-------|
-| Primary color | #0066CC | #0066CC | Match |
-| Button radius | 8px | 4px | +4px needed |
-| Card shadow | shadow-md | shadow-sm | Increase shadow |
-| Heading size | 40px | 36px | +4px needed |
-**Priority Fixes:**
-1. [High] Button border-radius: change `rounded` to `rounded-lg`
-2. [Medium] Card shadow: change `shadow-sm` to `shadow-md`
-3. [Low] Heading font-size: increase from 2.25rem to 2.5rem
----
-## Phase 5: Implementation Plan
-**Component Build Order (dependency-aware):**
-1. Design tokens (CSS variables) - no dependencies
-2. Typography components (Text, Heading) - depends on tokens
-3. Button - depends on tokens
-4. Card - depends on tokens
-5. Form inputs - depends on tokens, Button
-6. Page layouts - depends on all above
-**Create Implementation Tasks:**
-```bash
-bd create "Implement design tokens from mockup" -t task -p 1
-bd create "Implement [ComponentName] component" -t task -p 2
-```
-**Suggested Follow-up Commands:**
-- `/design src/styles/tokens.css` - Create token file from extracted values
-- `/implement bd-<token-task>` - Implement the design tokens
-- `/fix-ui src/components/Button.tsx --compare mockup.png` - Fix component to match
----
-## Quick Mode (--quick)
-When `--quick` is specified, output only:
-1. **Summary** (2-3 sentences)
-2. **Color palette** (hex values only, no CSS)
-3. **Component list** (names and library matches)
-4. **Top 3 accessibility issues**
-5. **Suggested next command**
-Skip: detailed breakdowns, CSS output, typography scale, comparison mode.
----
-## Examples
-```bash
-# Full analysis of a mockup
-/analyze-mockup designs/homepage.png
-# Quick color extraction
-/analyze-mockup designs/button.png colors --quick
-# Deep layout analysis
-/analyze-mockup designs/dashboard.png layout --deep
-# Compare implementation to mockup
-/analyze-mockup designs/card.png components --compare src/components/Card.tsx
-# Accessibility audit
-/analyze-mockup designs/form.png a11y
-```
----
-## Output Storage
-Save analysis to `.opencode/memory/design/analysis/[mockup-name].md` for future reference.
-## Related Commands
-| Need                         | Command                   |
-| ---------------------------- | ------------------------- |
-| Implement the design         | `/design` or `/implement` |
-| Audit existing design system | `/design-audit`           |
-| Fix UI to match mockup       | `/fix-ui --compare`       |
-| Check accessibility          | `/accessibility-check`    |

package/dist/template/.opencode/commands/analyze-project.md DELETED Viewed

@@ -1,295 +0,0 @@
----
-description: Analyze project health, quality standards, and ready work
-argument-hint: "[--quick|--deep]"
-agent: build
----
-# Analyze Project
-Comprehensive project analysis with stack-specific best practices.
-## Arguments
-$ARGUMENTS
----
-## Phase 1: Environment Detection
-Detect project type to determine analysis strategy:
-```bash
-# Check config files
-ls -la package.json pyproject.toml Cargo.toml go.mod pom.xml build.gradle 2>/dev/null || true
-# Check lock files for package manager
-ls -la bun.lockb yarn.lock pnpm-lock.yaml package-lock.json 2>/dev/null || true
-# Check for monorepo
-ls -la pnpm-workspace.yaml lerna.json nx.json turbo.json 2>/dev/null || true
-```
-Read the main config file to detect framework:
-```typescript
-read({ filePath: "package.json" }); // or pyproject.toml, Cargo.toml, etc.
-```
----
-## Phase 2: Parallel Research & Discovery
-Once stack is detected, launch parallel subagent tasks using the Task tool.
-Run all three in parallel (single message with multiple Task calls):
-```typescript
-// Scout: Research best practices for detected stack
-Task({
-  subagent_type: "scout",
-  description: "Best practices research",
-  prompt: `Research best practices for [DETECTED_STACK]:
-    - Code quality standards and linting rules
-    - Testing patterns and coverage expectations
-    - Project structure conventions
-    - Common anti-patterns to avoid
-    Return as actionable checklist with specific recommendations.`,
-});
-// Scout: Framework-specific quality standards
-Task({
-  subagent_type: "scout",
-  description: "Quality standards research",
-  prompt: `Research quality standards for [DETECTED_FRAMEWORK]:
-    - Recommended ESLint/Biome/Ruff rules
-    - Type safety requirements
-    - Performance best practices
-    - Security checklist
-    Return as comparison criteria checklist.`,
-});
-// Explore: Analyze codebase architecture
-Task({
-  subagent_type: "explore",
-  description: "Architecture analysis",
-  prompt: `Analyze this codebase architecture thoroughly:
-    - Directory structure pattern (feature-based, layer-based, etc.)
-    - Key modules and their responsibilities
-    - Entry points and data flow
-    - Test organization and coverage patterns
-    Return as detailed architecture summary with file paths.`,
-});
-```
-**Fallback:** If Task tool fails or network is unavailable, use local tools:
-- `memory-search` for existing project knowledge
-- Use `glob` + `read` to explore structure
-- Skip external research phases
----
-## Phase 3: Git & Version Control Health
-```bash
-# Current state
-git status --short
-git branch --show-current
-git log --oneline -5
-# Commits ahead/behind
-git rev-list --left-right --count origin/main...HEAD 2>/dev/null || true
-# Recent activity
-git log -1 --format="%h %s (%cr by %an)"
-# Uncommitted changes
-git diff --stat
-```
----
-## Phase 4: Code Quality Checks
-Run quality checks based on detected stack:
-### For TypeScript/JavaScript:
-```bash
-# Type errors
-npm run typecheck 2>/dev/null || npx tsc --noEmit 2>/dev/null || true
-# Linting
-npm run lint 2>/dev/null || npx biome check . 2>/dev/null || npx eslint . 2>/dev/null || true
-# TODO/FIXME count
-grep -r "TODO\|FIXME\|HACK\|XXX" src/ --include="*.ts" --include="*.tsx" 2>/dev/null | wc -l || echo "0"
-```
-### For Python:
-```bash
-# Type checking
-mypy . 2>/dev/null || true
-# Linting
-ruff check . 2>/dev/null || pylint **/*.py 2>/dev/null || true
-# TODO count
-grep -r "TODO\|FIXME" . --include="*.py" 2>/dev/null | wc -l || echo "0"
-```
-### For Rust:
-```bash
-cargo check 2>/dev/null || true
-cargo clippy 2>/dev/null || true
-```
----
-## Phase 5: Test Health
-```bash
-# Run tests with coverage if available
-npm test -- --coverage 2>/dev/null || \
-bun test --coverage 2>/dev/null || \
-pytest --cov 2>/dev/null || \
-cargo test 2>/dev/null || \
-go test ./... 2>/dev/null || \
-echo "No test runner detected"
-```
----
-## Phase 6: Dependency & Security Health
-```bash
-# Outdated dependencies
-npm outdated 2>/dev/null || pnpm outdated 2>/dev/null || pip list --outdated 2>/dev/null || true
-# Security audit
-npm audit 2>/dev/null || pip-audit 2>/dev/null || cargo audit 2>/dev/null || true
-```
----
-## Phase 7: CI/CD & Documentation Health
-```bash
-# CI status (GitHub Actions)
-gh run list --limit 3 2>/dev/null || true
-# Documentation presence
-ls -la README.md CHANGELOG.md CONTRIBUTING.md AGENTS.md docs/ 2>/dev/null || true
-# README freshness
-git log -1 --format="%cr" -- README.md 2>/dev/null || true
-```
----
-## Phase 8: Task/Work Health (if Beads configured)
-```bash
-bd status 2>/dev/null || echo "Beads not configured"
-bd ready 2>/dev/null || true
-bd blocked 2>/dev/null || true
-```
----
-## Phase 9: Integrate Research Results
-Task tool returns results directly - no collection needed.
-Integrate findings from Phase 2 subagents into the report:
-1. **Best practices checklist** → Compare against Phase 4 quality results
-2. **Quality standards** → Use as criteria for Health Score calculation
-3. **Architecture summary** → Include in report Architecture section
-If subagents failed in Phase 2, use fallback data:
-- Check `memory-read({ file: "project/architecture" })` for cached architecture
-- Use `glob` + `read` to explore structure
-- Skip best practices comparison (mark as "N/A - offline mode")
----
-## Phase 10: Generate Report
-Compile all findings into a comprehensive report:
-```markdown
-# Project Analysis Report
-**Generated:** [DATE]
-**Stack:** [DETECTED_STACK]
-**Framework:** [DETECTED_FRAMEWORK]
-## Health Score: X/100
-| Category      | Score | Status  | Notes             |
-| ------------- | ----- | ------- | ----------------- |
-| Security      | X/20  | OK/Warn | X vulnerabilities |
-| Code Quality  | X/20  | OK/Warn | X lint errors     |
-| Test Coverage | X/20  | OK/Warn | X% coverage       |
-| Dependencies  | X/20  | OK/Warn | X outdated        |
-| Documentation | X/20  | OK/Warn | X missing         |
-## Current State vs Best Practices
-Based on [FRAMEWORK] best practices research:
-| Practice            | Expected    | Actual   | Status |
-| ------------------- | ----------- | -------- | ------ |
-| Type Safety         | Strict mode | ...      | ✓/✗    |
-| Test Coverage       | >80%        | X%       | ✓/✗    |
-| Linting             | Zero errors | X errors | ✓/✗    |
-| Dependency Security | No vulns    | X vulns  | ✓/✗    |
-## Architecture Summary
-[From explore agent]
-## Priority Recommendations
-1. **[HIGH]** [Action based on findings]
-2. **[MEDIUM]** [Action based on findings]
-3. **[LOW]** [Action based on findings]
-## Ready Work
-| ID  | Title | Priority | Type |
-| --- | ----- | -------- | ---- |
-| ... | ...   | ...      | ...  |
-```
----
-## Phase 11: Save to Memory
-Save report for trend tracking:
-```typescript
-memory_update({
-  file: "project/analysis-[YYYY-MM-DD]",
-  content: "[GENERATED_REPORT]",
-  mode: "replace",
-});
-```
----
-## Output Modes
-### --quick (Default)
-- Phase 1, 3, 8 only
-- ~30 seconds
-- Basic status dashboard
-### --deep
-- All phases including subagent research
-- ~3-5 minutes
-- Full analysis with best practices comparison