Kalokoby

All guides › By use case

By use case

Safari, Firefox, phones and dark mode in one run

Walk the same flow in Chromium, WebKit and Firefox, on phone, tablet and TV presets, in light and dark mode, and review every combination on one canvas.

The bug report says "on my iPhone the button is under the keyboard" and the team checks it in Chrome on a laptop. Kaloko walks the flow in Safari's engine on an iPhone-sized screen, in the colour scheme the customer uses, and puts it next to the Chrome capture.

The problem

Most teams review one browser at one size in light mode. Safari, small phones, tablets, dark mode and reduced motion get checked when a customer complains, and then by hand on one device.

What changes with Kaloko

Browsers, device presets, colour schemes, reduced motion, forced colours and the installed-app display mode are dimensions of a run, like locales and viewports. Every combination is captured and checked; the canvas switches between them next to the locale and shows the same step in another browser beside it.

How it works

  1. Install the engines once

    npx kaloko browser install --browsers webkit,firefox on each machine or CI job.

  2. Name what you need

    in the scenario (browsers: [chromium, webkit], color_schemes: [light, dark], viewports: [iphone-se, pixel-8, ipad-landscape, laptop]) or per run: kaloko start … --browsers chromium,webkit --color-schemes light,dark --viewports iphone-se,desktop-hd.

  3. Walk

    kaloko walk makes one pass per engine and device profile. kaloko walk --browsers webkit walks only the WebKit captures of the run.

  4. Pick presets

    kaloko devices lists phones (small to large), foldables, tablets, laptop, desktop and TV widths. A preset sets the screen size, pixel ratio, touch and user agent; <preset>-landscape turns it sideways.

  5. Review

    switch browser and scheme on the canvas, open the device frame, or press G to see one step in every language and viewport at once, browsers and schemes included when you ask.

Skills and prompts

A customer says checkout breaks in Safari on a small iPhone. Walk the checkout on staging in Chromium and WebKit on iphone-se and compare the two.

Expected outcome: a run with iphone-se and iphone-se.webkit captures of each step, and a list of the steps that differ, with evidence.

Check the account pages in dark mode on desktop and mobile and tell me where text contrast fails.

Expected outcome: dark captures of each step and the contrast criteria of the a11y pack, per scheme.

What you get

FAQ

Is WebKit the same as Safari on an iPhone?

It is Safari's engine run by Playwright with the device's size, pixel ratio, touch and user agent. It catches layout and engine bugs; a real device catches the rest.

Will the matrix explode?

It can: three viewports, two browsers and two schemes are twelve screenshots per step and language. Keep the matrix to what the task is about; a run refuses more than 400 combinations.

Can I check an installed PWA?

Yes. display_modes: [browser, standalone] captures the page as installed: display-mode media rules and matchMedia answer as standalone, at full-screen size.

More guides

Accepting a task with an AI agent, in the pull requestRegression before a release: compare the run with the accepted baselineSEO and landing-page checks on production, read-only, every dayE-mail flows: capture the message next to the screen that sent it

Install once, then work through your agent

Kaloko runs where your code and your agent are. The service stores and versions the results, shows the canvas and collects approvals.

  1. Add the CLI to the project
    npm install --save-dev kaloko

    Needs Node 20 or newer. Update later with npm update kaloko.

  2. Create the config and install the skill
    npx kaloko init --agent claude --org <your-org>

    The skill is copied to .claude/skills/kaloko. npx kaloko doctor checks Chrome, the config and the token.

  3. Create your organization and a token

    Create an organization; you become its admin. The start page offers a tester token in one click, later under Settings → API tokens. Put it into the project .env:

    KALOKO_TOKEN=qwk_…
TYPESAFE_API_KEY=…   # optional: semantic evaluator

Then just ask your agent

The skill teaches your agent the whole loop: it writes the acceptance plan and the scenario from the task, walks the screens, evaluates, shares the canvas, reads what reviewers said and fixes it. You don’t type the commands; you look at the canvas.

What the agent runs (or run it yourself, e.g. in CI)

The same loop by hand:

npx kaloko start --scenario docs/tasks/TASK-123/qa/scenario.yml --env local
npx kaloko walk        # playwright steps; agent/manual steps: kaloko capture
npx kaloko evaluate
npx kaloko share --pr
npx kaloko feedback    # what reviewers said, with ids to answer