Update skills

Author: ryaneggz

.claude/commands/ralph/ticket.md

@@ -125,9 +125,10 @@ SUBAGENTS: $ARGUMENTS.subagents (default: 3)
      - Backend and frontend changes are SEPARATE stories
      - Schema/migration changes are SEPARATE from logic that uses them
      - If a task spans >3 files, SPLIT into multiple stories
+     - Stories touching 2+ files: Add "Use parallel-edits skill for coordinated changes" to acceptance criteria
      - Dependency order: Schema → Backend → Frontend → Integration
      - Add "Typecheck passes" to every story
-     - Add "Verify in browser using dev-browser skill" to UI stories
+     - Add "Verify in browser using agent-browser skill" to UI stories
      ```
    - _EXECUTE_ query from worktree directory
    - _VERIFY_ PRD was created at `tasks/prd-<feature-slug>.md`
@@ -150,6 +151,7 @@ SUBAGENTS: $ARGUMENTS.subagents (default: 3)
 11. _LAUNCH_ Ralph autonomous implementation loop:
     - _REPORT_ "Starting Ralph autonomous loop for <N> user stories..."
     - RUN `cd ./.worktrees/<prefix>-<number> && bash ../../.ralph/ralph.sh 200` to execute Ralph
+    - Ralph has access to `.ralph/skills/parallel-edits/SKILL.md` for efficient multi-file changes
     - Ralph will:
       - Read `.ralph/prd.json` for user stories (resolved via SCRIPT_DIR at repo root)
       - Pick highest priority story with `passes: false`

.claude/skills/agent-browser/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: agent-browser
+description: "Browser automation with persistent page state using Vercel's agent-browser CLI. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include 'go to [url]', 'click on', 'fill out the form', 'take a screenshot', 'scrape', 'automate', 'test the website', 'log into', or any browser interaction request."
+---
+
+# agent-browser
+
+Browser automation via the `agent-browser` CLI (https://github.com/vercel-labs/agent-browser).
+
+## Quick Reference
+
+All commands are run via Bash: `agent-browser <command> [args]`.
+
+| Action | Command |
+|--------|---------|
+| Navigate | `agent-browser open <url>` |
+| Screenshot | `agent-browser screenshot [path]` (`--full` for full page) |
+| Accessibility snapshot | `agent-browser snapshot` (returns `@e1`, `@e2` refs) |
+| Click | `agent-browser click <selector-or-ref>` |
+| Fill input | `agent-browser fill <selector-or-ref> "<text>"` |
+| Type (append) | `agent-browser type <selector-or-ref> "<text>"` |
+| Key press | `agent-browser press <key>` |
+| Read text | `agent-browser get text <selector-or-ref>` |
+| Get URL/title | `agent-browser get url` / `agent-browser get title` |
+| Wait | `agent-browser wait <selector>` or `agent-browser wait <ms>` |
+| Semantic find | `agent-browser find role button click` |
+| Close | `agent-browser close` |
+
+## Selectors
+
+Three types:
+- **CSS**: `#id`, `.class`, `input[name="email"]`
+- **Snapshot refs**: `@e1`, `@e2` (from `snapshot` output)
+- **Semantic**: `find role button "Submit"` (ARIA roles, text, labels)
+
+## Agent Workflow
+
+1. **Navigate + snapshot**: `agent-browser open <url> && agent-browser snapshot --json`
+2. **Parse refs** from JSON output to identify interactive elements
+3. **Act** using refs: `agent-browser click @e2`, `agent-browser fill @e3 "hello"`
+4. **Re-snapshot** after each action to observe new state
+5. **Screenshot** when visual verification is needed
+
+## JSON Output
+
+Add `--json` to any command for structured output:
+```json
+{"success": true, "data": {...}}
+```
+
+## Sessions
+
+Use `--session <name>` for isolated sessions or `--profile <path>` for persistent cookies/storage.
+
+## Full Documentation
+
+See https://github.com/vercel-labs/agent-browser for complete docs, cloud provider setup, and WebSocket streaming.

.claude/skills/prd/SKILL.md

@@ -82,12 +82,12 @@ Each story should be small enough to implement in one focused session.
 - [ ] Specific verifiable criterion
 - [ ] Another criterion
 - [ ] Typecheck/lint passes
-- [ ] **[UI stories only]** Verify in browser using dev-browser skill
+- [ ] **[UI stories only]** Verify in browser using agent-browser skill
 ```
 
 **Important:** 
 - Acceptance criteria must be verifiable, not vague. "Works correctly" is bad. "Button shows confirmation dialog before deleting" is good.
-- **For any story with UI changes:** Always include "Verify in browser using dev-browser skill" as acceptance criteria. This ensures visual verification of frontend work.
+- **For any story with UI changes:** Always include "Verify in browser using agent-browser skill" as acceptance criteria. This ensures visual verification of frontend work.
 
 ### 4. Functional Requirements
 Numbered list of specific functionalities:
@@ -172,7 +172,7 @@ Add priority levels to tasks so users can focus on what matters most. Tasks can
 - [ ] Each task card shows colored priority badge (red=high, yellow=medium, gray=low)
 - [ ] Priority visible without hovering or clicking
 - [ ] Typecheck passes
-- [ ] Verify in browser using dev-browser skill
+- [ ] Verify in browser using agent-browser skill
 
 ### US-003: Add priority selector to task edit
 **Description:** As a user, I want to change a task's priority when editing it.
@@ -182,7 +182,7 @@ Add priority levels to tasks so users can focus on what matters most. Tasks can
 - [ ] Shows current priority as selected
 - [ ] Saves immediately on selection change
 - [ ] Typecheck passes
-- [ ] Verify in browser using dev-browser skill
+- [ ] Verify in browser using agent-browser skill
 
 ### US-004: Filter tasks by priority
 **Description:** As a user, I want to filter the task list to see only high-priority items when I'm focused.
@@ -192,7 +192,7 @@ Add priority levels to tasks so users can focus on what matters most. Tasks can
 - [ ] Filter persists in URL params
 - [ ] Empty state message when no tasks match filter
 - [ ] Typecheck passes
-- [ ] Verify in browser using dev-browser skill
+- [ ] Verify in browser using agent-browser skill
 
 ## Functional Requirements
 

.claude/skills/ralph/SKILL.md

@@ -108,10 +108,10 @@ For stories with testable logic, also include:
 
 ### For stories that change UI, also include:
 ```
-"Verify in browser using dev-browser skill"
+"Verify in browser using agent-browser skill"
 ```
 
-Frontend stories are NOT complete until visually verified. Ralph will use the dev-browser skill to navigate to the page, interact with the UI, and confirm changes work.
+Frontend stories are NOT complete until visually verified. Ralph will use the agent-browser skill to navigate to the page, interact with the UI, and confirm changes work.
 
 ---
 
@@ -188,7 +188,7 @@ Add ability to mark tasks with different statuses.
         "Each task card shows colored status badge",
         "Badge colors: gray=pending, blue=in_progress, green=done",
         "Typecheck passes",
-        "Verify in browser using dev-browser skill"
+        "Verify in browser using agent-browser skill"
       ],
       "priority": 2,
       "passes": false,
@@ -203,7 +203,7 @@ Add ability to mark tasks with different statuses.
         "Changing status saves immediately",
         "UI updates without page refresh",
         "Typecheck passes",
-        "Verify in browser using dev-browser skill"
+        "Verify in browser using agent-browser skill"
       ],
       "priority": 3,
       "passes": false,
@@ -217,7 +217,7 @@ Add ability to mark tasks with different statuses.
         "Filter dropdown: All | Pending | In Progress | Done",
         "Filter persists in URL params",
         "Typecheck passes",
-        "Verify in browser using dev-browser skill"
+        "Verify in browser using agent-browser skill"
       ],
       "priority": 4,
       "passes": false,
@@ -252,6 +252,6 @@ Before writing prd.json, verify:
 - [ ] Each story is completable in one iteration (small enough)
 - [ ] Stories are ordered by dependency (schema to backend to UI)
 - [ ] Every story has "Typecheck passes" as criterion
-- [ ] UI stories have "Verify in browser using dev-browser skill" as criterion
+- [ ] UI stories have "Verify in browser using agent-browser skill" as criterion
 - [ ] Acceptance criteria are verifiable (not vague)
 - [ ] No story depends on a later story

.ralph/prd.json.example

@@ -24,7 +24,7 @@
         "Each task card shows colored priority badge (red=high, yellow=medium, gray=low)",
         "Priority visible without hovering or clicking",
         "Typecheck passes",
-        "Verify in browser using dev-browser skill"
+        "Verify in browser using agent-browser skill"
       ],
       "priority": 2,
       "passes": false,
@@ -39,7 +39,7 @@
         "Shows current priority as selected",
         "Saves immediately on selection change",
         "Typecheck passes",
-        "Verify in browser using dev-browser skill"
+        "Verify in browser using agent-browser skill"
       ],
       "priority": 3,
       "passes": false,
@@ -54,7 +54,7 @@
         "Filter persists in URL params",
         "Empty state message when no tasks match filter",
         "Typecheck passes",
-        "Verify in browser using dev-browser skill"
+        "Verify in browser using agent-browser skill"
       ],
       "priority": 4,
       "passes": false,

.ralph/prompt.md

@@ -2,6 +2,12 @@
 
 You are an autonomous coding agent working on a software project.
 
+## Available Skills
+
+Before implementing a story, check if any skills in the `skills/` directory (relative to this file) apply. In particular:
+- **parallel-edits**: When a story requires changes to 2+ files, read all target files in parallel, validate edits, then execute all Edit calls in a single response. See `skills/parallel-edits/SKILL.md`.
+- **agent-browser**: For UI stories requiring browser verification, use the `agent-browser` CLI (not a Claude skill — it's a shell tool). See `skills/agent-browser/SKILL.md` for command reference.
+
 ## Your Task
 
 1. Read the PRD at `prd.json` (in the same directory as this file)
@@ -82,12 +88,12 @@ Only update AGENTS.md if you have **genuinely reusable knowledge** that would he
 
 ## Browser Testing (Required for Frontend Stories)
 
-For any story that changes UI, you MUST verify it works in the browser:
+For any story that changes UI, you MUST verify it works in the browser using the `agent-browser` CLI. See `skills/agent-browser/SKILL.md` for the full command reference.
 
-1. Load the `dev-browser` skill
-2. Navigate to the relevant page
-3. Verify the UI changes work as expected
-4. Take a screenshot if helpful for the progress log
+1. `agent-browser open <url>` — navigate to the relevant page
+2. `agent-browser snapshot --json` — get interactive element refs (`@e1`, `@e2`, …)
+3. Interact as needed: `agent-browser click @e2`, `agent-browser fill @e3 "text"`
+4. `agent-browser screenshot [path]` — capture visual proof for the progress log
 
 A frontend story is NOT complete until browser verification passes.
 

.ralph/skills/agent-browser

@@ -0,0 +1 @@
+../../.claude/skills/agent-browser

.ralph/skills/archive

@@ -0,0 +1 @@
+../../.claude/skills/ralph-archive

.ralph/skills/archive/SKILL.md

@@ -0,0 +1 @@
+../../.claude/skills/prd