create-harness-vibe-coding 0.8.6 → 0.8.8

package/templates/optional/skills/browser-e2e/Harness/workflows/browser-e2e.md

@@ -1,35 +1,23 @@
-# Browser E2E Workflow
-
-Optional workflow for browser-visible testing and automation. Installed when `browser-use` CLI is available.
-
-## When Active
-
-This workflow is active when:
-1. `browser-use` CLI is installed and `browser-use doctor` passes
-2. `Harness/workflows/browser-e2e.md` exists (this file)
+# Browser E2E Workflow
+
+Optional workflow for browser-visible testing and automation. Installed when `browser-use` CLI is available.
+
+## When Active
+
+This workflow is active when:
+1. `browser-use` CLI is installed and `browser-use doctor` passes
+2. `Harness/workflows/browser-e2e.md` exists (this file)
 3. A task explicitly references `/wf-browser`, `$wf-browser`, or browser E2E testing
-
-## Contract
-
-Browser evidence in this project follows the contract:
-
-1. **Every browser claim needs real-browser evidence** — screenshot, state snapshot, or console output
-2. **CLI mode is preferred for deterministic steps** — use `browser-use open/state/click/screenshot` for predictable flows
-3. **Agent mode is for dynamic exploration** — use Browser Use Agent API when the page structure is unknown or changing
-4. **Evidence goes to the task directory** — `Harness/tasks/<task-id>/evidence/*.png`
-5. **Stable UI selector contract** — Stable accessible labels/roles and stable test selectors such as `data-testid` are required for critical UI controls and states: inputs, buttons, filters, rows, empty/error/loading states.
-
-## Chrome DevTools / CDP / MCP Checklist
-
-- [ ] record the URL and port
-- [ ] Verify available CDP, MCP, browser automation, or manual tooling
-- [ ] Check not just HTTP 200
-- [ ] Verify no runtime exceptions, console errors, and failed network requests
-- [ ] Confirm stable accessible labels/roles or `data-testid` on interactive elements
-- [ ] Test critical flow end-to-end
-- [ ] Capture screenshot, trace, video, or result artifact paths
-- [ ] Clean up any dev server or browser processes
-
+
+## Contract
+
+Browser evidence in this project follows the contract:
+
+1. **Every browser claim needs real-browser evidence** - screenshot, state snapshot, or console output
+2. **CLI mode is preferred for deterministic steps** - use `browser-use open/state/click/screenshot` for predictable flows
+3. **Agent mode is for dynamic exploration** - use Browser Use Agent API when the page structure is unknown or changing
+4. **Evidence goes to the task directory** - `Harness/tasks/<task-id>/evidence/*.png`
+
 ### Harness Bridge
 
 For frontend-backend flows, use `Harness/HARNESS_BRIDGE.md` to validate UI
@@ -37,47 +25,95 @@ selectors, API payloads, seeded data, runtime state probes, and CDP/network
 traces. Browser validation must produce an AC-by-AC result matrix when the task
 has acceptance criteria.
 
+### Stable UI Selector Contract
+
+All browser automation and E2E tests in this project use a stable selector contract. Selectors must be written against **public, stable attributes** that survive refactors, not against ephemeral class names or DOM indices.
+
+**Required selector priority (most stable first):**
+
+1. **`data-testid`** - the primary stable anchor for automated tests
+2. **accessible labels/roles** - `getByRole`, `getByLabelText`, `getByPlaceholderText` (ARIA roles, `<label>` associations, placeholder text)
+3. **Text content** - `getByText` for visible user-facing strings
+
+**Required coverage targets.** Every interactive page tested by browser automation must cover: inputs, buttons, filters, rows, empty/error/loading states.
+
+| Category | Examples |
+|---|---|
+| **Inputs** | text fields, textareas, selects, checkboxes, radios, file uploads |
+| **Buttons** | submit buttons, icon-only buttons, toggle buttons, CTA buttons |
+| **Filters** | search inputs, dropdown filters, date range pickers, filter chips/tags |
+| **Rows** | table rows, list items, card containers - the repeating data unit |
+| **Empty state** | "no results" message, empty illustration, zero-state CTA |
+| **Error state** | inline validation errors, toast notifications, server error banners |
+| **Loading state** | spinners, skeletons, progress bars, "Loading..." text |
+
+**Selector format examples:**
+
+```
+data-testid="search-input"
+data-testid="submit-btn"
+data-testid="filter-status"
+data-testid="result-row"
+data-testid="empty-state"
+data-testid="error-banner"
+data-testid="loading-spinner"
+```
+
+**Rationale:** `data-testid` attributes are decoupled from styling and layout - they survive CSS refactors, component renames, and DOM restructuring. Accessible labels and roles are the fallback when `data-testid` is not available, and they double as a11y coverage. Class-name and XPath selectors are not accepted in test automation because they break on cosmetic changes.
+
+## Chrome DevTools / CDP / MCP Checklist
+
+- [ ] record the URL and port
+- [ ] Verify available CDP, MCP, browser automation, or manual tooling
+- [ ] Check not just HTTP 200
+- [ ] Verify no runtime exceptions, console errors, and failed network requests
+- [ ] Confirm stable accessible labels/roles or `data-testid` on interactive elements
+- [ ] Test critical flow end-to-end
+- [ ] Capture screenshot, trace, video, or result artifact paths
+- [ ] Produce an AC-by-AC validation matrix
+- [ ] Clean up any dev server or browser processes
+
 ## Quick Install
-
-```bash
-# One-time setup
-pip install "browser-use[cli]"
-browser-use install
-browser-use doctor
-
-# Windows: if you see GBK encoding errors, set:
-set PYTHONIOENCODING=utf-8
-
-# Verify
-browser-use open https://example.com
-browser-use state
-browser-use screenshot test.png
-browser-use close
-```
-
-## Fallback
-
-If `browser-use` is not installed, fall back to:
-
-1. Playwright/Puppeteer MCP server (if configured)
-2. Chrome DevTools Protocol (CDP) manual inspection
-3. `Harness/WF.md#Browser And API Evidence` manual check contract
-
-## Integration Points
-
+
+```bash
+# One-time setup
+pip install "browser-use[cli]"
+browser-use install
+browser-use doctor
+
+# Windows: if you see GBK encoding errors, set:
+set PYTHONIOENCODING=utf-8
+
+# Verify
+browser-use open https://example.com
+browser-use state
+browser-use screenshot test.png
+browser-use close
+```
+
+## Fallback
+
+If `browser-use` is not installed, fall back to:
+
+1. Playwright/Puppeteer MCP server (if configured)
+2. Chrome DevTools Protocol (CDP) manual inspection
+3. `Harness/WF.md#Browser And API Evidence` manual check contract
+
+## Integration Points
+
 - **WF mode**: when browser-visible changes are made, follow the evidence contract in `Harness/WF.md#Browser And API Evidence`
 - **Harness Bridge**: use `Harness/HARNESS_BRIDGE.md` for UI contract, API contract, seeded test data, runtime state probes, and network trace collection.
 - **wf-browser**: Claude Code uses `.claude/skills/wf-browser/SKILL.md`; Codex uses `.agents/skills/wf-browser/SKILL.md`. Both load this workflow.
-- **MEMORY.md**: registered as optional workflow skill
-- **README.md**: routing table row "Browser E2E testing or automation" → browser-e2e
-
-## File Locations
-
-| File | Purpose |
-|------|---------|
+- **MEMORY.md**: registered as optional workflow skill
+- **README.md**: routing table row "Browser E2E testing or automation" -> browser-e2e
+
+## File Locations
+
+| File | Purpose |
+|------|---------|
 | `.claude/skills/wf-browser/SKILL.md` | Claude Code skill adapter |
 | `.agents/skills/wf-browser/SKILL.md` | Codex repo skill adapter |
-| `Harness/workflows/browser-e2e.md` | This file — workflow contract and install guide |
-| `~/.claude/skills/browser-use/SKILL.md` | Official Browser Use skill (user-level, auto-downloaded) |
-| `pip show browser-use \| findstr Location` | Python package install location (run to find) |
-| `~/.browser-use/` | Daemon state and browser profiles |
+| `Harness/workflows/browser-e2e.md` | This file - workflow contract and install guide |
+| `~/.claude/skills/browser-use/SKILL.md` | Official Browser Use skill (user-level, auto-downloaded) |
+| `pip show browser-use \| findstr Location` | Python package install location (run to find) |
+| `~/.browser-use/` | Daemon state and browser profiles |

package/templates/optional/skills/github-pr-review/Harness/workflows/github-pr-review.md

@@ -1,28 +1,28 @@
-# GitHub PR Review Workflow
-
-## Required Evidence
-
-- PR URL or number and base/head refs.
-- Diff or changed-file summary.
-- CI/check status and relevant failing logs.
-- Review findings with exact file and line references when available.
-
-## Common Commands
-
-```powershell
-gh pr view --web
-gh pr view --json number,title,baseRefName,headRefName,mergeStateStatus,statusCheckRollup
-gh pr diff
-git diff --stat
-npm test
-```
-
-Use repository-specific test commands when they differ from npm.
-
-## Fallback
-
-If `gh` is unavailable or unauthenticated, use local git refs, remote URLs, and `git diff` against the target branch. Ask for missing PR context only when it cannot be inferred.
-
-## Windows Notes
-
-Quote branch names containing special characters. In PowerShell, pipe JSON output to tools that are available locally, or read it directly if `jq` is not installed.
+# GitHub PR Review Workflow
+
+## Required Evidence
+
+- PR URL or number and base/head refs.
+- Diff or changed-file summary.
+- CI/check status and relevant failing logs.
+- Review findings with exact file and line references when available.
+
+## Common Commands
+
+```powershell
+gh pr view --web
+gh pr view --json number,title,baseRefName,headRefName,mergeStateStatus,statusCheckRollup
+gh pr diff
+git diff --stat
+npm test
+```
+
+Use repository-specific test commands when they differ from npm.
+
+## Fallback
+
+If `gh` is unavailable or unauthenticated, use local git refs, remote URLs, and `git diff` against the target branch. Ask for missing PR context only when it cannot be inferred.
+
+## Windows Notes
+
+Quote branch names containing special characters. In PowerShell, pipe JSON output to tools that are available locally, or read it directly if `jq` is not installed.

package/templates/optional/skills/python-backend/Harness/workflows/python-backend.md

@@ -1,34 +1,34 @@
-# Python Backend Workflow
-
-## Required Evidence
-
-- Python executable, version, and dependency manager detected.
-- Unit/integration test command and result.
-- API smoke evidence for changed endpoints when applicable.
-- Migration, fixture, or environment assumptions.
-
-## Common Commands
-
-```powershell
-python --version
-py --version
-python3 --version
-python -m unittest discover -s tests
-py -m unittest discover -s tests
-python3 -m unittest discover -s tests
-python -m pytest
-python -m pytest tests
-uv run pytest
-poetry run pytest
-python -m uvicorn app.main:app --reload
-```
-
-Prefer commands already documented by the project. When no project-specific command is documented, detect an available Python executable in the current shell (`python`, then `py`, then `python3`) and run the matching `-m unittest discover -s tests` or pytest command. `unittest` is first-class for standard-library test suites; do not require pytest when the project already uses unittest.
-
-## Fallback
-
-If unittest, pytest, or the app runner is unavailable, run targeted Python modules, import checks, or framework-specific tests that already exist. Do not create or install a new backend stack without approval.
-
-## Windows Notes
-
-Virtual environment activation is usually `.\\.venv\\Scripts\\Activate.ps1`. If script execution is blocked, use the environment's Python executable directly, for example `.\\.venv\\Scripts\\python.exe -m unittest discover -s tests` or `.\\.venv\\Scripts\\python.exe -m pytest`.
+# Python Backend Workflow
+
+## Required Evidence
+
+- Python executable, version, and dependency manager detected.
+- Unit/integration test command and result.
+- API smoke evidence for changed endpoints when applicable.
+- Migration, fixture, or environment assumptions.
+
+## Common Commands
+
+```powershell
+python --version
+py --version
+python3 --version
+python -m unittest discover -s tests
+py -m unittest discover -s tests
+python3 -m unittest discover -s tests
+python -m pytest
+python -m pytest tests
+uv run pytest
+poetry run pytest
+python -m uvicorn app.main:app --reload
+```
+
+Prefer commands already documented by the project. When no project-specific command is documented, detect an available Python executable in the current shell (`python`, then `py`, then `python3`) and run the matching `-m unittest discover -s tests` or pytest command. `unittest` is first-class for standard-library test suites; do not require pytest when the project already uses unittest.
+
+## Fallback
+
+If unittest, pytest, or the app runner is unavailable, run targeted Python modules, import checks, or framework-specific tests that already exist. Do not create or install a new backend stack without approval.
+
+## Windows Notes
+
+Virtual environment activation is usually `.\\.venv\\Scripts\\Activate.ps1`. If script execution is blocked, use the environment's Python executable directly, for example `.\\.venv\\Scripts\\python.exe -m unittest discover -s tests` or `.\\.venv\\Scripts\\python.exe -m pytest`.

package/templates/optional/skills/ts-react-frontend/Harness/workflows/ts-react-frontend.md

@@ -1,35 +1,35 @@
-# TypeScript React Frontend Workflow
-
-## Required Evidence
-
-- Package manager and scripts detected.
-- Typecheck, lint, test, or build results according to project conventions.
-- Real-browser smoke or screenshot evidence for user-visible changes.
-- Console/runtime error check result for the changed screen or flow.
-- Notes on responsive behavior and important interaction states.
+# TypeScript React Frontend Workflow
+
+## Required Evidence
+
+- Package manager and scripts detected.
+- Typecheck, lint, test, or build results according to project conventions.
+- Real-browser smoke or screenshot evidence for user-visible changes.
+- Console/runtime error check result for the changed screen or flow.
+- Notes on responsive behavior and important interaction states.
 - Stable accessible labels/roles and stable test selectors such as `data-testid` are required for critical UI controls and states: inputs, buttons, filters, rows, empty/error/loading states.
-
-Typecheck, build, and unit tests are necessary signals but are not enough for user-visible React changes. Before claiming UI acceptance, load the app in a real browser by Playwright, Chrome DevTools/CDP, or a documented manual run and capture screenshot/trace/console evidence.
-For TS/React UI work, capture the selector contract in the feature doc before implementation so tests and manual checks can target stable selectors instead of component internals or brittle DOM paths.
-
-## Common Commands
-
-```powershell
-npm run typecheck
-npm run lint
-npm test
-npm run build
-npm run dev
-pnpm test
-yarn test
-```
-
-Use the package manager and scripts already present in the repository.
-
-## Fallback
-
-If no formal checks exist, run the closest available build or dev command, inspect the changed UI manually, and document the missing automation. Do not add dependencies unless the task requires it and the user approves.
-
-## Windows Notes
-
-Use PowerShell syntax for environment variables: `$env:VITE_API_URL='http://localhost:8000'; npm run dev`. Quote paths and prefer package scripts over shell-specific command chains.
+
+Typecheck, build, and unit tests are necessary signals but are not enough for user-visible React changes. Before claiming UI acceptance, load the app in a real browser by Playwright, Chrome DevTools/CDP, or a documented manual run and capture screenshot/trace/console evidence.
+For TS/React UI work, capture the selector contract in the feature doc before implementation so tests and manual checks can target stable selectors instead of component internals or brittle DOM paths.
+
+## Common Commands
+
+```powershell
+npm run typecheck
+npm run lint
+npm test
+npm run build
+npm run dev
+pnpm test
+yarn test
+```
+
+Use the package manager and scripts already present in the repository.
+
+## Fallback
+
+If no formal checks exist, run the closest available build or dev command, inspect the changed UI manually, and document the missing automation. Do not add dependencies unless the task requires it and the user approves.
+
+## Windows Notes
+
+Use PowerShell syntax for environment variables: `$env:VITE_API_URL='http://localhost:8000'; npm run dev`. Quote paths and prefer package scripts over shell-specific command chains.

package/templates/optional/skills/ui-ux-review/Harness/workflows/ui-ux-review.md

@@ -1,26 +1,26 @@
-# UI/UX Review Workflow
-
-## Required Evidence
-
-- Screenshots for desktop and mobile views.
-- Notes on layout, typography, interaction states, accessibility, and empty/loading/error states.
-- Any automated accessibility, lint, or visual test output available in the project.
-
-## Common Commands
-
-```powershell
-npm run dev
-npm run lint
-npm run test
-npx playwright test
-```
-
-Use the project's existing commands first. Browser screenshots may come from Playwright, CDP, framework tooling, or manual capture.
-
-## Fallback
-
-When automation is unavailable, inspect the running UI manually at representative viewport sizes and document findings with screenshots. Avoid adding design or test dependencies without approval.
-
-## Windows Notes
-
-PowerShell does not support POSIX inline environment variables. Use `$env:NAME='value'; command` and quote screenshot paths with spaces.
+# UI/UX Review Workflow
+
+## Required Evidence
+
+- Screenshots for desktop and mobile views.
+- Notes on layout, typography, interaction states, accessibility, and empty/loading/error states.
+- Any automated accessibility, lint, or visual test output available in the project.
+
+## Common Commands
+
+```powershell
+npm run dev
+npm run lint
+npm run test
+npx playwright test
+```
+
+Use the project's existing commands first. Browser screenshots may come from Playwright, CDP, framework tooling, or manual capture.
+
+## Fallback
+
+When automation is unavailable, inspect the running UI manually at representative viewport sizes and document findings with screenshots. Avoid adding design or test dependencies without approval.
+
+## Windows Notes
+
+PowerShell does not support POSIX inline environment variables. Use `$env:NAME='value'; command` and quote screenshot paths with spaces.