Agent skill

JS Package Testing

Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/.

Apache-2.0Auto-check: notesTesting & QA

Install JS Package Testing

skills CLI

$ npx skills add Opentrons/opentrons --skill js-package-testing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install Opentrons/opentrons js-package-testing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/js-package-testing .claude/skills/js-package-testing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "js-package-testing" agent skill from https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing into .claude/skills/js-package-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "js-package-testing", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add Opentrons/opentrons --skill js-package-testing -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Opentrons/opentrons js-package-testing --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/js-package-testing .agents/skills/js-package-testing && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "js-package-testing" agent skill from https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing into .agents/skills/js-package-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "js-package-testing", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Opentrons/opentrons --skill js-package-testing -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Opentrons/opentrons js-package-testing --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/js-package-testing .cursor/skills/js-package-testing && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "js-package-testing" agent skill from https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing into .cursor/skills/js-package-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "js-package-testing", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/Opentrons/opentrons.git --path .cursor/skills/js-package-testing

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Opentrons/opentrons --skill js-package-testing -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Opentrons/opentrons js-package-testing --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/js-package-testing .gemini/skills/js-package-testing && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "js-package-testing" agent skill from https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing into .gemini/skills/js-package-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "js-package-testing", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install Opentrons/opentrons js-package-testing

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add Opentrons/opentrons --skill js-package-testing -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/js-package-testing .github/skills/js-package-testing && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "js-package-testing" agent skill from https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing into .github/skills/js-package-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "js-package-testing", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Opentrons/opentrons --skill js-package-testing -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Opentrons/opentrons js-package-testing --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Opentrons/opentrons.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/js-package-testing .opencode/skills/js-package-testing && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "js-package-testing" agent skill from https://github.com/Opentrons/opentrons/tree/edge/.cursor/skills/js-package-testing into .opencode/skills/js-package-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "js-package-testing", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: js-package-testing
GitHub stars: 521
Token cost: ~1.2k tokens
SKILL.md length: 365 words
Files: 1
Skills in repo: 17
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/.

Works in 5 steps: Install all four @opentrons/* at the… → Install peers: react@18.2.0,… → Import CSS in app entry → …
Integration testing
SKILL.md covers Purpose, External consumer checklist, Applitools and Package linking strategy, plus 6 more sections
Calls make, pnpm and node; needs APPLITOOLS_API_KEY

What it does

JS Package Testing is an agent skill from Opentrons/opentrons. Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/. Covers components, shared-data, step-generation, and protocol-visualization. Use for integration testing, package linking, external consumer bootstrap, or visual testing.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Integration testing, Visual regression testing and Browser testing. It works with Playwright, pnpm and React. The repository describes itself as: Software for writing protocols and running them on the Opentrons Flex and Opentrons OT-2. The licence is Apache-2.0.

When your agent uses it

Integration testing
Package linking
External consumer bootstrap

Example prompts

“/js-package-testing”

Requirements

A credential in APPLITOOLS_API_KEY

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

Install all four @opentrons/* at the same version.
Install peers: react@18.2.0, react-dom@18.2.0, react-i18next@14.0.0, i18next@^19.8.3.
Import CSS in app entry
Wrap app in I18nextProvider. Load protocol_visualization (local JSON) plus
Vite: dedupe React, use cssModulesSideEffect plugin, define: { 'process.env': {} } if needed.

What it can do on your machine

Read from SKILL.md and the folder at commit a14fef9. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- make
- pnpm
- node
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
- APPLITOOLS_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

JS Package Testing loads about 1.2k tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 365 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~73
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

NoteMentions a .env fileSKILL.md:40

- Set **`APPLITOOLS_API_KEY`** via `.env` in `js-package-testing/` or shell export.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Opentrons/opentrons at commit a14fef9, republished under its Apache-2.0 licence (© Opentrons). 365 words, ~1,238 tokens.

Download SKILL.mdSave it as .claude/skills/js-package-testing/SKILL.md (or your agent's skills folder).

name: js-package-testing
description: Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/. Covers components, shared-data, step-generation, and protocol-visualization. Use for integration testing, package linking, external consumer bootstrap, or visual testing.

JS package testing

Purpose

Reference external consumer for four npm packages:

@opentrons/shared-data
@opentrons/step-generation
@opentrons/components
@opentrons/protocol-visualization

Builds packed artifacts (not live monorepo source), applies the same debt patches as publish.mts (after pnpm pack rewrote catalog/workspace), links via link:pack/..., and runs a Vite demo plus Playwright + Applitools Eyes.

Full external consumer docs: js-package-testing/README.md section "External consumer guide".

External consumer checklist

Install all four @opentrons/* at the same version.
Install peers: react@18.2.0, react-dom@18.2.0, react-i18next@14.0.0, i18next@^19.8.3.
Import CSS in app entry:
- @opentrons/protocol-visualization/styles
- @opentrons/components/styles/global
- @opentrons/components/styles
Wrap app in I18nextProvider. Load protocol_visualization (local JSON) plus shared component namespaces from @opentrons/components/localization (Node-safe; do not import resources from the package root in Node).
Vite: dedupe React, use cssModulesSideEffect plugin, define: { 'process.env': {} } if needed.

Library runtime deps (styled-components, redux, etc.) are bundled; host app does not install them.

Applitools

Set APPLITOOLS_API_KEY via .env in js-package-testing/ or shell export.
App name: js-package-testing (playwright.config.ts).
Import test from @applitools/eyes-playwright/fixture; use eyes.check().

Package linking strategy

Order matters: build packs first, patch manifests, then install.

make pack in each library (pnpm pack rewrites catalog/workspace) → extract to pack/opentrons-*/
scripts/patch-packed-packages.mts applies debt patches (same module as publish.mts)
pnpm install with link:pack/... deps
pnpm-workspace.yaml overrides pin transitive @opentrons/* to pack/

Shared debt patches: scripts/package-json-patches.mts (not catalog/workspace; those are pnpm's job).

Show full SKILL.md (153 more words)Show less

Publish

From repo root:

bash

node --experimental-strip-types scripts/next-npm-version.mts
node --experimental-strip-types scripts/publish.mts \
  --version X.Y.Z-alpha.0 --dry-run

Flow: debt-patch manifests → pnpm pack (protocol rewrite) → inject README/LICENSE → npm publish (OIDC on pnpm 10). When the monorepo is on pnpm 11+, switch the last step to pnpm publish.

Always publishes dist-tag latest (no --tag flag). Dry-run needs no auth; real local publish needs interactive npm 2FA (tokens disallowed). Prefer CI for releases.

Project structure

text

scripts/
├── next-npm-version.mts       # patch bump from npm latest
├── npm-latest-versions.mts    # print npm dist-tags
├── package-json-patches.mts   # debt patches (files/exports/@types/peers)
├── patch-packed-packages.mts  # applies debt patches to js-package-testing/pack/
└── publish.mts                # pnpm pack + npm publish (pnpm publish on pnpm 11+)

js-package-testing/
├── Makefile
├── package.json
├── pnpm-workspace.yaml
├── playwright.config.ts
├── cssModulesSideEffect.ts
├── tests/
├── src/
│   ├── main.tsx          # CSS imports + I18nextProvider
│   ├── i18n.ts
│   └── locale/en/protocol_visualization.json
└── pack/                 # gitignored

Makefile targets

Target	Description
`make setup`	Build/extract/patch packs, `pnpm install --frozen-lockfile`
`make dev`	Run Vite dev server (runs `setup` first)
`make test-setup`	Install Playwright Chromium (`make setup` first)
`make test`	Playwright + Eyes (needs `APPLITOOLS_API_KEY`)
`make build-local-packages`	Rebuild and patch `pack/` only
`make teardown`	Remove `pack/` and `node_modules`

Quick start

bash

# monorepo root
make setup-js

cd js-package-testing
make teardown setup dev

Lint (monorepo root)

make lint-js, make lint-css, make format-js

Troubleshooting

Module not found / broken links: make clean-local-packages && make setup
Unstyled UI: missing CSS imports in app entry (see src/main.tsx)
Translation keys visible: missing i18n namespace setup
After library source edits: make build-local-packages then pnpm install

Files

Just SKILL.md in .cursor/skills/js-package-testing of Opentrons/opentrons.

Open the folder on GitHubat commit a14fef9

Compare with similar skills

JS Package Testing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

JS Package Testing compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
JS Package Testing this skillOpentrons/opentrons	521	—	~1.2k	Automated safety check: Notes	Apache-2.0	yesterday
Agent Integration ReplayComfy-Org/ComfyUI_frontend	2.1k	—	~805	Automated safety check: Notes	GPL-3.0	today
Kouchou AI Testingdigitaldemocracy2030/kouchou-ai	171	—	~355	Automated safety check: Pass	AGPL-3.0	yesterday
E2E Testinglangflow-ai/langflow	156k	—	~3.3k	Automated safety check: Pass	MIT	today
Dozzle Visual Snapshot Updateramir20/dozzle	15k	—	~797	Automated safety check: Pass	MIT	today
Desktopgridaco/grida	2.7k	—	~3.2k	Automated safety check: Notes	Apache-2.0	yesterday

Similar skills

Agent Integration Replay
Comfy-Org/ComfyUI_frontend
Replay recorded agent conversations as Playwright tests against the real chat panel and canvas.
2.1k GitHub stars~805 tokensUpdated today
Testing & QAAuto-check: notes
Kouchou AI Testing
digitaldemocracy2030/kouchou-ai
Testing commands and strategy for the kouchou-ai repo, including unit/integration tests and Playwright E2E rules.
171 GitHub stars~355 tokensUpdated yesterday
Testing & QAAuto-check passed
E2E Testing
langflow-ai/langflow
Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.
156k GitHub stars~3.3k tokensUpdated today
Testing & QAAuto-check passed
Dozzle Visual Snapshot Updater
amir20/dozzle
Regenerates Playwright visual snapshots for Dozzle after an intentional UI change, running them through Docker Compose so filenames match the Linux CI platform.
15k GitHub stars~797 tokensUpdated today
Testing & QAAuto-check passed
Desktop
gridaco/grida
Grida Desktop Electron shell and release-impact work: BrowserWindow, preload, window.grida, menus, protocol/deep links, file associations, Forge, path-scoped bridge security, Electron-only UI bugs…
2.7k GitHub stars~3.2k tokensUpdated yesterday
Testing & QAAuto-check: notes
Playwright Component Testing
mellowagain/gitarena
Set up component testing with Playwright using a story gallery — scaffold stories and a gallery dev page driven by the built-in mount fixture, no dedicated component-testing runtime.
115 GitHub starsUsed in 1 repo~2.6k tokens
Testing & QAAuto-check passed

Questions about JS Package Testing

What does JS Package Testing do?

Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/. JS Package Testing is an agent skill from Opentrons/opentrons. Vite demo and Playwright + Applitools tests for packed @opentrons JS packages in js-package-testing/.

When should I use JS Package Testing?

JS Package Testing fits situations like: integration testing; package linking; external consumer bootstrap.

How do I install JS Package Testing in Claude Code?

Run `npx skills add Opentrons/opentrons --skill js-package-testing -a claude-code`. Or copy the skill folder (.cursor/skills/js-package-testing in Opentrons/opentrons) into .claude/skills/js-package-testing in your project. Claude Code loads it when a task matches its description.

How do I install JS Package Testing in Codex?

Run `npx skills add Opentrons/opentrons --skill js-package-testing -a codex`. Or copy the skill folder (.cursor/skills/js-package-testing in Opentrons/opentrons) into .agents/skills/js-package-testing in your project. Codex loads it when a task matches its description.

Can I use JS Package Testing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Opentrons/opentrons --skill js-package-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/js-package-testing, .gemini/skills/js-package-testing, .github/skills/js-package-testing and .opencode/skills/js-package-testing in your project.

What does JS Package Testing need to run?

Going by SKILL.md and its folder, JS Package Testing needs the command-line tools its instructions call (make, pnpm, node and npm) and credentials named APPLITOOLS_API_KEY. Our summary lists: A credential in APPLITOOLS_API_KEY.

Does JS Package Testing access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is JS Package Testing safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does JS Package Testing use?

JS Package Testing is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does JS Package Testing use?

About 1.2k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to JS Package Testing?

Skills that share tags, products or a category with JS Package Testing: Agent Integration Replay (Comfy-Org/ComfyUI_frontend, 2.1k stars), Kouchou AI Testing (digitaldemocracy2030/kouchou-ai, 171 stars), E2E Testing (langflow-ai/langflow, 156k stars) and Dozzle Visual Snapshot Updater (amir20/dozzle, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains JS Package Testing?

Opentrons (a GitHub organization) maintains it in Opentrons/opentrons, which has 521 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: Opentrons/opentrons on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install JS Package Testing

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

JS package testing

Purpose

External consumer checklist

Applitools

Package linking strategy

Publish

Project structure

Makefile targets

Quick start

Lint (monorepo root)

Troubleshooting

Files

Compare with similar skills

Similar skills

More from Opentrons/opentrons

Related

Questions about JS Package Testing