Web Application Testing
anthropics/skills
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
Add or change a route in apps/web — a page under src/routes, its loader, or the useXQuery / useXMutation hook it prefetches.
Install Odc Web Route
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-web-route --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/odc-web-route .claude/skills/odc-web-route && rm -rf skills-srcUse ~/.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/
Install the "odc-web-route" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-route into .claude/skills/odc-web-route/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-web-route", 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 install https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-routeType 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.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-web-route --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/odc-web-route .agents/skills/odc-web-route && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "odc-web-route" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-route into .agents/skills/odc-web-route/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-web-route", 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.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-web-route --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/odc-web-route .cursor/skills/odc-web-route && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "odc-web-route" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-route into .cursor/skills/odc-web-route/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-web-route", 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 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git --path .agents/skills/odc-web-route--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-web-route --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/odc-web-route .gemini/skills/odc-web-route && rm -rf skills-srcUse ~/.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/
Install the "odc-web-route" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-route into .gemini/skills/odc-web-route/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-web-route", 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.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-web-routeInstalls 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).
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/odc-web-route .github/skills/odc-web-route && rm -rf skills-srcUse ~/.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/
Install the "odc-web-route" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-route into .github/skills/odc-web-route/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-web-route", 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.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-web-route --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/odc-web-route .opencode/skills/odc-web-route && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "odc-web-route" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-web-route into .opencode/skills/odc-web-route/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-web-route", 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
odc-web-route- GitHub stars
- 119
- Token cost
- ~1.5k tokens
- SKILL.md length
- 627 words
- Files
- 2
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Add or change a route in apps/web — a page under src/routes, its loader, or the useXQuery / useXMutation hook it prefetches.
- Tasks that involve Browser testing
- SKILL.md covers Two generated artifacts, two…, Where the procedure lives, One key, two callers and Before you leave
- Calls pnpm
What it does
Odc Web Route is an agent skill from DouglasNeuroInformatics/OpenDataCapture. Add or change a route in apps/web — a page under src/routes, its loader, or the useXQuery / useXMutation hook it prefetches. Use also when tsc reports TS2345 on a route literal, or when route-tree.ts or the Playwright suite's RouteTo union is missing it (gen:routes).
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Testing & QA, covering Browser testing. It works with Playwright. The repository describes itself as: An electronic data capture platform for administering remote and in-person clinical instruments. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Browser testing
Example prompts
- “/odc-web-route”
What it can do on your machine
Read from SKILL.md and the folder at commit 432dec8. 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:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, 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 no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Odc Web Route loads about 1.5k tokens when it runs. Until then it costs about 70 tokens; SKILL.md has 627 words of instructions outside code blocks.
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 passed
The automated check found no risky patterns in SKILL.md.
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 DouglasNeuroInformatics/OpenDataCapture at commit 432dec8, republished under its Apache-2.0 licence (© DouglasNeuroInformatics). 627 words, ~1,516 tokens.
Download SKILL.mdSave it as
.claude/skills/odc-web-route/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- odc-web-route
- description
- Add or change a route in apps/web — a page under src/routes, its loader, or the useXQuery / useXMutation hook it prefetches. Use also when tsc reports TS2345 on a route literal, or when route-tree.ts or the Playwright suite's RouteTo union is missing it (gen:routes).
A route file is the one kind of source in this repo that two generated artifacts are derived
from, and the app you just edited regenerates neither. Until both catch up, a perfectly correct route
fails tsc in two different workspaces.
Two generated artifacts, two owners
| Artifact | Derived from | Regenerated by |
|---|---|---|
apps/web/src/route-tree.ts (git-tracked) | every file under apps/web/src/routes/ | the user, by running pnpm dev for web — any vite serve or build of apps/web runs the tanstackRouter plugin in apps/web/vite.config.ts, which writes the file |
testing/src/generated/route.d.ts (ignored) | FileRouteTypes['to'] in route-tree.ts | you: pnpm --filter @opendatacapture/testing gen:routes |
The user carries the baton first. gen:routes derives RouteTo from route-tree.ts
(testing/AGENTS.md), so running it against a stale tree writes the same file back:
your literal is still not a member of RouteTo, and the pageModels map in
testing/src/support/fixtures.ts still rejects it as a key. Ask the user for the regeneration, then
run gen:routes again — repeating it costs nothing.
The root AGENTS.md prohibition covers the first row only. gen:routes is not the route-tree
generator — it reads route-tree.ts and never writes it — and running it is your job, not the
user's.
TS2345 on your own route literal is then the expected state of a correct new route, not a defect
to chase; .agents/docs/playbooks/add-web-route.md shows the exact message. Confirm first that the
createFileRoute literal is character-for-character the file path, leading /_app included — a
mismatched literal raises the same error and survives regeneration. Once it matches, carry on with
the rest of the change and leave both route-tree.ts and its generator to the user, unedited (root
AGENTS.md hard rule).
Done when your reply names the regeneration the user still owes, and either every literal you wrote
appears in testing/src/generated/route.d.ts or your reply says it cannot yet.
Where the procedure lives
Open the playbook before you write the file; it is the order of operations, and this skill does not repeat it.
| Open | When |
|---|---|
.agents/docs/playbooks/add-web-route.md | Writing or moving a file under src/routes/ — filename-to-URL mapping, the createFileRoute literal, validateSearch, loaderDeps, the nav entry |
.agents/docs/playbooks/add-web-data-hook.md | The data the route needs has no hook yet, or you are changing one — every input that changes the response belongs in the queryKey |
apps/web/AGENTS.md | Before naming any route file — a . is a path separator, so a stray logs.test.tsx becomes the route /logs/test — and for the rest of this app: layer folders, the store, translations, where a test may live |
Show full SKILL.md (236 more words)Show less
One key, two callers
The loader prefetches through the hook's queryOptions factory and the component calls the hook
(add-web-data-hook.md step 3). Sharing the factory is half of it — the arguments must match too.
apps/web/src/routes/_app/datahub/index.tsx passes { groupId: currentGroup?.id } on both sides and
reaches one cache entry. _app/admin/audit/logs.tsx does not: the loader prefetches deps.search, the
component asks for { ...search, page, sortOrder }, and useAuditLogsQuery keys on the whole params
object — so the prefetched entry is never read and the page fetches again on mount.
Done when every ensureQueryData call in your loader passes both the factory and the arguments the
component's hook passes.
Before you leave
Add a data-testid to whatever the e2e test will click or assert on, then open
.agents/docs/playbooks/add-e2e-test.md before writing the spec — it owns the selector contract and
the fixture registration. The unit test goes in a __tests__/ folder beside the file that changed,
named after it: src/hooks/__tests__/ for a query hook, src/routes/**/__tests__/ for the route
itself.
The playbook's ## Verify block is the check to run, with one ordering caveat: pnpm test:e2e
boots apps/web through pnpm dev:test (testing/playwright.config.ts), which regenerates
route-tree.ts as a side effect. Run it once the user has regenerated, when it rewrites the file to
the same content and leaves no diff.
Done when every element the spec selects carries a data-testid, the unit test file exists, and the
Verify block has run clean apart from TS2345 on your own route literal.
© DouglasNeuroInformatics, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .agents/skills/odc-web-route of DouglasNeuroInformatics/OpenDataCapture.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit 432dec8
Compare with similar skills
Odc Web Route 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Odc Web Route this skillDouglasNeuroInformatics/OpenDataCapture | 119 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Web Application Testinganthropics/skills | 180k | 51 repos | ~966 | Automated safety check: Pass | Apache-2.0 | |
| Playwright CLIsanity-io/sanity | 6.4k | 18 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Write and Verify Playwright Testsappsmithorg/appsmith | 41k | — | ~2.9k | Automated safety check: Notes | Apache-2.0 | |
| playwright-cli Browser Automationgithub/gh-aw | 5.4k | 23 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Cucumber and Playwright E2E Testslanggenius/dify | 158k | — | ~682 | Automated safety check: Pass | Custom licence |
Similar skills
- Official
- Official
Playwright CLI
sanity-io/sanity
Automates browser interactions for web testing, form filling, screenshots, and data extraction.
Write and Verify Playwright Tests
appsmithorg/appsmith
Writes a Playwright end-to-end test from a prompt, runs it against a live Appsmith deployment and retries with fixes up to three times until it passes.
- Official
playwright-cli Browser Automation
github/gh-aw
Drives a real browser from the command line with playwright-cli to open pages, interact, mock requests, save state and work with Playwright tests.
Cucumber and Playwright E2E Tests
langgenius/dify
Guides changes and reviews of the Cucumber and Playwright end-to-end suite under `e2e/`: feature files, step definitions, support code, tags, locators and assertions.
E2E Testing
langflow-ai/langflow
Write and review Playwright E2E tests for Langflow. An agent skill from langflow-ai/langflow.
More from DouglasNeuroInformatics/OpenDataCapture
All 16 skills in this repoOdc Agent Docs
DouglasNeuroInformatics/OpenDataCapture
Write or correct this repo's agent documentation — a workspace AGENTS.md (or its CLAUDE.md symlink), a playbook under .agents/docs/playbooks, an architecture doc, or the workspace map.
Odc Testing
DouglasNeuroInformatics/OpenDataCapture
Test a change in Open Data Capture. An agent skill from DouglasNeuroInformatics/OpenDataCapture.
Review PR
DouglasNeuroInformatics/OpenDataCapture
Triage pull requests against upstream main — one verdict, action items, and whether it needs the user's eyes.
Odc Open PR
DouglasNeuroInformatics/OpenDataCapture
Open a pull request against main for the current branch. An agent skill from DouglasNeuroInformatics/OpenDataCapture.
Opening Issues
DouglasNeuroInformatics/OpenDataCapture
File a GitHub issue for Open Data Capture with its labels. An agent skill from DouglasNeuroInformatics/OpenDataCapture.
Odc Debugging
DouglasNeuroInformatics/OpenDataCapture
What actually breaks in Open Data Capture — a failing build, lint, unit test or e2e run; a change with no visible effect; a suite that stays green after you broke the code on purpose; an error…
Related
Works with
Categories
Questions about Odc Web Route
What does Odc Web Route do?
Add or change a route in apps/web — a page under src/routes, its loader, or the useXQuery / useXMutation hook it prefetches. Odc Web Route is an agent skill from DouglasNeuroInformatics/OpenDataCapture. Add or change a route in apps/web — a page under src/routes, its loader, or the useXQuery / useXMutation hook it prefetches.
When should I use Odc Web Route?
Odc Web Route fits situations like: tasks that involve Browser testing.
How do I install Odc Web Route in Claude Code?
Run `npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a claude-code`. Or copy the skill folder (.agents/skills/odc-web-route in DouglasNeuroInformatics/OpenDataCapture) into .claude/skills/odc-web-route in your project. Claude Code loads it when a task matches its description.
How do I install Odc Web Route in Codex?
Run `npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a codex`. Or copy the skill folder (.agents/skills/odc-web-route in DouglasNeuroInformatics/OpenDataCapture) into .agents/skills/odc-web-route in your project. Codex loads it when a task matches its description.
Can I use Odc Web Route 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 DouglasNeuroInformatics/OpenDataCapture --skill odc-web-route -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/odc-web-route, .gemini/skills/odc-web-route, .github/skills/odc-web-route and .opencode/skills/odc-web-route in your project.
What does Odc Web Route need to run?
Going by SKILL.md and its folder, Odc Web Route needs the command-line tools its instructions call (pnpm).
Does Odc Web Route access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Odc Web Route safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Odc Web Route use?
Odc Web Route 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 Odc Web Route use?
About 1.5k tokens (SKILL.md is roughly 6.1k 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 Odc Web Route?
Skills that share tags, products or a category with Odc Web Route: Web Application Testing (anthropics/skills, 180k stars), Playwright CLI (sanity-io/sanity, 6.4k stars), Write and Verify Playwright Tests (appsmithorg/appsmith, 41k stars) and playwright-cli Browser Automation (github/gh-aw, 5.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Odc Web Route?
DouglasNeuroInformatics (a GitHub organization) maintains it in DouglasNeuroInformatics/OpenDataCapture, which has 119 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 7, 2026.
Source: DouglasNeuroInformatics/OpenDataCapture on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.