Quickstart

Get Ranger Feature Review running in your project in about 5 minutes. By the end, your AI coding agent will be able to verify UI features in a real browser.

Prerequisites

• Node.js 18 or later
• Claude Code (or your favorite AI coding agent)
• A web application running locally (e.g., on localhost:3000)

Install the CLI

npm install -g @ranger-testing/ranger-cli

Run Setup

From your project’s root directory (should be a git repo for feature tracking):

ranger start

This walks you through the full setup interactively. Here’s what each step does:

Authentication

Ranger opens your browser to log in. Authorize the CLI, and it stores your credentials securely.

If you’re setting up in CI, pass a token directly: ranger start <token>. See the CI Quickstart for details.

Chromium Browser

Ranger uses Playwright’s Chromium to run browser verifications. We require a specific version. If that version isn’t available, you’ll see:

The required version of the Playwright Chromium browser is not installed. Install it now? (Y/n)

Say yes. This is the browser that verification agents use to test your app.

Claude Code Plugin

The plugin connects Ranger to Claude’s workflow so it can use the Ranger CLI intuitively.

Where should the plugin be installed?
  > User (available in all your projects)
    Project (shared with team via git)

Choose User if you’re trying Ranger out individually. Choose Project to share the plugin config with your team via git (requires a .claude/ directory).

Browser Environment

Ranger needs to know how to access your locally running app and how to authenticate.

Enter the base URL for your application: http://localhost:3000

Enter the URL where your app runs locally. Ranger checks that it’s reachable, then opens Chromium so you can log in to your app (if it requires authentication). Close the browser when you’re done. Ranger saves the session cookies so the verification agent can authenticate the same way.

If your app doesn’t require login, you can close the browser immediately.

Skills

Skills teach your AI coding agent how to use Ranger.

Would you like to install skills? (Y/n)

Say yes. Skills are markdown files that get installed into your .claude/skills/ directory. They tell Claude when and how to create features, run verifications, and address feedback.

---

Use Ranger

Once setup is complete, open Claude Code in your project.

Enable Ranger

At the start of your session, run the slash command:

/ranger:enable

This activates Ranger’s hooks for the session. Ranger stays enabled on your branch across sessions, so you only need to enable once per branch. (On main/master, hooks enable for the current session only, since those branches are shared.)

Build a Feature

Ask Claude to build something that involves UI. For example:

“Add a dark mode toggle to the settings page.”

With Ranger enabled, Claude will:

1. Create a feature with checklist items describing what to verify (e.g., “User opens settings, clicks dark mode toggle, page switches to dark theme”)
2. Write the code (Ranger has nothing to do with this step and never reads or stores any of your code!)
3. Run browser verification via ranger verify-feature. A browser agent tests the feature in your running app.
4. If verification finds issues, Claude fixes them and re-verifies automatically.
5. Once everything passes, Claude shares a link to the feature review page.

Review the Feature

Open the feature review link (e.g., https://dashboard.ranger.net/features/feat_abc123). You’ll see:

• Screenshots and video from the browser verification
• A checklist of what was verified
• A comments section where you can leave feedback

If everything looks good, approve it. If not, leave comments.

What’s Next

• CLI Overview gives you (or your agent) extra info about all the available commands.