web-widgets: Skill for Claude Code

Guide the user through their first complete OpenSpec workflow cycle. This is a teaching experience—you'll do real work in their codebase while explaining each step.

---

Preflight

Before starting, check if the OpenSpec CLI is installed:

# Unix/macOS
openspec --version 2>&1 || echo "CLI_NOT_INSTALLED"
# Windows (PowerShell)
# if (Get-Command openspec -ErrorAction SilentlyContinue) { openspec --version } else { echo "CLI_NOT_INSTALLED" }

If CLI not installed:

OpenSpec CLI is not installed. Install it first, then come back to /opsx-onboard.

Stop here if not installed.

---

Phase 1: Welcome

Display:

## Welcome to OpenSpec!

I'll walk you through a complete change cycle—from idea to implementation—using a real task in your codebase. Along the way, you'll learn the workflow by doing it.

**What we'll do:**
1. Pick a small, real task in your codebase
2. Explore the problem briefly
3. Create a change (the container for our work)
4. Build the artifacts: proposal → specs → design → tasks
5. Implement the tasks
6. Archive the completed change

**Time:** ~15-20 minutes

Let's start by finding something to work on.

---

Phase 2: Task Selection

Codebase Analysis

Scan the codebase for small improvement opportunities. Look for:

1. TODO/FIXME comments - Search for TODO, FIXME, HACK, XXX in code files
2. Missing error handling - catch blocks that swallow errors, risky operations without try-catch
3. Functions without tests - Cross-reference src/ with test directories
4. Type issues - any types in TypeScript files (: any, as any)
5. Debug artifacts - console.log, console.debug, debugger statements in non-debug code
6. Missing validation - User input handlers without validation

Also check recent git activity:

# Unix/macOS
git log --oneline -10 2>/dev/null || echo "No git history"
# Windows (PowerShell)
# git log --oneline -10 2>$null; if ($LASTEXITCODE -ne 0) { echo "No git history" }