@fro.bot/systematic 1.18.8 → 1.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agents/docs/ankane-readme-writer.md +67 -0
- package/agents/review/julik-frontend-races-reviewer.md +223 -0
- package/agents/review/kieran-python-reviewer.md +135 -0
- package/agents/review/schema-drift-detector.md +156 -0
- package/agents/workflow/every-style-editor.md +66 -0
- package/commands/agent-native-audit.md +4 -2
- package/commands/changelog.md +139 -0
- package/commands/create-agent-skill.md +5 -2
- package/commands/deepen-plan.md +50 -20
- package/commands/deploy-docs.md +120 -0
- package/commands/feature-video.md +352 -0
- package/commands/generate_command.md +164 -0
- package/commands/heal-skill.md +149 -0
- package/commands/lfg.md +14 -8
- package/commands/report-bug.md +151 -0
- package/commands/reproduce-bug.md +100 -0
- package/commands/resolve_parallel.md +36 -0
- package/commands/resolve_todo_parallel.md +37 -0
- package/commands/slfg.md +33 -0
- package/commands/test-browser.md +340 -0
- package/commands/test-xcode.md +333 -0
- package/commands/triage.md +311 -0
- package/commands/workflows/brainstorm.md +6 -1
- package/commands/workflows/compound.md +16 -13
- package/commands/workflows/plan.md +49 -1
- package/commands/workflows/review.md +28 -24
- package/commands/workflows/work.md +60 -25
- package/package.json +1 -1
- package/skills/andrew-kane-gem-writer/SKILL.md +185 -0
- package/skills/andrew-kane-gem-writer/references/database-adapters.md +231 -0
- package/skills/andrew-kane-gem-writer/references/module-organization.md +121 -0
- package/skills/andrew-kane-gem-writer/references/rails-integration.md +183 -0
- package/skills/andrew-kane-gem-writer/references/resources.md +119 -0
- package/skills/andrew-kane-gem-writer/references/testing-patterns.md +261 -0
- package/skills/dhh-rails-style/SKILL.md +186 -0
- package/skills/dhh-rails-style/references/architecture.md +653 -0
- package/skills/dhh-rails-style/references/controllers.md +303 -0
- package/skills/dhh-rails-style/references/frontend.md +510 -0
- package/skills/dhh-rails-style/references/gems.md +266 -0
- package/skills/dhh-rails-style/references/models.md +359 -0
- package/skills/dhh-rails-style/references/testing.md +338 -0
- package/skills/dspy-ruby/SKILL.md +738 -0
- package/skills/dspy-ruby/assets/config-template.rb +187 -0
- package/skills/dspy-ruby/assets/module-template.rb +300 -0
- package/skills/dspy-ruby/assets/signature-template.rb +221 -0
- package/skills/dspy-ruby/references/core-concepts.md +674 -0
- package/skills/dspy-ruby/references/observability.md +366 -0
- package/skills/dspy-ruby/references/optimization.md +603 -0
- package/skills/dspy-ruby/references/providers.md +418 -0
- package/skills/dspy-ruby/references/toolsets.md +502 -0
- package/skills/every-style-editor/SKILL.md +135 -0
- package/skills/every-style-editor/references/EVERY_WRITE_STYLE.md +529 -0
- package/skills/gemini-imagegen/SKILL.md +238 -0
- package/skills/gemini-imagegen/requirements.txt +2 -0
- package/skills/gemini-imagegen/scripts/compose_images.py +157 -0
- package/skills/gemini-imagegen/scripts/edit_image.py +144 -0
- package/skills/gemini-imagegen/scripts/gemini_images.py +263 -0
- package/skills/gemini-imagegen/scripts/generate_image.py +133 -0
- package/skills/gemini-imagegen/scripts/multi_turn_chat.py +216 -0
- package/skills/rclone/SKILL.md +151 -0
- package/skills/rclone/scripts/check_setup.sh +60 -0
- package/skills/resolve-pr-parallel/SKILL.md +90 -0
- package/skills/resolve-pr-parallel/scripts/get-pr-comments +68 -0
- package/skills/resolve-pr-parallel/scripts/resolve-pr-thread +23 -0
- package/skills/setup/SKILL.md +168 -0
- package/skills/skill-creator/SKILL.md +211 -0
- package/skills/skill-creator/scripts/init_skill.py +303 -0
- package/skills/skill-creator/scripts/package_skill.py +110 -0
- package/skills/skill-creator/scripts/quick_validate.py +65 -0
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: report-bug
|
|
3
|
+
description: Report a bug in the systematic plugin
|
|
4
|
+
argument-hint: '[optional: brief description of the bug]'
|
|
5
|
+
disable-model-invocation: true
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Report a Systematic Plugin Bug
|
|
9
|
+
|
|
10
|
+
Report bugs encountered while using the systematic plugin. This command gathers structured information and creates a GitHub issue for the maintainer.
|
|
11
|
+
|
|
12
|
+
## Step 1: Gather Bug Information
|
|
13
|
+
|
|
14
|
+
Use the question tool to collect the following information:
|
|
15
|
+
|
|
16
|
+
**Question 1: Bug Category**
|
|
17
|
+
- What type of issue are you experiencing?
|
|
18
|
+
- Options: Agent not working, Command not working, Skill not working, MCP server issue, Installation problem, Other
|
|
19
|
+
|
|
20
|
+
**Question 2: Specific Component**
|
|
21
|
+
- Which specific component is affected?
|
|
22
|
+
- Ask for the name of the agent, command, skill, or MCP server
|
|
23
|
+
|
|
24
|
+
**Question 3: What Happened (Actual Behavior)**
|
|
25
|
+
- Ask: "What happened when you used this component?"
|
|
26
|
+
- Get a clear description of the actual behavior
|
|
27
|
+
|
|
28
|
+
**Question 4: What Should Have Happened (Expected Behavior)**
|
|
29
|
+
- Ask: "What did you expect to happen instead?"
|
|
30
|
+
- Get a clear description of expected behavior
|
|
31
|
+
|
|
32
|
+
**Question 5: Steps to Reproduce**
|
|
33
|
+
- Ask: "What steps did you take before the bug occurred?"
|
|
34
|
+
- Get reproduction steps
|
|
35
|
+
|
|
36
|
+
**Question 6: Error Messages**
|
|
37
|
+
- Ask: "Did you see any error messages? If so, please share them."
|
|
38
|
+
- Capture any error output
|
|
39
|
+
|
|
40
|
+
## Step 2: Collect Environment Information
|
|
41
|
+
|
|
42
|
+
Automatically gather:
|
|
43
|
+
```bash
|
|
44
|
+
# Get plugin version
|
|
45
|
+
cat ~/.opencode/plugins/installed_plugins.json 2>/dev/null | grep -A5 "systematic" | head -10 || echo "Plugin info not found"
|
|
46
|
+
|
|
47
|
+
# Get OpenCode version
|
|
48
|
+
opencode --version 2>/dev/null || echo "OpenCode version unknown"
|
|
49
|
+
|
|
50
|
+
# Get OS info
|
|
51
|
+
uname -a
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Step 3: Format the Bug Report
|
|
55
|
+
|
|
56
|
+
Create a well-structured bug report with:
|
|
57
|
+
|
|
58
|
+
```markdown
|
|
59
|
+
## Bug Description
|
|
60
|
+
|
|
61
|
+
**Component:** [Type] - [Name]
|
|
62
|
+
**Summary:** [Brief description from argument or collected info]
|
|
63
|
+
|
|
64
|
+
## Environment
|
|
65
|
+
|
|
66
|
+
- **Plugin Version:** [from installed_plugins.json]
|
|
67
|
+
- **OpenCode Version:** [from opencode --version]
|
|
68
|
+
- **OS:** [from uname]
|
|
69
|
+
|
|
70
|
+
## What Happened
|
|
71
|
+
|
|
72
|
+
[Actual behavior description]
|
|
73
|
+
|
|
74
|
+
## Expected Behavior
|
|
75
|
+
|
|
76
|
+
[Expected behavior description]
|
|
77
|
+
|
|
78
|
+
## Steps to Reproduce
|
|
79
|
+
|
|
80
|
+
1. [Step 1]
|
|
81
|
+
2. [Step 2]
|
|
82
|
+
3. [Step 3]
|
|
83
|
+
|
|
84
|
+
## Error Messages
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
[Any error output]
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Additional Context
|
|
91
|
+
|
|
92
|
+
[Any other relevant information]
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
*Reported via `/report-bug` command*
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Step 4: Create GitHub Issue
|
|
99
|
+
|
|
100
|
+
Use the GitHub CLI to create the issue:
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
gh issue create \
|
|
104
|
+
--repo marcusrbrown/systematic \
|
|
105
|
+
--title "[systematic] Bug: [Brief description]" \
|
|
106
|
+
--body "[Formatted bug report from Step 3]" \
|
|
107
|
+
--label "bug,systematic"
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
**Note:** If labels don't exist, create without labels:
|
|
111
|
+
```bash
|
|
112
|
+
gh issue create \
|
|
113
|
+
--repo marcusrbrown/systematic \
|
|
114
|
+
--title "[systematic] Bug: [Brief description]" \
|
|
115
|
+
--body "[Formatted bug report]"
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Step 5: Confirm Submission
|
|
119
|
+
|
|
120
|
+
After the issue is created:
|
|
121
|
+
1. Display the issue URL to the user
|
|
122
|
+
2. Thank them for reporting the bug
|
|
123
|
+
3. Let them know the maintainer will be notified
|
|
124
|
+
|
|
125
|
+
## Output Format
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
✅ Bug report submitted successfully!
|
|
129
|
+
|
|
130
|
+
Issue: https://github.com/marcusrbrown/systematic/issues/[NUMBER]
|
|
131
|
+
Title: [systematic] Bug: [description]
|
|
132
|
+
|
|
133
|
+
Thank you for helping improve the systematic plugin!
|
|
134
|
+
The maintainer will review your report and respond as soon as possible.
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Error Handling
|
|
138
|
+
|
|
139
|
+
- If `gh` CLI is not authenticated: Prompt user to run `gh auth login` first
|
|
140
|
+
- If issue creation fails: Display the formatted report so user can manually create the issue
|
|
141
|
+
- If required information is missing: Re-prompt for that specific field
|
|
142
|
+
|
|
143
|
+
## Privacy Notice
|
|
144
|
+
|
|
145
|
+
This command does NOT collect:
|
|
146
|
+
- Personal information
|
|
147
|
+
- API keys or credentials
|
|
148
|
+
- Private code from your projects
|
|
149
|
+
- File paths beyond basic OS info
|
|
150
|
+
|
|
151
|
+
Only technical information about the bug is included in the report.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: reproduce-bug
|
|
3
|
+
description: Reproduce and investigate a bug using logs, console inspection, and browser screenshots
|
|
4
|
+
argument-hint: '[GitHub issue number]'
|
|
5
|
+
disable-model-invocation: true
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Reproduce Bug Command
|
|
9
|
+
|
|
10
|
+
Look at github issue #$ARGUMENTS and read the issue description and comments.
|
|
11
|
+
|
|
12
|
+
## Phase 1: Log Investigation
|
|
13
|
+
|
|
14
|
+
Run the following agents in parallel to investigate the bug:
|
|
15
|
+
|
|
16
|
+
1. Spawn explore agents to investigate logs and console output relevant to the issue.
|
|
17
|
+
2. Spawn explore agents to investigate logs and console output relevant to the issue.
|
|
18
|
+
|
|
19
|
+
Think about the places it could go wrong looking at the codebase. Look for logging output we can look for.
|
|
20
|
+
|
|
21
|
+
Run the agents again to find any logs that could help us reproduce the bug.
|
|
22
|
+
|
|
23
|
+
Keep running these agents until you have a good idea of what is going on.
|
|
24
|
+
|
|
25
|
+
## Phase 2: Visual Reproduction with Playwright
|
|
26
|
+
|
|
27
|
+
If the bug is UI-related or involves user flows, use Playwright to visually reproduce it:
|
|
28
|
+
|
|
29
|
+
### Step 1: Verify Server is Running
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
mcp__playwright__browser_navigate({ url: "http://localhost:3000" })
|
|
33
|
+
mcp__playwright__browser_snapshot({})
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
If server not running, inform user to start `bin/dev`.
|
|
37
|
+
|
|
38
|
+
### Step 2: Navigate to Affected Area
|
|
39
|
+
|
|
40
|
+
Based on the issue description, navigate to the relevant page:
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
mcp__playwright__browser_navigate({ url: "http://localhost:3000/[affected_route]" })
|
|
44
|
+
mcp__playwright__browser_snapshot({})
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Step 3: Capture Screenshots
|
|
48
|
+
|
|
49
|
+
Take screenshots at each step of reproducing the bug:
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
mcp__playwright__browser_take_screenshot({ filename: "bug-[issue]-step-1.png" })
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Step 4: Follow User Flow
|
|
56
|
+
|
|
57
|
+
Reproduce the exact steps from the issue:
|
|
58
|
+
|
|
59
|
+
1. **Read the issue's reproduction steps**
|
|
60
|
+
2. **Execute each step using Playwright:**
|
|
61
|
+
- `browser_click` for clicking elements
|
|
62
|
+
- `browser_type` for filling forms
|
|
63
|
+
- `browser_snapshot` to see the current state
|
|
64
|
+
- `browser_take_screenshot` to capture evidence
|
|
65
|
+
|
|
66
|
+
3. **Check for console errors:**
|
|
67
|
+
```
|
|
68
|
+
mcp__playwright__browser_console_messages({ level: "error" })
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Step 5: Capture Bug State
|
|
72
|
+
|
|
73
|
+
When you reproduce the bug:
|
|
74
|
+
|
|
75
|
+
1. Take a screenshot of the bug state
|
|
76
|
+
2. Capture console errors
|
|
77
|
+
3. Document the exact steps that triggered it
|
|
78
|
+
|
|
79
|
+
```
|
|
80
|
+
mcp__playwright__browser_take_screenshot({ filename: "bug-[issue]-reproduced.png" })
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Phase 3: Document Findings
|
|
84
|
+
|
|
85
|
+
**Reference Collection:**
|
|
86
|
+
|
|
87
|
+
- [ ] Document all research findings with specific file paths (e.g., `app/services/example_service.rb:42`)
|
|
88
|
+
- [ ] Include screenshots showing the bug reproduction
|
|
89
|
+
- [ ] List console errors if any
|
|
90
|
+
- [ ] Document the exact reproduction steps
|
|
91
|
+
|
|
92
|
+
## Phase 4: Report Back
|
|
93
|
+
|
|
94
|
+
Add a comment to the issue with:
|
|
95
|
+
|
|
96
|
+
1. **Findings** - What you discovered about the cause
|
|
97
|
+
2. **Reproduction Steps** - Exact steps to reproduce (verified)
|
|
98
|
+
3. **Screenshots** - Visual evidence of the bug (upload captured screenshots)
|
|
99
|
+
4. **Relevant Code** - File paths and line numbers
|
|
100
|
+
5. **Suggested Fix** - If you have one
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: resolve_parallel
|
|
3
|
+
description: Resolve all TODO comments using parallel processing
|
|
4
|
+
argument-hint: '[optional: specific TODO pattern or file]'
|
|
5
|
+
disable-model-invocation: true
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Resolve all TODO comments using parallel processing.
|
|
9
|
+
|
|
10
|
+
## Workflow
|
|
11
|
+
|
|
12
|
+
### 1. Analyze
|
|
13
|
+
|
|
14
|
+
Gather the things todo from above.
|
|
15
|
+
|
|
16
|
+
### 2. Plan
|
|
17
|
+
|
|
18
|
+
Create a todowrite list of all unresolved items grouped by type.Make sure to look at dependencies that might occur and prioritize the ones needed by others. For example, if you need to change a name, you must wait to do the others. Output a mermaid flow diagram showing how we can do this. Can we do everything in parallel? Do we need to do one first that leads to others in parallel? I'll put the to-dos in the mermaid diagram flow‑wise so the agent knows how to proceed in order.
|
|
19
|
+
|
|
20
|
+
### 3. Implement (PARALLEL)
|
|
21
|
+
|
|
22
|
+
Spawn a pr-comment-resolver agent for each unresolved item in parallel.
|
|
23
|
+
|
|
24
|
+
So if there are 3 comments, it will spawn 3 pr-comment-resolver agents in parallel. liek this
|
|
25
|
+
|
|
26
|
+
1. task pr-comment-resolver(comment1)
|
|
27
|
+
2. task pr-comment-resolver(comment2)
|
|
28
|
+
3. task pr-comment-resolver(comment3)
|
|
29
|
+
|
|
30
|
+
Always run all in parallel subagents/Tasks for each Todo item.
|
|
31
|
+
|
|
32
|
+
### 4. Commit & Resolve
|
|
33
|
+
|
|
34
|
+
- Commit changes
|
|
35
|
+
- Push to remote
|
|
36
|
+
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: resolve_todo_parallel
|
|
3
|
+
description: Resolve all pending CLI todos using parallel processing
|
|
4
|
+
argument-hint: '[optional: specific todo ID or pattern]'
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Resolve all TODO comments using parallel processing.
|
|
8
|
+
|
|
9
|
+
## Workflow
|
|
10
|
+
|
|
11
|
+
### 1. Analyze
|
|
12
|
+
|
|
13
|
+
Get all unresolved TODOs from the /todos/\*.md directory
|
|
14
|
+
|
|
15
|
+
If any todo recommends deleting, removing, or gitignoring files in `docs/plans/` or `docs/solutions/`, skip it and mark it as `wont_fix`. These are systematic pipeline artifacts that are intentional and permanent.
|
|
16
|
+
|
|
17
|
+
### 2. Plan
|
|
18
|
+
|
|
19
|
+
Create a todowrite list of all unresolved items grouped by type.Make sure to look at dependencies that might occur and prioritize the ones needed by others. For example, if you need to change a name, you must wait to do the others. Output a mermaid flow diagram showing how we can do this. Can we do everything in parallel? Do we need to do one first that leads to others in parallel? I'll put the to-dos in the mermaid diagram flow‑wise so the agent knows how to proceed in order.
|
|
20
|
+
|
|
21
|
+
### 3. Implement (PARALLEL)
|
|
22
|
+
|
|
23
|
+
Spawn a pr-comment-resolver agent for each unresolved item in parallel.
|
|
24
|
+
|
|
25
|
+
So if there are 3 comments, it will spawn 3 pr-comment-resolver agents in parallel. liek this
|
|
26
|
+
|
|
27
|
+
1. task pr-comment-resolver(comment1)
|
|
28
|
+
2. task pr-comment-resolver(comment2)
|
|
29
|
+
3. task pr-comment-resolver(comment3)
|
|
30
|
+
|
|
31
|
+
Always run all in parallel subagents/Tasks for each Todo item.
|
|
32
|
+
|
|
33
|
+
### 4. Commit & Resolve
|
|
34
|
+
|
|
35
|
+
- Commit changes
|
|
36
|
+
- Remove the TODO from the file, and mark it as resolved.
|
|
37
|
+
- Push to remote
|
package/commands/slfg.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: slfg
|
|
3
|
+
description: Full autonomous engineering workflow using swarm mode for parallel execution
|
|
4
|
+
argument-hint: '[feature description]'
|
|
5
|
+
disable-model-invocation: true
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Swarm-enabled LFG. Run these steps in order, parallelizing where indicated. Do not stop between steps — complete every step through to the end.
|
|
9
|
+
|
|
10
|
+
## Sequential Phase
|
|
11
|
+
|
|
12
|
+
1. **Optional:** If the `ralph-wiggum` skill is available, run `/ralph-wiggum:ralph-loop "finish all slash commands" --completion-promise "DONE"`. If not available or it fails, skip and continue to step 2 immediately.
|
|
13
|
+
2. `/workflows:plan $ARGUMENTS`
|
|
14
|
+
3. `/systematic:deepen-plan`
|
|
15
|
+
4. `/workflows:work` — **Use swarm mode**: Make a Task list and launch an army of agent swarm subagents to build the plan
|
|
16
|
+
|
|
17
|
+
## Parallel Phase
|
|
18
|
+
|
|
19
|
+
After work completes, launch steps 5 and 6 as **parallel swarm agents** (both only need code to be written):
|
|
20
|
+
|
|
21
|
+
5. `/workflows:review` — spawn as background Task agent
|
|
22
|
+
6. `/systematic:test-browser` — spawn as background Task agent
|
|
23
|
+
|
|
24
|
+
Wait for both to complete before continuing.
|
|
25
|
+
|
|
26
|
+
## Finalize Phase
|
|
27
|
+
|
|
28
|
+
7. `/systematic:resolve_todo_parallel` — resolve any findings from the review
|
|
29
|
+
8. `/systematic:feature-video` — record the final walkthrough and add to PR
|
|
30
|
+
9. Output `<promise>DONE</promise>` when video is in PR
|
|
31
|
+
|
|
32
|
+
Start with step 1 now.
|
|
33
|
+
|
|
@@ -0,0 +1,340 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: test-browser
|
|
3
|
+
description: Run browser tests on pages affected by current PR or branch
|
|
4
|
+
argument-hint: '[PR number, branch name, or ''current'' for current branch]'
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Browser Test Command
|
|
8
|
+
|
|
9
|
+
<command_purpose>Run end-to-end browser tests on pages affected by a PR or branch changes using agent-browser CLI.</command_purpose>
|
|
10
|
+
|
|
11
|
+
## CRITICAL: Use agent-browser CLI Only
|
|
12
|
+
|
|
13
|
+
**DO NOT use Chrome MCP tools (mcp__claude-in-chrome__*).**
|
|
14
|
+
|
|
15
|
+
This command uses the `agent-browser` CLI exclusively. The agent-browser CLI is a Bash-based tool from Vercel that runs headless Chromium. It is NOT the same as Chrome browser automation via MCP.
|
|
16
|
+
|
|
17
|
+
If you find yourself calling `mcp__claude-in-chrome__*` tools, STOP. Use `agent-browser` Bash commands instead.
|
|
18
|
+
|
|
19
|
+
## Introduction
|
|
20
|
+
|
|
21
|
+
<role>QA Engineer specializing in browser-based end-to-end testing</role>
|
|
22
|
+
|
|
23
|
+
This command tests affected pages in a real browser, catching issues that unit tests miss:
|
|
24
|
+
- JavaScript integration bugs
|
|
25
|
+
- CSS/layout regressions
|
|
26
|
+
- User workflow breakages
|
|
27
|
+
- Console errors
|
|
28
|
+
|
|
29
|
+
## Prerequisites
|
|
30
|
+
|
|
31
|
+
<requirements>
|
|
32
|
+
- Local development server running (e.g., `bin/dev`, `rails server`, `npm run dev`)
|
|
33
|
+
- agent-browser CLI installed (see Setup below)
|
|
34
|
+
- Git repository with changes to test
|
|
35
|
+
</requirements>
|
|
36
|
+
|
|
37
|
+
## Setup
|
|
38
|
+
|
|
39
|
+
**Check installation:**
|
|
40
|
+
```bash
|
|
41
|
+
command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
**Install if needed:**
|
|
45
|
+
```bash
|
|
46
|
+
npm install -g agent-browser
|
|
47
|
+
agent-browser install # Downloads Chromium (~160MB)
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
See the `agent-browser` skill for detailed usage.
|
|
51
|
+
|
|
52
|
+
## Main Tasks
|
|
53
|
+
|
|
54
|
+
### 0. Verify agent-browser Installation
|
|
55
|
+
|
|
56
|
+
Before starting ANY browser testing, verify agent-browser is installed:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
command -v agent-browser >/dev/null 2>&1 && echo "Ready" || (echo "Installing..." && npm install -g agent-browser && agent-browser install)
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
If installation fails, inform the user and stop.
|
|
63
|
+
|
|
64
|
+
### 1. Ask Browser Mode
|
|
65
|
+
|
|
66
|
+
<ask_browser_mode>
|
|
67
|
+
|
|
68
|
+
Before starting tests, ask user if they want to watch the browser:
|
|
69
|
+
|
|
70
|
+
Use question with:
|
|
71
|
+
- Question: "Do you want to watch the browser tests run?"
|
|
72
|
+
- Options:
|
|
73
|
+
1. **Headed (watch)** - Opens visible browser window so you can see tests run
|
|
74
|
+
2. **Headless (faster)** - Runs in background, faster but invisible
|
|
75
|
+
|
|
76
|
+
Store the choice and use `--headed` flag when user selects "Headed".
|
|
77
|
+
|
|
78
|
+
</ask_browser_mode>
|
|
79
|
+
|
|
80
|
+
### 2. Determine Test Scope
|
|
81
|
+
|
|
82
|
+
<test_target> $ARGUMENTS </test_target>
|
|
83
|
+
|
|
84
|
+
<determine_scope>
|
|
85
|
+
|
|
86
|
+
**If PR number provided:**
|
|
87
|
+
```bash
|
|
88
|
+
gh pr view [number] --json files -q '.files[].path'
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
**If 'current' or empty:**
|
|
92
|
+
```bash
|
|
93
|
+
git diff --name-only main...HEAD
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**If branch name provided:**
|
|
97
|
+
```bash
|
|
98
|
+
git diff --name-only main...[branch]
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
</determine_scope>
|
|
102
|
+
|
|
103
|
+
### 3. Map Files to Routes
|
|
104
|
+
|
|
105
|
+
<file_to_route_mapping>
|
|
106
|
+
|
|
107
|
+
Map changed files to testable routes:
|
|
108
|
+
|
|
109
|
+
| File Pattern | Route(s) |
|
|
110
|
+
|-------------|----------|
|
|
111
|
+
| `app/views/users/*` | `/users`, `/users/:id`, `/users/new` |
|
|
112
|
+
| `app/controllers/settings_controller.rb` | `/settings` |
|
|
113
|
+
| `app/javascript/controllers/*_controller.js` | Pages using that Stimulus controller |
|
|
114
|
+
| `app/components/*_component.rb` | Pages rendering that component |
|
|
115
|
+
| `app/views/layouts/*` | All pages (test homepage at minimum) |
|
|
116
|
+
| `app/assets/stylesheets/*` | Visual regression on key pages |
|
|
117
|
+
| `app/helpers/*_helper.rb` | Pages using that helper |
|
|
118
|
+
| `src/app/*` (Next.js) | Corresponding routes |
|
|
119
|
+
| `src/components/*` | Pages using those components |
|
|
120
|
+
|
|
121
|
+
Build a list of URLs to test based on the mapping.
|
|
122
|
+
|
|
123
|
+
</file_to_route_mapping>
|
|
124
|
+
|
|
125
|
+
### 4. Verify Server is Running
|
|
126
|
+
|
|
127
|
+
<check_server>
|
|
128
|
+
|
|
129
|
+
Before testing, verify the local server is accessible:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
agent-browser open http://localhost:3000
|
|
133
|
+
agent-browser snapshot -i
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
If server is not running, inform user:
|
|
137
|
+
```markdown
|
|
138
|
+
**Server not running**
|
|
139
|
+
|
|
140
|
+
Please start your development server:
|
|
141
|
+
- Rails: `bin/dev` or `rails server`
|
|
142
|
+
- Node/Next.js: `npm run dev`
|
|
143
|
+
|
|
144
|
+
Then run `/test-browser` again.
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
</check_server>
|
|
148
|
+
|
|
149
|
+
### 5. Test Each Affected Page
|
|
150
|
+
|
|
151
|
+
<test_pages>
|
|
152
|
+
|
|
153
|
+
For each affected route, use agent-browser CLI commands (NOT Chrome MCP):
|
|
154
|
+
|
|
155
|
+
**Step 1: Navigate and capture snapshot**
|
|
156
|
+
```bash
|
|
157
|
+
agent-browser open "http://localhost:3000/[route]"
|
|
158
|
+
agent-browser snapshot -i
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
**Step 2: For headed mode (visual debugging)**
|
|
162
|
+
```bash
|
|
163
|
+
agent-browser --headed open "http://localhost:3000/[route]"
|
|
164
|
+
agent-browser --headed snapshot -i
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
**Step 3: Verify key elements**
|
|
168
|
+
- Use `agent-browser snapshot -i` to get interactive elements with refs
|
|
169
|
+
- Page title/heading present
|
|
170
|
+
- Primary content rendered
|
|
171
|
+
- No error messages visible
|
|
172
|
+
- Forms have expected fields
|
|
173
|
+
|
|
174
|
+
**Step 4: Test critical interactions**
|
|
175
|
+
```bash
|
|
176
|
+
agent-browser click @e1 # Use ref from snapshot
|
|
177
|
+
agent-browser snapshot -i
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
**Step 5: Take screenshots**
|
|
181
|
+
```bash
|
|
182
|
+
agent-browser screenshot page-name.png
|
|
183
|
+
agent-browser screenshot --full page-name-full.png # Full page
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
</test_pages>
|
|
187
|
+
|
|
188
|
+
### 6. Human Verification (When Required)
|
|
189
|
+
|
|
190
|
+
<human_verification>
|
|
191
|
+
|
|
192
|
+
Pause for human input when testing touches:
|
|
193
|
+
|
|
194
|
+
| Flow Type | What to Ask |
|
|
195
|
+
|-----------|-------------|
|
|
196
|
+
| OAuth | "Please sign in with [provider] and confirm it works" |
|
|
197
|
+
| Email | "Check your inbox for the test email and confirm receipt" |
|
|
198
|
+
| Payments | "Complete a test purchase in sandbox mode" |
|
|
199
|
+
| SMS | "Verify you received the SMS code" |
|
|
200
|
+
| External APIs | "Confirm the [service] integration is working" |
|
|
201
|
+
|
|
202
|
+
Use question:
|
|
203
|
+
```markdown
|
|
204
|
+
**Human Verification Needed**
|
|
205
|
+
|
|
206
|
+
This test touches the [flow type]. Please:
|
|
207
|
+
1. [Action to take]
|
|
208
|
+
2. [What to verify]
|
|
209
|
+
|
|
210
|
+
Did it work correctly?
|
|
211
|
+
1. Yes - continue testing
|
|
212
|
+
2. No - describe the issue
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
</human_verification>
|
|
216
|
+
|
|
217
|
+
### 7. Handle Failures
|
|
218
|
+
|
|
219
|
+
<failure_handling>
|
|
220
|
+
|
|
221
|
+
When a test fails:
|
|
222
|
+
|
|
223
|
+
1. **Document the failure:**
|
|
224
|
+
- Screenshot the error state: `agent-browser screenshot error.png`
|
|
225
|
+
- Note the exact reproduction steps
|
|
226
|
+
|
|
227
|
+
2. **Ask user how to proceed:**
|
|
228
|
+
```markdown
|
|
229
|
+
**Test Failed: [route]**
|
|
230
|
+
|
|
231
|
+
Issue: [description]
|
|
232
|
+
Console errors: [if any]
|
|
233
|
+
|
|
234
|
+
How to proceed?
|
|
235
|
+
1. Fix now - I'll help debug and fix
|
|
236
|
+
2. Create todo - Add to todos/ for later
|
|
237
|
+
3. Skip - Continue testing other pages
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
3. **If "Fix now":**
|
|
241
|
+
- Investigate the issue
|
|
242
|
+
- Propose a fix
|
|
243
|
+
- Apply fix
|
|
244
|
+
- Re-run the failing test
|
|
245
|
+
|
|
246
|
+
4. **If "Create todo":**
|
|
247
|
+
- Create `{id}-pending-p1-browser-test-{description}.md`
|
|
248
|
+
- Continue testing
|
|
249
|
+
|
|
250
|
+
5. **If "Skip":**
|
|
251
|
+
- Log as skipped
|
|
252
|
+
- Continue testing
|
|
253
|
+
|
|
254
|
+
</failure_handling>
|
|
255
|
+
|
|
256
|
+
### 8. Test Summary
|
|
257
|
+
|
|
258
|
+
<test_summary>
|
|
259
|
+
|
|
260
|
+
After all tests complete, present summary:
|
|
261
|
+
|
|
262
|
+
```markdown
|
|
263
|
+
## Browser Test Results
|
|
264
|
+
|
|
265
|
+
**Test Scope:** PR #[number] / [branch name]
|
|
266
|
+
**Server:** http://localhost:3000
|
|
267
|
+
|
|
268
|
+
### Pages Tested: [count]
|
|
269
|
+
|
|
270
|
+
| Route | Status | Notes |
|
|
271
|
+
|-------|--------|-------|
|
|
272
|
+
| `/users` | Pass | |
|
|
273
|
+
| `/settings` | Pass | |
|
|
274
|
+
| `/dashboard` | Fail | Console error: [msg] |
|
|
275
|
+
| `/checkout` | Skip | Requires payment credentials |
|
|
276
|
+
|
|
277
|
+
### Console Errors: [count]
|
|
278
|
+
- [List any errors found]
|
|
279
|
+
|
|
280
|
+
### Human Verifications: [count]
|
|
281
|
+
- OAuth flow: Confirmed
|
|
282
|
+
- Email delivery: Confirmed
|
|
283
|
+
|
|
284
|
+
### Failures: [count]
|
|
285
|
+
- `/dashboard` - [issue description]
|
|
286
|
+
|
|
287
|
+
### Created Todos: [count]
|
|
288
|
+
- `005-pending-p1-browser-test-dashboard-error.md`
|
|
289
|
+
|
|
290
|
+
### Result: [PASS / FAIL / PARTIAL]
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
</test_summary>
|
|
294
|
+
|
|
295
|
+
## Quick Usage Examples
|
|
296
|
+
|
|
297
|
+
```bash
|
|
298
|
+
# Test current branch changes
|
|
299
|
+
/test-browser
|
|
300
|
+
|
|
301
|
+
# Test specific PR
|
|
302
|
+
/test-browser 847
|
|
303
|
+
|
|
304
|
+
# Test specific branch
|
|
305
|
+
/test-browser feature/new-dashboard
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
## agent-browser CLI Reference
|
|
309
|
+
|
|
310
|
+
**ALWAYS use these Bash commands. NEVER use mcp__claude-in-chrome__* tools.**
|
|
311
|
+
|
|
312
|
+
```bash
|
|
313
|
+
# Navigation
|
|
314
|
+
agent-browser open <url> # Navigate to URL
|
|
315
|
+
agent-browser back # Go back
|
|
316
|
+
agent-browser close # Close browser
|
|
317
|
+
|
|
318
|
+
# Snapshots (get element refs)
|
|
319
|
+
agent-browser snapshot -i # Interactive elements with refs (@e1, @e2, etc.)
|
|
320
|
+
agent-browser snapshot -i --json # JSON output
|
|
321
|
+
|
|
322
|
+
# Interactions (use refs from snapshot)
|
|
323
|
+
agent-browser click @e1 # Click element
|
|
324
|
+
agent-browser fill @e1 "text" # Fill input
|
|
325
|
+
agent-browser type @e1 "text" # Type without clearing
|
|
326
|
+
agent-browser press Enter # Press key
|
|
327
|
+
|
|
328
|
+
# Screenshots
|
|
329
|
+
agent-browser screenshot out.png # Viewport screenshot
|
|
330
|
+
agent-browser screenshot --full out.png # Full page screenshot
|
|
331
|
+
|
|
332
|
+
# Headed mode (visible browser)
|
|
333
|
+
agent-browser --headed open <url> # Open with visible browser
|
|
334
|
+
agent-browser --headed click @e1 # Click in visible browser
|
|
335
|
+
|
|
336
|
+
# Wait
|
|
337
|
+
agent-browser wait @e1 # Wait for element
|
|
338
|
+
agent-browser wait 2000 # Wait milliseconds
|
|
339
|
+
```
|
|
340
|
+
|