Skip to content

feat: add OpenClaw AgentSkills support #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dddabtc wants to merge 1 commit into
base: main
Choose a base branch
from
+2,210 −0
Open

feat: add OpenClaw AgentSkills support #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,21 @@ This is the setup I use. One person, ten parallel agents, each with the right co

## Install

gstack supports both Claude Code and [OpenClaw](https://github.com/nichochar/openclaw). Choose your platform:

### OpenClaw

See [openclaw/INSTALL.md](openclaw/INSTALL.md) for full instructions. Quick start:

```bash
git clone https://github.com/dddabtc/gstack.git
cp -r gstack/openclaw/skills/* ~/.openclaw/workspace/skills/
```

No binary compilation needed — OpenClaw's built-in browser tool replaces the compiled browse binary.

### Claude Code

**Requirements:** [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Git](https://git-scm.com/), [Bun](https://bun.sh/) v1.0+. `/browse` compiles a native binary — works on macOS and Linux (x64 and arm64).

### Step 1: Install on your machine
Expand Down
91 changes: 91 additions & 0 deletions openclaw/INSTALL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Installing gstack Skills for OpenClaw

## Quick Install

Copy the skill directories to your OpenClaw workspace:

```bash
# Clone the repo (if you haven't already)
git clone https://github.com/dddabtc/gstack.git
cd gstack

# Copy all OpenClaw skills to your workspace
cp -r openclaw/skills/* ~/.openclaw/workspace/skills/
```

## What Gets Installed

| Skill | Command | Description |
|-------|---------|-------------|
| plan-ceo-review | /plan-ceo-review | Founder/CEO product thinking — rethink the problem, find the 10-star product |
| plan-eng-review | /plan-eng-review | Engineering architecture review — lock in the execution plan |
| review | /review | Paranoid pre-landing code review for structural issues tests don't catch |
| ship | /ship | One-command shipping: sync, test, review, bump, commit, push, PR |
| browse | /browse | Browser automation for QA testing and site dogfooding |
| qa | /qa | Full QA with bug fixing — test, find bugs, fix them, re-verify |
| qa-only | /qa-only | Report-only QA — find and document bugs without fixing |
| setup-browser-cookies | /setup-browser-cookies | Import browser cookies for testing authenticated pages |
| retro | /retro | Weekly engineering retrospective with trend tracking |
| document-release | /document-release | Post-ship documentation update |

## Requirements

- [OpenClaw](https://github.com/nichochar/openclaw) installed and running
- `gh` CLI installed and authenticated (for /ship, /review, /retro)
- A git repository to work in (most skills are git-aware)

## Key Differences from Claude Code Version

The OpenClaw versions use OpenClaw's native tools instead of Claude Code's:

| Claude Code | OpenClaw |
|-------------|----------|
| Bash tool | `exec` tool |
| `$B goto/click/snapshot` (compiled browse binary) | `browser` tool (navigate, snapshot, act, screenshot) |
| AskUserQuestion | Direct conversation with user |
| Read/Write/Edit tools | `read`/`write`/`edit` tools |
| Grep/Glob tools | `exec` with grep/find |

### Browser Automation

The biggest change is browser automation. The original gstack uses a compiled Playwright binary
(`$B` commands). OpenClaw has a built-in browser tool that provides equivalent functionality:

| gstack `$B` command | OpenClaw equivalent |
|---------------------|---------------------|
| `$B goto <url>` | `browser(action: "navigate", url: "<url>")` |
| `$B snapshot -i` | `browser(action: "snapshot", refs: "aria")` |
| `$B click @e3` | `browser(action: "act", kind: "click", ref: "e3")` |
| `$B fill @e3 "value"` | `browser(action: "act", kind: "fill", ref: "e3", text: "value")` |
| `$B screenshot /tmp/shot.png` | `browser(action: "screenshot")` |
| `$B console --errors` | `browser(action: "console")` |
| `$B viewport 375x812` | `browser(action: "act", kind: "resize", width: 375, height: 812)` |
| `$B js "expr"` | `browser(action: "act", kind: "evaluate", fn: "expr")` |

## Selective Install

Install only the skills you need:

```bash
# Just the review + ship workflow
cp -r openclaw/skills/review ~/.openclaw/workspace/skills/
cp -r openclaw/skills/ship ~/.openclaw/workspace/skills/

# Just QA
cp -r openclaw/skills/qa ~/.openclaw/workspace/skills/
cp -r openclaw/skills/qa-only ~/.openclaw/workspace/skills/
cp -r openclaw/skills/browse ~/.openclaw/workspace/skills/

# Just planning
cp -r openclaw/skills/plan-ceo-review ~/.openclaw/workspace/skills/
cp -r openclaw/skills/plan-eng-review ~/.openclaw/workspace/skills/
```

## Uninstall

```bash
# Remove all gstack skills
for skill in plan-ceo-review plan-eng-review review ship browse qa qa-only setup-browser-cookies retro document-release; do
rm -rf ~/.openclaw/workspace/skills/$skill
done
```
129 changes: 129 additions & 0 deletions openclaw/skills/browse/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
---
name: browse
description: >
Browser automation for QA testing and site dogfooding using OpenClaw's built-in browser
tool. Navigate any URL, interact with elements, verify page state, take screenshots,
check responsive layouts, test forms, and assert element states. Use when asked to
"browse a site", "check this URL", "test this page", "take a screenshot", "dogfood",
"verify deployment", or /browse. Based on gstack by Garry Tan, adapted for OpenClaw.
---

# Browse: QA Testing & Dogfooding with OpenClaw Browser

OpenClaw has a built-in browser tool. No binary compilation needed — use the `browser` tool
directly for all web automation.

## Core QA Patterns

### 1. Navigate to a page and verify it loads

```
browser(action: "navigate", url: "https://yourapp.com")
browser(action: "snapshot") # get page structure
browser(action: "screenshot") # visual capture
browser(action: "console") # check for JS errors
```

### 2. Test a user flow (e.g., login)

```
browser(action: "navigate", url: "https://app.com/login")
browser(action: "snapshot", refs: "aria") # see all interactive elements with refs
browser(action: "act", kind: "fill", ref: "e3", text: "user@test.com")
browser(action: "act", kind: "fill", ref: "e4", text: "password")
browser(action: "act", kind: "click", ref: "e5") # submit
browser(action: "snapshot") # verify login succeeded
```

### 3. Take screenshots for bug reports

```
browser(action: "screenshot", fullPage: true) # full page capture
browser(action: "snapshot", refs: "aria") # labeled element tree
```

### 4. Test responsive layouts

```
browser(action: "act", kind: "resize", width: 375, height: 812) # mobile
browser(action: "screenshot")
browser(action: "act", kind: "resize", width: 768, height: 1024) # tablet
browser(action: "screenshot")
browser(action: "act", kind: "resize", width: 1280, height: 720) # desktop
browser(action: "screenshot")
```

### 5. Fill and submit forms

```
browser(action: "snapshot", refs: "aria")
browser(action: "act", kind: "fill", ref: "<input-ref>", text: "value")
browser(action: "act", kind: "click", ref: "<submit-ref>")
browser(action: "snapshot") # verify result
```

### 6. Check console for errors

```
browser(action: "console") # see all console messages
```

### 7. Execute JavaScript on the page

```
browser(action: "act", kind: "evaluate", fn: "document.title")
browser(action: "act", kind: "evaluate", fn: "document.querySelectorAll('a').length")
```

### 8. Handle dialogs

```
browser(action: "dialog", accept: true) # auto-accept alerts
browser(action: "dialog", accept: false) # dismiss
```

### 9. Compare pages across environments

Navigate to staging, take a snapshot. Navigate to production, take a snapshot. Compare the
two snapshots for differences.

### 10. Test file uploads

```
browser(action: "upload", ref: "<file-input-ref>", paths: ["/path/to/file.pdf"])
```

## Workflow for QA Testing

1. **Navigate** to the target URL
2. **Snapshot** to understand the page structure and get element refs
3. **Interact** — click buttons, fill forms, navigate links using refs from snapshot
4. **Screenshot** to capture visual evidence
5. **Console** to check for JS errors after each interaction
6. **Repeat** for each page/flow being tested

## Tips

- Always run `snapshot` after navigation to get fresh element refs
- Use `refs: "aria"` for stable, self-resolving refs across calls
- After any action that changes the page, take a new snapshot before interacting again
- Check console after every significant interaction — JS errors that don't surface visually are still bugs
- For SPAs, use click actions on nav elements instead of direct URL navigation to catch routing issues
- When testing authenticated pages, perform the login flow first — cookies persist between browser calls

## Framework-Specific Guidance

### Next.js
- Check console for hydration errors
- Test client-side navigation (click links, don't just navigate)
- Check for layout shifts on pages with dynamic content

### Rails
- Verify CSRF token presence in forms
- Test Turbo/Stimulus integration
- Check for flash messages

### General SPA (React, Vue, Angular)
- Use snapshot for navigation — direct URL navigation may miss client-side routes
- Check for stale state (navigate away and back)
- Test browser back/forward handling
Loading