opencodekit 0.21.3 → 0.21.5

package/dist/template/.opencode/command/ship.md

@@ -20,6 +20,8 @@ skill({ name: "memory-grounding" });
 skill({ name: "workspace-setup" });
 skill({ name: "verification-before-completion" });
 skill({ name: "reflection-checkpoints" }); // Mid-point + completion checks during execution
+// For user-facing UI changes: skill({ name: "ux-quality-gates" });
+// If local web/browser verification needs stable URLs: skill({ name: "portless" });
 ```
 
 ## Determine Input Type
@@ -226,8 +228,37 @@ Follow the [Verification Protocol](../skill/verification-before-completion/refer
 - All 4 gates must pass before proceeding to commit/push
 - Also run PRD `Verify:` commands
 
+If the PRD requires local web, browser, OAuth callback, webhook, or multi-service verification, load the [portless](../skill/portless/SKILL.md) skill and use approved stable URLs as verification evidence. Portless is optional: read-only `portless list` / `portless get <service>` checks are allowed when installed, but do not install Portless, start proxies, trust CAs, mutate hosts files, clean Portless state, or expose LAN services without explicit user approval.
+
 ## Phase 5: Review
 
+```bash
+BASE_SHA=$(git rev-parse origin/main 2>/dev/null || git rev-parse HEAD~1)
+HEAD_SHA=$(git rev-parse HEAD)
+```
+
+### UI Quality Gate (if UI files changed)
+
+Before general review, detect changed UI files:
+
+```bash
+git diff --name-only $BASE_SHA...HEAD -- \
+  '*.tsx' '*.jsx' '*.css' '*.scss' '*.sass' '*.less' '*.html' '*.mdx'
+```
+
+If any UI files changed:
+
+1. Load `skill({ name: "ux-quality-gates" })`.
+2. Run `/ui-slop-check auto --since=$BASE_SHA` or manually apply its checklist when slash-command invocation is unavailable.
+3. Verify UX gates for changed surfaces:
+   - One primary action per view/section
+   - Empty/loading/error/success states for async/data flows
+   - Retry/undo/confirm paths for errors and destructive actions
+   - Form labels, helper text, validation, and error association
+   - Semantic HTML, keyboard path, visible focus, reduced motion
+   - Component family consistency for related controls
+4. Treat Critical findings like review Critical findings: fix inline, rerun verification, then continue.
+
 Load and run the review skill:
 
 ```typescript
@@ -236,11 +267,6 @@ skill({ name: "requesting-code-review" });
 
 Run **5 parallel agents**: security/correctness, performance/architecture, type-safety/tests, conventions/patterns, simplicity/completeness.
 
-```bash
-BASE_SHA=$(git rev-parse origin/main 2>/dev/null || git rev-parse HEAD~1)
-HEAD_SHA=$(git rev-parse HEAD)
-```
-
 Fill placeholders:
 
 - `{WHAT_WAS_IMPLEMENTED}`: bead title + brief summary of what changed

package/dist/template/.opencode/command/status.md

@@ -40,11 +40,12 @@ skill({ name: "beads" });
 
 ## Available Tools
 
-| Tool            | Use When              |
-| --------------- | --------------------- |
-| `br`            | Task status and stats |
-| `git`           | Git state and history |
-| `find_sessions` | Recent sessions       |
+| Tool            | Use When                                        |
+| --------------- | ----------------------------------------------- |
+| `br`            | Task status and stats                           |
+| `git`           | Git state and history                           |
+| `find_sessions` | Recent sessions                                 |
+| `portless`      | Optional read-only local URL state if installed |
 
 ## Phase 1: Gather State (Parallel)
 
@@ -62,6 +63,14 @@ git branch --show-current
 git log --oneline -5
 ```
 
+Optionally include Portless local URL state only if the binary is already installed:
+
+```bash
+if command -v portless >/dev/null 2>&1; then portless list; fi
+```
+
+Do not install Portless, start/stop proxies, trust CAs, sync hosts, prune/clean state, or expose LAN services from `/status`.
+
 ```typescript
 find_sessions({ query: "<project-name or recent-bead-keywords>", limit: 5 });
 ```

package/dist/template/.opencode/command/ui-review.md

@@ -13,6 +13,7 @@ model: proxypal/gemini-3-pro-preview
 skill({ name: "visual-analysis" }); // Analysis framework
 skill({ name: "accessibility-audit" }); // WCAG checklists
 skill({ name: "frontend-design" }); // Anti-patterns, design quality
+skill({ name: "ux-quality-gates" }); // IA, heuristics, forms, recovery, state coverage
 ```
 
 ## Input
@@ -33,31 +34,50 @@ Use the `visual-analysis` skill to perform deep analysis:
 - Visual properties (colors, typography, spacing, layout)
 - Design patterns and potential issues
 
-### 2. Score Categories
+### 2. Usability Heuristic Pass
 
-Rate each 1-10 with brief justification:
+Apply `ux-quality-gates` before visual scoring. Check:
+
+- System status is visible for async or multi-step work
+- Labels and navigation use user vocabulary, not implementation terms
+- Users can cancel, undo, go back, retry, or recover from failure
+- Controls, names, and layouts are consistent across the surface
+- Dangerous or invalid actions are prevented before they happen
+- Options and relationships are visible without relying on memory
+- High-volume workflows expose efficient paths where appropriate
+- Empty/loading/error/success states are present and useful
+
+Any failure that blocks task completion or recovery is **Critical**, even if the screen looks polished.
 
-| Category               | What to Evaluate                                               |
-| ---------------------- | -------------------------------------------------------------- |
-| **Typography**         | Hierarchy, readability, weight contrast, intentional choices   |
-| **Color**              | Palette cohesion, contrast, semantic usage, no AI slop         |
-| **Layout & Spacing**   | Visual hierarchy, consistency, alignment, white space          |
-| **Interactive States** | Hover, focus, active, disabled, loading coverage               |
-| **Accessibility**      | WCAG AA compliance (use `accessibility-audit` skill checklist) |
-| **Visual Polish**      | Consistency, attention to detail, motion, shadows, icons       |
+### 3. Score Categories
+
+Rate each 1-10 with brief justification:
 
-### 3. Conditional Reviews
+| Category                          | What to Evaluate                                               |
+| --------------------------------- | -------------------------------------------------------------- |
+| **Information Architecture**      | User vocabulary, scope clarity, relationships, navigation      |
+| **Task Flow & Recovery**          | Primary action, cancellation, undo/retry, error recovery       |
+| **Forms & Data Interaction**      | Labels, helper text, validation, selection, bulk actions       |
+| **Typography**                    | Hierarchy, readability, weight contrast, intentional choices   |
+| **Color**                         | Palette cohesion, contrast, semantic usage, no AI slop         |
+| **Layout & Spacing**              | Visual hierarchy, consistency, alignment, white space          |
+| **Interactive States**            | Hover, focus, active, disabled, loading/error/success coverage |
+| **Accessibility & Semantic HTML** | WCAG AA compliance, native semantics, keyboard/focus behavior  |
+| **Component Consistency**         | Shared token DNA: radius, height, border, shadow, states       |
+| **Visual Polish**                 | Consistency, attention to detail, motion, shadows, icons       |
+
+### 4. Conditional Reviews
 
 **If `--responsive`**: Check at 375px, 768px, 1280px, 1536px+. Flag touch targets, horizontal scroll, text sizing.
 
 **If `--dark-mode`**: Check contrast on dark backgrounds, adapted colors (not just inverted), shadow adjustments, focus visibility.
 
-### 4. Report Findings
+### 5. Report Findings
 
 Group by severity:
 
-- **Critical (Must Fix)**: Accessibility failures, broken interactions
-- **Warning (Should Fix)**: AI slop patterns, inconsistent spacing, missing states
+- **Critical (Must Fix)**: Accessibility failures, broken interactions, dead-end errors, unsafe destructive actions
+- **Warning (Should Fix)**: AI slop patterns, inconsistent spacing, missing states, confusing IA/naming
 - **Info (Nice to Have)**: Polish opportunities
 
 For each finding: location, impact, and recommended fix.
@@ -85,7 +105,7 @@ observation({
 
 ## Related Commands
 
-| Need                 | Command   |
-| -------------------- | --------- |
-| Design from scratch  | `/design` |
-| Ship implementation  | `/ship`   |
+| Need                | Command   |
+| ------------------- | --------- |
+| Design from scratch | `/design` |
+| Ship implementation | `/ship`   |

package/dist/template/.opencode/command/ui-slop-check.md

@@ -15,16 +15,17 @@ Run a focused anti-slop audit against changed UI files using the frontend-design
 skill({ name: "frontend-design" }); // Anti-pattern taxonomy + design references
 skill({ name: "visual-analysis" }); // Structured visual/code analysis workflow
 skill({ name: "accessibility-audit" }); // Keyboard/focus/contrast checks
+skill({ name: "ux-quality-gates" }); // UX correctness gates beyond visual slop
 ```
 
 ## Parse Arguments
 
-| Argument        | Default | Description                                                   |
-| --------------- | ------- | ------------------------------------------------------------- |
-| `[path\|auto]`  | `auto`  | Specific file/dir to audit, or auto-detect changed UI files   |
-| `--staged`      | false   | Audit staged changes only (`git diff --cached`)               |
-| `--since=<ref>` | `HEAD`  | Compare against ref (`main`, `HEAD~1`, commit SHA)            |
-| `--full-report` | false   | Include all categories even when no issues found              |
+| Argument        | Default | Description                                                 |
+| --------------- | ------- | ----------------------------------------------------------- |
+| `[path\|auto]`  | `auto`  | Specific file/dir to audit, or auto-detect changed UI files |
+| `--staged`      | false   | Audit staged changes only (`git diff --cached`)             |
+| `--since=<ref>` | `HEAD`  | Compare against ref (`main`, `HEAD~1`, commit SHA)          |
+| `--full-report` | false   | Include all categories even when no issues found            |
 
 ## Phase 1: Resolve Target Files
 
@@ -96,12 +97,34 @@ Evaluate each target file (or rendered screenshot if provided) against these che
 - Error copy includes what happened + why + how to fix
 - Empty states include guidance + next action
 - Terminology is consistent (avoid mixed synonyms for same action)
+- User-facing labels avoid implementation terms, database names, and internal acronyms
 
-### F) Accessibility Safety Nets
+### F) UX Quality Gates
+
+- One dominant filled primary action per view/section
+- Destructive actions require explicit confirm or undo, with specific entity/count in copy
+- No placeholder-as-label form fields
+- Form errors are associated with controls (`aria-describedby`, `aria-invalid`, `role="alert"`)
+- Submit/loading states prevent double-submit without layout shift
+- Empty, loading, error, and success states exist where async/data flows exist
+- Error toasts/banners persist long enough and include retry/undo/support where applicable
+- Data-heavy UI distinguishes empty state from filtered no-results state
+- Bulk actions show selected count and confirm destructive scope
+
+### G) Accessibility Safety Nets
 
 - Keyboard-visible focus treatment (`:focus-visible`)
 - Contrast baseline expectations (WCAG AA)
 - Touch targets reasonable (44x44 context where applicable)
+- Native semantic elements are used before ARIA patches (`button`, `a`, `form`, landmarks)
+- Heading structure has one logical `h1` per page/screen context
+
+### H) Component Family Consistency
+
+- Buttons and inputs in the same form share height, radius, border, and focus treatment
+- Focus, error, disabled, and loading states use the same token logic across components
+- No one-off radius/shadow/border width unless documented as a system-level exception
+- Semantic color roles are consistent: success, warning, destructive, info, primary
 
 ## Phase 3: Severity and Scoring
 

package/dist/template/.opencode/command/verify.md

@@ -13,6 +13,7 @@ Check implementation against PRD before shipping.
 ```typescript
 skill({ name: "beads" });
 skill({ name: "verification-before-completion" });
+// If local web/browser verification needs stable URLs: skill({ name: "portless" });
 ```
 
 ## Parse Arguments
@@ -105,6 +106,8 @@ Follow the [Verification Protocol](../skill/verification-before-completion/refer
 1. **Parallel**: typecheck + lint (simultaneously)
 2. **Sequential** (after parallel passes): test, then build (ship only)
 
+For browser/manual local-web requirements, load the [portless](../skill/portless/SKILL.md) skill when stable named URLs would improve verification. Use only read-only Portless commands unless the user explicitly approves local networking changes; a reachable Portless URL supplements, but never replaces, typecheck/lint/test/build evidence.
+
 Report results with mode column:
 
 ```text