opencode-starterkit 1.0.1

package/baseline/skill/frontend-design/references/tailwind/utilities-styling.md

@@ -0,0 +1,165 @@
+# Tailwind Styling Utilities
+
+Spacing, typography, colors, borders, shadows, transforms.
+
+## Spacing
+
+### Padding
+```html
+<div class="p-4">All</div>
+<div class="px-6">X axis</div>
+<div class="py-3">Y axis</div>
+<div class="pt-8 pr-4 pb-2 pl-6">Individual</div>
+```
+
+### Margin
+```html
+<div class="m-4">All</div>
+<div class="mx-auto">Center</div>
+<div class="my-6">Y axis</div>
+<div class="-mt-4">Negative</div>
+<div class="ml-auto">Push right</div>
+```
+
+### Scale
+```
+0=0px, px=1px, 0.5=2px, 1=4px, 2=8px, 3=12px, 4=16px
+6=24px, 8=32px, 12=48px, 16=64px, 24=96px
+v4: Any value: mt-17, px-29
+```
+
+## Typography
+
+```html
+<!-- Size -->
+<p class="text-xs">12px</p>
+<p class="text-sm">14px</p>
+<p class="text-base">16px</p>
+<p class="text-lg">18px</p>
+<p class="text-xl">20px</p>
+<p class="text-2xl">24px</p>
+<p class="text-4xl">36px</p>
+
+<!-- Weight -->
+<p class="font-light">300</p>
+<p class="font-normal">400</p>
+<p class="font-medium">500</p>
+<p class="font-semibold">600</p>
+<p class="font-bold">700</p>
+
+<!-- Line height -->
+<p class="leading-tight">1.25</p>
+<p class="leading-normal">1.5</p>
+<h1 class="text-4xl/tight">Combined</h1>
+
+<!-- Transform -->
+<p class="uppercase">UPPER</p>
+<p class="lowercase">lower</p>
+<p class="capitalize">Cap</p>
+
+<!-- Decoration -->
+<p class="underline">Underline</p>
+<p class="line-through">Strike</p>
+
+<!-- Overflow -->
+<p class="truncate">Truncate...</p>
+<p class="line-clamp-3">Clamp 3</p>
+```
+
+## Colors
+
+```html
+<!-- Text -->
+<p class="text-black">Black</p>
+<p class="text-gray-500">Gray</p>
+<p class="text-primary">CSS var</p>
+<p class="text-muted-foreground">Muted</p>
+
+<!-- Background -->
+<div class="bg-white">White</div>
+<div class="bg-blue-500">Blue</div>
+<div class="bg-background">CSS var</div>
+
+<!-- Opacity modifier -->
+<div class="bg-black/75">75%</div>
+<div class="text-blue-500/50">50%</div>
+```
+
+## Gradients
+
+```html
+<div class="bg-linear-to-r from-blue-500 to-purple-600">Linear</div>
+<div class="bg-linear-45 from-pink-500 to-yellow-500">Angle (v4)</div>
+<div class="bg-linear-to-br from-pink-500 via-red-500 to-yellow-500">Via</div>
+<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">OKLCH (v4)</div>
+```
+
+## Borders
+
+```html
+<!-- Width -->
+<div class="border">1px all</div>
+<div class="border-2">2px all</div>
+<div class="border-t">Top only</div>
+
+<!-- Color -->
+<div class="border border-gray-300">Gray</div>
+<div class="border border-border">CSS var</div>
+
+<!-- Radius -->
+<div class="rounded">0.25rem</div>
+<div class="rounded-lg">0.5rem</div>
+<div class="rounded-full">Pill</div>
+<div class="rounded-t-lg">Top only</div>
+```
+
+## Shadows
+
+```html
+<div class="shadow-sm">Small</div>
+<div class="shadow">Default</div>
+<div class="shadow-lg">Large</div>
+<div class="shadow-xl">XL</div>
+<div class="shadow-lg shadow-blue-500/50">Colored</div>
+<div class="inset-shadow-sm">Inset (v4)</div>
+```
+
+## Transforms
+
+```html
+<div class="scale-105">Scale</div>
+<div class="rotate-45">Rotate</div>
+<div class="translate-x-4">Move</div>
+
+<!-- 3D (v4) -->
+<div class="rotate-x-45">X</div>
+<div class="rotate-y-30">Y</div>
+<div class="perspective-distant">Perspective</div>
+```
+
+## Transitions
+
+```html
+<div class="transition-all">All</div>
+<div class="transition-colors">Colors</div>
+<div class="transition-transform">Transform</div>
+<div class="duration-300">300ms</div>
+<div class="ease-in-out">Easing</div>
+```
+
+## Other
+
+```html
+<div class="opacity-50">50%</div>
+<div class="cursor-pointer">Pointer</div>
+<div class="select-none">No select</div>
+```
+
+## Arbitrary Values
+
+```html
+<div class="p-[17px]">Custom</div>
+<div class="bg-[#bada55]">Hex</div>
+<div class="w-[calc(100%-2rem)]">Calc</div>
+<div class="grid-cols-[1fr_500px_2fr]">Grid</div>
+```

package/baseline/skill/frontend-design/references/tailwind/v4-config.md

@@ -0,0 +1,147 @@
+# Tailwind CSS v4 Configuration
+
+v4.1.x (current: v4.1.18) - CSS-first config, no tailwind.config.js needed.
+
+## Installation
+
+### Vite (Recommended)
+```bash
+npm i tailwindcss @tailwindcss/vite
+```
+
+```ts
+// vite.config.ts
+import tailwindcss from "@tailwindcss/vite"
+export default { plugins: [tailwindcss()] }
+```
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+```
+
+### PostCSS
+```bash
+npm i tailwindcss @tailwindcss/postcss
+```
+
+```js
+// postcss.config.js
+export default { plugins: ["@tailwindcss/postcss"] }
+```
+
+## CSS-First Configuration
+
+Configure in CSS with `@theme`:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  /* OKLCH colors for vivid, wide-gamut */
+  --color-brand-50: oklch(0.97 0.02 264);
+  --color-brand-500: oklch(0.55 0.22 264);
+  --color-brand-900: oklch(0.25 0.15 264);
+
+  /* Fonts */
+  --font-display: "Satoshi", sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+
+  /* Spacing, breakpoints, easing */
+  --spacing-18: calc(var(--spacing) * 18);
+  --breakpoint-3xl: 1920px;
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+
+  /* Shadows */
+  --shadow-glow: 0 0 20px oklch(0.55 0.22 264 / 0.3);
+}
+```
+
+Usage: `<div class="bg-brand-500 font-display shadow-glow">`
+
+## Key v4 Changes from v3
+
+| v3 | v4 |
+|----|-----|
+| `@tailwind base/components/utilities` | `@import "tailwindcss"` |
+| `tailwind.config.js` | `@theme` directive |
+| `content: [...]` array | Automatic detection |
+| sRGB colors | OKLCH/P3 colors |
+| `bg-opacity-50` | `bg-black/50` modifier |
+| Plugin for container queries | Built-in `@container` |
+
+## Automatic Content Detection
+
+No `content` array. Auto-ignores `.gitignore` and binary files.
+
+Add sources manually if needed:
+```css
+@source "../node_modules/@my-company/ui-lib";
+```
+
+## Dynamic Values
+
+Any value works without config:
+```html
+<div class="grid grid-cols-15">
+<div class="mt-17 px-29">
+<div data-active class="data-active:bg-blue-500">
+```
+
+## OKLCH Colors
+
+Wider gamut, more vivid:
+```css
+@theme {
+  --color-primary-50: oklch(0.98 0.02 250);
+  --color-primary-500: oklch(0.65 0.22 250);
+  --color-primary-900: oklch(0.25 0.15 250);
+}
+```
+
+Opacity modifier: `<div class="bg-primary-500/50">`
+
+## Custom Utilities & Variants
+
+```css
+@utility glass {
+  background: oklch(1 0 0 / 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid oklch(1 0 0 / 0.2);
+}
+
+@custom-variant theme-dark (&:where([data-theme="dark"] *));
+```
+
+## Layer Organization
+
+```css
+@layer base { h1 { @apply text-4xl font-bold; } }
+@layer components { .btn { @apply px-4 py-2 rounded-lg; } }
+@layer utilities { .text-balance { text-wrap: balance; } }
+```
+
+## Dark Mode
+
+Class strategy by default:
+```html
+<html class="dark">
+  <div class="bg-white dark:bg-zinc-900">
+```
+
+## Migration from v3
+
+```bash
+npx @tailwindcss/upgrade
+```
+
+- Move `tailwind.config.js` to `@theme`
+- Replace `@tailwind` with `@import "tailwindcss"`
+- Remove `content` array
+- Replace `bg-opacity-*` with `/opacity` modifier
+
+## Performance
+
+- Full builds: 3.5x+ faster
+- Incremental: 8x+ faster
+- No-new-CSS: 100x+ faster (microseconds)

package/baseline/skill/frontend-design/references/tailwind/v4-features.md

@@ -0,0 +1,128 @@
+# Tailwind CSS v4 New Features
+
+v4/v4.1 additions: gradients, 3D transforms, masks, text shadows, new variants.
+
+## Container Queries (Built-in)
+
+No plugin needed:
+```html
+<div class="@container">
+  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4">
+</div>
+
+<!-- Max-width -->
+<div class="grid-cols-3 @max-md:grid-cols-1">
+
+<!-- Range -->
+<div class="@min-md:@max-xl:hidden">
+```
+
+## Gradients
+
+```html
+<!-- Angle-based -->
+<div class="bg-linear-45 from-indigo-500 to-pink-500">
+
+<!-- OKLCH interpolation -->
+<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">
+
+<!-- Conic and radial -->
+<div class="bg-conic from-red-500 to-red-500">
+<div class="bg-radial from-white to-zinc-900">
+```
+
+## 3D Transforms
+
+```html
+<div class="perspective-distant">
+  <div class="rotate-x-45 rotate-z-30 transform-3d">
+</div>
+```
+
+## @starting-style (Enter Transitions)
+
+```html
+<div popover class="transition-all starting:open:opacity-0 starting:open:scale-95">
+```
+
+## not-* Variant
+
+```html
+<div class="not-hover:opacity-75">
+<div class="not-supports-backdrop-blur:bg-white">
+```
+
+## Text Shadows (v4.1)
+
+```html
+<p class="text-shadow-sm">Small</p>
+<p class="text-shadow-lg">Large</p>
+<p class="text-shadow-lg text-shadow-blue-500/50">Colored</p>
+```
+
+## Masks (v4.1)
+
+```html
+<div class="mask-t-from-50%">Fade from top</div>
+<div class="mask-b-from-20% mask-b-to-80%">Bottom fade</div>
+<div class="mask-radial-from-70%">Radial</div>
+<div class="mask-b-from-50% mask-radial-from-80%">Combined</div>
+```
+
+## Other v4.1 Utilities
+
+```html
+<!-- Colored drop shadows -->
+<svg class="drop-shadow-xl drop-shadow-cyan-500/50">
+
+<!-- Overflow wrap -->
+<p class="wrap-break-word">Break words</p>
+<p class="wrap-anywhere">Break anywhere</p>
+
+<!-- Safe alignment -->
+<div class="flex justify-center-safe">
+
+<!-- Baseline alignment -->
+<div class="items-baseline-last">
+
+<!-- Color scheme -->
+<html class="color-scheme-dark">
+
+<!-- Field sizing -->
+<textarea class="field-sizing-content">
+
+<!-- Inert styling -->
+<div class="inert:opacity-50" inert>
+```
+
+## New v4.1 Variants
+
+```html
+<!-- Pointer device -->
+<div class="pointer-fine:p-2 pointer-coarse:p-4">
+
+<!-- Form validation (after interaction) -->
+<input class="user-valid:border-green-500 user-invalid:border-red-500">
+
+<!-- Details content -->
+<details class="details-content:mt-3">
+
+<!-- Inverted colors -->
+<div class="inverted-colors:shadow-none">
+
+<!-- Noscript -->
+<div class="noscript:block hidden">Enable JS</div>
+```
+
+## Source Directives (v4.1)
+
+```css
+/* Ignore paths */
+@source not "./src/legacy";
+
+/* Safelist utilities */
+@source inline("underline");
+
+/* Brace expansion */
+@source inline("{hover:,}bg-red-{100..900..100}");
+```

package/baseline/skill/gemini-large-context/SKILL.md

@@ -0,0 +1,216 @@
+---
+name: gemini-large-context
+description: Use when analyzing large codebases, comparing multiple files, or researching project-wide patterns that exceed typical context limits - leverages Gemini CLI's 1M token context window for comprehensive analysis
+version: 1.0.0
+tags: [research, context]
+dependencies: []
+---
+
+# Gemini CLI Large Context Analysis
+
+## When to Use
+
+- Large, multi-file or project-wide analysis that exceeds local context limits.
+
+## When NOT to Use
+
+- Small, focused tasks that fit within normal context or require edits.
+
+## Overview
+
+Use Gemini CLI's massive context window (1M tokens) when analysis requires more context than available in current session. Ideal for codebase-wide searches, multi-file comparisons, and pattern discovery across large projects.
+
+## When to Use
+
+- Analyzing entire codebases or large directories (100KB+)
+- Comparing multiple large files simultaneously
+- Understanding project-wide patterns or architecture
+- Context window insufficient for current task
+- Verifying feature implementations across codebase
+- Research that needs to scan many files at once
+
+## Quick Reference
+
+```bash
+# Basic non-interactive analysis
+gemini -p "@src/ Summarize architecture"
+
+# Multiple directories
+gemini -p "@src/ @tests/ Analyze test coverage"
+
+# All project files
+gemini --all-files -p "Project overview"
+
+# Specific model (Pro = 1M context)
+gemini -m gemini-2.5-pro -p "@src/ Deep analysis"
+```
+
+## File/Directory Inclusion Syntax
+
+```bash
+# Single file
+gemini -p "@src/main.py Explain this file"
+
+# Multiple files
+gemini -p "@package.json @src/index.js Analyze dependencies"
+
+# Entire directory (recursive)
+gemini -p "@src/ Summarize architecture"
+
+# Multiple directories
+gemini -p "@src/ @tests/ Analyze test coverage"
+
+# Current directory
+gemini -p "@./ Project overview"
+
+# Alternative: all files flag
+gemini --all-files -p "Analyze project structure"
+```
+
+## Research Patterns
+
+### Architecture Analysis
+
+```bash
+gemini -p "@src/
+Describe:
+1. Overall architecture pattern (MVC, Clean, etc.)
+2. Key modules and their responsibilities
+3. Data flow between components
+4. External dependencies and integrations"
+```
+
+### Feature Implementation Check
+
+```bash
+gemini -p "@src/ @lib/
+Has [FEATURE] been implemented?
+Show:
+- Relevant files and functions
+- Implementation approach
+- Any gaps or incomplete areas"
+```
+
+### Pattern Discovery
+
+```bash
+gemini -p "@src/
+Find all instances of [PATTERN]:
+- File paths
+- Implementation variations
+- Consistency assessment"
+```
+
+### Security Audit
+
+```bash
+gemini -p "@src/ @api/
+Security review:
+- Input validation practices
+- Authentication/authorization patterns
+- SQL injection protections
+- XSS prevention measures"
+```
+
+### Test Coverage Analysis
+
+```bash
+gemini -p "@src/ @tests/
+Assess test coverage:
+- Which modules have tests?
+- Which are missing tests?
+- Test quality (unit vs integration)
+- Edge cases covered"
+```
+
+## Integration with OpenCode Workflow
+
+### For Task-Constrained Research
+
+When researching within task boundaries:
+
+```bash
+# 1. Include bead spec in context
+gemini -p "@src/ @.beads/artifacts/br-xxx/spec.md
+Research implementations matching spec constraints"
+
+# 2. Save findings to bead artifacts
+# Write to .beads/artifacts/br-xxx/research.md
+```
+
+### Delegating Large Research to Gemini
+
+In AGENTS.md or prompts, instruct agents:
+
+```markdown
+When analysis requires more than 100KB of files:
+
+1. Use Gemini CLI: `gemini -p "@[paths] [question]"`
+2. Capture output
+3. Synthesize findings in response
+```
+
+## Output Options
+
+```bash
+# Plain text (default)
+gemini -p "query"
+
+# JSON for parsing
+gemini -p "query" --output-format json
+
+# Streaming for long ops
+gemini -p "query" --output-format stream-json
+```
+
+## Common Research Queries
+
+- **Architecture overview:** `gemini -p "@src/ Describe architecture"`
+- **Find implementations:** `gemini -p "@src/ Where is [X] implemented?"`
+- **Pattern audit:** `gemini -p "@src/ Find all [pattern] usages"`
+- **Dependency analysis:** `gemini -p "@package.json @src/ Analyze dependency usage"`
+- **Code quality:** `gemini -p "@src/ Identify code smells"`
+- **Migration planning:** `gemini -p "@src/ Plan migration from [A] to [B]"`
+
+## Configuration
+
+### Authentication
+
+```bash
+# Google login (free tier: 60 req/min, 1000/day)
+gemini  # Follow OAuth flow
+
+# Or API key
+export GEMINI_API_KEY="your-key"
+```
+
+### Model Selection
+
+For most analysis tasks, **`gemini-2.5-pro`** is the best choice—it has a 1M token context window and handles code, text, and image analysis exceptionally well. This is the default model.
+
+Use **`gemini-2.5-flash`** when you need faster responses and don't need the full context window.
+
+**Important:** If you're analyzing images or screenshots, use `gemini-2.5-pro`. Image generation models like `imagen-3.0-generate-002` are for _creating_ new images, not understanding existing ones.
+
+```bash
+# Gemini 2.5 Pro (1M context) - default, best for analysis
+gemini -p "query"
+
+# Gemini Flash (faster, smaller context)
+gemini -m gemini-2.5-flash -p "query"
+```
+
+## Best Practices
+
+1. **Scope appropriately** - Include only relevant directories
+2. **Be specific** - Ask focused questions, not vague queries
+3. **Use for read-only analysis** - Don't ask Gemini to modify files in non-interactive mode
+4. **Capture output** - Redirect to file for long analyses: `gemini -p "..." > analysis.md`
+5. **Combine with local tools** - Use Gemini for research, local tools for implementation
+
+## Limitations
+
+- Non-interactive mode: no tool approvals (file writes, shell commands)
+- `@file` syntax: best in interactive mode
+- Network dependency: requires internet connection
+- Rate limits: 60 req/min free tier