@ultrakit/ultrakit 0.0.0

package/dist/template/.opencode/skill/visual-analysis/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: visual-analysis
+description: Use when analyzing images, screenshots, UI mockups, or visual content for extracting information, comparing designs, or assessing visual properties like colors, typography, and layout
+version: 1.0.0
+tags: [design, research]
+dependencies: []
+---
+
+# Visual Analysis Skill
+
+> **Replaces** guessing at visual properties from code alone — direct inspection of rendered output for colors, layout, spacing, and typography
+
+## When to Use
+
+- Analyzing UI mockups or screenshots
+- Extracting information from images
+- Comparing visual designs
+- Quick visual assessments
+
+## When NOT to Use
+
+- Pure text/code review without any visual assets.
+
+## Workflow
+
+1. **Capture** — Get the image (screenshot, mockup, or user-provided)
+2. **Analyze** — Use vision agent to extract specific properties (colors as hex, font sizes, spacing in px/rem)
+3. **Compare** — Cross-reference extracted values against design tokens and existing CSS
+4. **Report** — List discrepancies with specific values and file locations
+
+## Quick Mode
+
+Fast, focused analysis for specific questions.
+
+**Prompt pattern:**
+
+```
+Analyze this image: [attach image]
+[specific question]
+```
+
+**Examples:**
+
+- "What text is visible in this UI?"
+- "List all colors used with their hex values"
+- "Identify all interactive elements"
+
+## Deep Mode
+
+Comprehensive analysis with structured output.
+
+**Prompt pattern:**
+
+```
+Analyze this image comprehensively:
+
+1. CONTENT INVENTORY
+   - All UI elements present
+   - Text content
+   - Icons and imagery
+
+2. VISUAL PROPERTIES
+   - Color palette (hex values)
+   - Typography (fonts, sizes, weights)
+   - Spacing patterns
+   - Layout structure
+
+3. OBSERVATIONS
+   - Design patterns used
+   - Potential issues
+   - Notable features
+
+Output as structured markdown.
+```
+
+## Common Analysis Patterns
+
+### UI Component Analysis
+
+```
+Analyze this UI component:
+
+1. Component type and purpose
+2. Visual states (hover, focus, disabled)
+3. Accessibility considerations
+4. Props/variants needed
+5. Similar patterns in common UI libraries
+```
+
+### Screenshot Comparison
+
+```
+Compare these two images:
+
+1. Visual differences (be specific about location)
+2. Missing elements
+3. Spacing/sizing discrepancies
+4. Color accuracy
+5. Priority fixes ranked by visual impact
+```
+
+### Color Extraction
+
+```
+Extract all colors from this image.
+
+Output as JSON:
+{
+  "primary": ["#hex1", "#hex2"],
+  "secondary": ["#hex3"],
+  "neutral": ["#hex4", "#hex5"],
+  "accent": ["#hex6"]
+}
+
+Include approximate usage percentage for each color.
+```
+
+### Layout Analysis
+
+```
+Analyze the layout structure:
+
+1. Grid system (columns, gutters)
+2. Container widths
+3. Section divisions
+4. Responsive breakpoint hints
+5. Flexbox vs Grid recommendations
+
+Output CSS/Tailwind structure.
+```
+
+## Output Formats
+
+- **Markdown** (default): Structured text
+- **JSON**: For design tokens
+- **Code**: Direct implementation
+
+## Storage
+
+Save findings to `.opencode/memory/design/analysis/`
+
+## Anti-Patterns
+
+| Anti-Pattern                                                                   | Why It Fails                                                                 | Instead                                                                     |
+| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Describing layout vaguely ("looks good") instead of extracting specific values | Feedback is non-actionable and hard to validate                              | Report measurable values (hex, px/rem, font size/weight) with locations     |
+| Not comparing against existing design tokens                                   | Findings drift from system standards and create inconsistent recommendations | Map extracted values to tokens first, then flag true mismatches             |
+| Analyzing low-resolution screenshots (artifacts mislead analysis)              | Compression/noise causes false readings for spacing and color                | Request higher-resolution captures or zoomed crops before final conclusions |
+
+## See Also
+
+- `mockup-to-code`
+- `design-system-audit`
+- `accessibility-audit`

package/dist/template/.opencode/skill/web-design-guidelines/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+version: 1.0.0
+tags: [ui, design]
+dependencies: []
+---
+
+# Web Interface Guidelines
+
+## When to Use
+
+- Reviewing UI files against Web Interface Guidelines for UX/design compliance.
+
+## When NOT to Use
+
+- Non-UI code reviews or when no files/pattern are provided.
+
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.

package/dist/template/.opencode/skill/webclaw/SKILL.md

@@ -0,0 +1,155 @@
+---
+name: webclaw
+description: MUST load when webfetch returns 403 or bot protection errors, when crawling documentation sites, batch-extracting pages, or extracting brand identity. Primary web scraping tool — prefer over webfetch for all non-trivial scraping.
+---
+
+# Webclaw Skill
+
+Fast, local-first web content extraction for LLMs. Rust-based scraper with TLS fingerprinting, 67% token reduction, and native MCP integration.
+
+## Prerequisites
+
+- `webclaw-mcp` binary installed at `~/.webclaw/webclaw-mcp`
+- Install: `brew tap 0xMassi/webclaw && brew install webclaw`
+- Or: download from https://github.com/0xMassi/webclaw/releases
+- MCP server must be enabled in `.opencode/opencode.json` (`"enabled": true`)
+
+## When to Use
+
+| Scenario               | Tool                   | Why                                        |
+| ---------------------- | ---------------------- | ------------------------------------------ |
+| `webfetch` got 403     | `scrape`               | TLS fingerprinting bypasses bot protection |
+| Research a doc site    | `crawl`                | BFS recursive extraction, same-origin      |
+| Extract multiple URLs  | `batch`                | Parallel multi-URL, faster than sequential |
+| Discover sitemap URLs  | `map`                  | Find all pages without crawling            |
+| Track doc changes      | `diff`                 | Snapshot + compare workflow                |
+| Extract brand identity | `brand`                | Colors, fonts, logos from any site         |
+| LLM-optimized output   | `scrape` with `-f llm` | 67% fewer tokens than raw HTML             |
+
+## MCP Tools (8 local, no API key needed)
+
+### scrape
+
+Extract clean content from a URL. Returns markdown, text, JSON, or LLM-optimized format.
+
+```
+scrape(url: "https://example.com", format: "llm")
+```
+
+Options: `format` (markdown|text|json|llm|html), `include` (CSS selectors), `exclude` (CSS selectors), `only_main_content` (boolean)
+
+### crawl
+
+Recursive BFS crawl of a site. Same-origin only.
+
+```
+crawl(url: "https://docs.example.com", depth: 2, max_pages: 50)
+```
+
+Options: `depth` (1-10), `max_pages`, `sitemap` (seed from sitemap.xml)
+
+### map
+
+Discover URLs from a site's sitemap without fetching content.
+
+```
+map(url: "https://docs.example.com")
+```
+
+### batch
+
+Parallel extraction from multiple URLs.
+
+```
+batch(urls: ["https://a.com", "https://b.com"], format: "llm")
+```
+
+### diff
+
+Compare current page content against a previous snapshot.
+
+```
+diff(url: "https://example.com", snapshot: previous_json)
+```
+
+### brand
+
+Extract visual identity: colors, fonts, logos, OG image.
+
+```
+brand(url: "https://stripe.com")
+```
+
+Returns: `{ name, colors: [{hex, usage}], fonts: [], logos: [{url, kind}] }`
+
+### extract (needs Ollama)
+
+LLM-powered structured extraction. Requires local Ollama instance.
+
+### summarize (needs Ollama)
+
+Page summarization via local LLM.
+
+## Workflow Patterns
+
+### Fallback when webfetch fails
+
+1. Try `webfetch` first (built-in, no setup)
+2. If 403 or empty → use `scrape` via webclaw MCP
+3. If JS-rendered SPA → note limitation (webclaw doesn't execute JS without cloud API)
+
+### Research a documentation site
+
+1. `map(url)` to discover all pages
+2. `crawl(url, depth: 2, max_pages: 50)` to extract content
+3. Feed results to analysis agent
+
+### Brand/design audit
+
+1. `brand(url)` to extract colors, fonts, logos
+2. Pass to vision agent for design system analysis
+
+### Track changes over time
+
+1. `scrape(url, format: "json")` → save as snapshot
+2. Later: `diff(url, snapshot: saved)` → see what changed
+
+## Installation
+
+```bash
+# Homebrew (recommended)
+brew tap 0xMassi/webclaw
+brew install webclaw
+
+# Prebuilt binary
+# Download from https://github.com/0xMassi/webclaw/releases
+# Place webclaw-mcp in ~/.webclaw/
+
+# Verify
+webclaw-mcp --version
+```
+
+## Configuration
+
+After install, enable in `.opencode/opencode.json`:
+
+```json
+{
+  "mcp": {
+    "webclaw": {
+      "enabled": true
+    }
+  }
+}
+```
+
+Optional env vars:
+
+- `WEBCLAW_API_KEY` — cloud API for bot-protected sites (optional)
+- `OLLAMA_HOST` — for extract/summarize tools (default: `http://localhost:11434`)
+
+## Limitations
+
+- **No JS rendering** (local mode) — SPAs that render entirely client-side won't extract fully. Use `--cloud` with API key, or use `playwright` skill instead.
+- **Same-origin crawl only** — won't follow external links during crawl.
+- **Early version** — v0.3.2, MIT license. Report issues to https://github.com/0xMassi/webclaw/issues

package/dist/template/.opencode/skill/workspace-setup/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: workspace-setup
+description: >
+  Use when a command needs to create a feature branch or set up a workspace for bead work. Shared by /create and /ship.
+version: 1.0.0
+tags: [git, workspace, branch, setup]
+---
+
+# Workspace Setup
+
+Set up a git workspace (branch or worktree) for bead-based work.
+
+## When to Use
+
+- In `/create` after bead creation, before task conversion
+- In `/ship` when auto-claiming an unclaimed bead
+- Any command that needs to transition from "no workspace" to "active workspace"
+
+## When NOT to Use
+
+- If bead is already `in_progress` with an existing branch
+- If user explicitly chose "Use current branch"
+
+## Protocol
+
+### Step 1: Ask the user
+
+```typescript
+question({
+  questions: [
+    {
+      header: "Workspace",
+      question: "How do you want to set up the workspace?",
+      options: [
+        {
+          label: "Create feature branch (Recommended)",
+          description: "git checkout -b <prefix>/<bead-id>-<title>",
+        },
+        {
+          label: "Use current branch",
+          description: "Work on current branch without creating a new one",
+        },
+      ],
+    },
+  ],
+});
+```
+
+> **Note:** `/create` may additionally offer a "Create worktree" option using `skill({ name: "using-git-worktrees" })`.
+
+### Step 2: Create branch (if selected)
+
+Map bead type to branch prefix:
+
+| Bead Type | Branch Prefix |
+| --------- | ------------- |
+| feature   | feat          |
+| bug       | fix           |
+| task      | task          |
+| epic      | epic          |
+
+Create the branch:
+
+```bash
+git checkout -b $PREFIX/$BEAD_ID-$TITLE_SLUG
+```
+
+Where `$TITLE_SLUG` is the bead title lowercased with spaces replaced by hyphens, truncated to ~50 chars.
+
+### Step 3: Confirm
+
+```bash
+git branch --show-current
+```
+
+Verify you're on the new branch before proceeding.