Agent skill

Webapp Testing

Test web app UI using Browser MCP and Storybook. An agent skill from WellApp-ai/Well.

Install Webapp Testing

skills CLI

$ npx skills add WellApp-ai/Well --skill webapp-testing -a claude-code

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

GitHub CLI

$ gh skill install WellApp-ai/Well webapp-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/WellApp-ai/Well.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cursor-rules/skills/webapp-testing .claude/skills/webapp-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 "webapp-testing" agent skill from https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-testing into .claude/skills/webapp-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webapp-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/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-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 WellApp-ai/Well --skill webapp-testing -a codex

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

GitHub CLI

$ gh skill install WellApp-ai/Well webapp-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/WellApp-ai/Well.git skills-src && mkdir -p .agents/skills && cp -r skills-src/cursor-rules/skills/webapp-testing .agents/skills/webapp-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 "webapp-testing" agent skill from https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-testing into .agents/skills/webapp-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webapp-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 WellApp-ai/Well --skill webapp-testing -a cursor

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

GitHub CLI

$ gh skill install WellApp-ai/Well webapp-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/WellApp-ai/Well.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/cursor-rules/skills/webapp-testing .cursor/skills/webapp-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 "webapp-testing" agent skill from https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-testing into .cursor/skills/webapp-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webapp-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/WellApp-ai/Well.git --path cursor-rules/skills/webapp-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 WellApp-ai/Well --skill webapp-testing -a gemini-cli

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

GitHub CLI

$ gh skill install WellApp-ai/Well webapp-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/WellApp-ai/Well.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/cursor-rules/skills/webapp-testing .gemini/skills/webapp-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 "webapp-testing" agent skill from https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-testing into .gemini/skills/webapp-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webapp-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 WellApp-ai/Well webapp-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 WellApp-ai/Well --skill webapp-testing -a github-copilot

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

Manual copy

$ git clone --depth 1 https://github.com/WellApp-ai/Well.git skills-src && mkdir -p .github/skills && cp -r skills-src/cursor-rules/skills/webapp-testing .github/skills/webapp-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 "webapp-testing" agent skill from https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-testing into .github/skills/webapp-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webapp-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 WellApp-ai/Well --skill webapp-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 WellApp-ai/Well webapp-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/WellApp-ai/Well.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/cursor-rules/skills/webapp-testing .opencode/skills/webapp-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 "webapp-testing" agent skill from https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/webapp-testing into .opencode/skills/webapp-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "webapp-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: webapp-testing
GitHub stars: 345
Token cost: ~522 tokens
SKILL.md length: 155 words
Files: 1
Skills in repo: 36
Repo updated: Sep 30, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Test web app UI using Browser MCP and Storybook. An agent skill from WellApp-ai/Well.

Works in 2 steps: Component Testing (Storybook) → Integration Testing (Web App)
Tasks that involve Browser testing
SKILL.md covers Storybook Testing, Web App Testing, Available Browser Tools and Testing Workflow, plus 2 more sections
Calls npm

What it does

Webapp Testing is an agent skill from WellApp-ai/Well. Test web app UI using Browser MCP and Storybook

Its SKILL.md is about 520 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 Frontend & Design, covering Browser testing. It works with Storybook and Model Context Protocol. The repository describes itself as: No more Sundays on Finance. We build the infrastructure that retrieves, processes, and routes your financial and business data to your FinOps stack, so founders can ship, not… The licence is MIT.

When your agent uses it

Tasks that involve Browser testing

Example prompts

“/webapp-testing”

Workflow steps

2 steps, taken from the step headings in SKILL.md.

Component Testing (Storybook)
Integration Testing (Web App)

What it can do on your machine

Read from SKILL.md and the folder at commit c740217. 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:
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use 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 no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Webapp Testing loads about 522 tokens when it runs. Until then it costs about 16 tokens; SKILL.md has 155 words of instructions outside code blocks.

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

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 WellApp-ai/Well at commit c740217, republished under its MIT licence (© WellApp-ai). 155 words, ~522 tokens.

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

name: webapp-testing
description: Test web app UI using Browser MCP and Storybook

Webapp Testing Skill

Use Browser MCP to test the web application.

Storybook Testing

Ensure Storybook running: npm run storybook
Navigate: browser_navigate to http://localhost:6006
Take snapshot: browser_snapshot or browser_take_screenshot
Verify component states

Web App Testing

Ensure dev server: npm run dev
Navigate: browser_navigate to http://localhost:3000
Interact: browser_click, browser_type
Verify: browser_snapshot, browser_console_messages

Available Browser Tools

Tool	Purpose
`browser_navigate`	Go to URL
`browser_click`	Click element
`browser_type`	Type text
`browser_hover`	Hover over element
`browser_snapshot`	Get page state
`browser_take_screenshot`	Capture image
`browser_console_messages`	Check for errors
`browser_network_requests`	Debug API calls
`browser_resize`	Test responsive layouts
`browser_press_key`	Keyboard interactions

Testing Workflow

1. Component Testing (Storybook)

browser_navigate → http://localhost:6006
browser_snapshot → verify component renders
browser_click → interact with controls
browser_console_messages → check for errors

2. Integration Testing (Web App)

browser_navigate → http://localhost:3000
browser_type → fill forms
browser_click → submit/navigate
browser_network_requests → verify API calls
browser_snapshot → verify state changes

Testing Checklist

Component renders correctly
No console errors
Responsive at different sizes (browser_resize)
Keyboard navigation works (browser_press_key)
Loading/error states display properly
Network requests succeed

Common Issues

Issue	Debug With
Blank page	`browser_console_messages`
API failures	`browser_network_requests`
Layout broken	`browser_take_screenshot`
Click not working	`browser_snapshot` to find selector

Files

Just SKILL.md in cursor-rules/skills/webapp-testing of WellApp-ai/Well.

Open the folder on GitHubat commit c740217

Compare with similar skills

Webapp 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.

Webapp Testing compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Webapp Testing this skillWellApp-ai/Well	345	—	~522	Automated safety check: Pass	MIT	7 days ago
React Devtools MCPsanity-io/ui	176	—	~2k	Automated safety check: Pass	MIT	today
Computed Stylesbitovi/ai-enablement-prompts	121	—	~2.4k	Automated safety check: Pass	MIT	26 days ago
Quasar Skilldskilld-dev/vue-ecosystem-skills	181	—	~1.6k	Automated safety check: Pass	MIT	15 days ago
Igniteui Wc Figma To AppIgniteUI/igniteui-webcomponents	170	—	~7.2k	Automated safety check: Pass	MIT	today
Visual Diffbitovi/ai-enablement-prompts	121	—	~2.9k	Automated safety check: Pass	MIT	26 days ago

Similar skills

React Devtools MCP
sanity-io/ui
Official
Inspect and profile the React component tree of a running Storybook story through chrome-devtools-mcp (React DevTools over the Chrome DevTools Protocol, via react-devtools-cdt-mcp).
176 GitHub stars~2k tokensUpdated today
Frontend & DesignAuto-check passed
Computed Styles
bitovi/ai-enablement-prompts
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.
121 GitHub stars~2.4k tokensUpdated 26 days ago
Testing & QAAuto-check passed
Quasar Skilld
skilld-dev/vue-ecosystem-skills
Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).
181 GitHub stars~1.6k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
Igniteui Wc Figma To App
IgniteUI/igniteui-webcomponents
Builds Ignite UI Web Components views from Figma designs, supporting Indigo.Design kits, third-party kits (Material 3, Fluent 2, shadcn/ui, Untitled UI, in-house), and plain frames.
170 GitHub stars~7.2k tokensUpdated today
Frontend & DesignAuto-check passed
Visual Diff
bitovi/ai-enablement-prompts
Compare a baseline URL against a dev or Storybook URL by taking Playwright screenshots at multiple breakpoints, running a pixel-level image diff, and reporting results to guide style and HTML…
121 GitHub stars~2.9k tokensUpdated 26 days ago
Frontend & DesignAuto-check passed
Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
163 GitHub stars~3.2k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about Webapp Testing

What does Webapp Testing do?

Test web app UI using Browser MCP and Storybook. An agent skill from WellApp-ai/Well. Webapp Testing is an agent skill from WellApp-ai/Well.

When should I use Webapp Testing?

Webapp Testing fits situations like: tasks that involve Browser testing.

How do I install Webapp Testing in Claude Code?

Run `npx skills add WellApp-ai/Well --skill webapp-testing -a claude-code`. Or copy the skill folder (cursor-rules/skills/webapp-testing in WellApp-ai/Well) into .claude/skills/webapp-testing in your project. Claude Code loads it when a task matches its description.

How do I install Webapp Testing in Codex?

Run `npx skills add WellApp-ai/Well --skill webapp-testing -a codex`. Or copy the skill folder (cursor-rules/skills/webapp-testing in WellApp-ai/Well) into .agents/skills/webapp-testing in your project. Codex loads it when a task matches its description.

Can I use Webapp 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 WellApp-ai/Well --skill webapp-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/webapp-testing, .gemini/skills/webapp-testing, .github/skills/webapp-testing and .opencode/skills/webapp-testing in your project.

What does Webapp Testing need to run?

Going by SKILL.md and its folder, Webapp Testing needs the command-line tools its instructions call (npm).

Does Webapp 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 Webapp Testing 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 Webapp Testing use?

Webapp Testing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Webapp Testing use?

About 522 tokens (SKILL.md is roughly 2.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 Webapp Testing?

Skills that share tags, products or a category with Webapp Testing: React Devtools MCP (sanity-io/ui, 176 stars), Computed Styles (bitovi/ai-enablement-prompts, 121 stars), Quasar Skilld (skilld-dev/vue-ecosystem-skills, 181 stars) and Igniteui Wc Figma To App (IgniteUI/igniteui-webcomponents, 170 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Webapp Testing?

WellApp-ai (a GitHub organization) maintains it in WellApp-ai/Well, which has 345 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on September 30, 2026.

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

Install Webapp Testing

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Webapp Testing Skill

Storybook Testing

Web App Testing

Available Browser Tools

Testing Workflow

1. Component Testing (Storybook)

2. Integration Testing (Web App)

Testing Checklist

Common Issues

Files

Compare with similar skills

Similar skills

More from WellApp-ai/Well

Related

Questions about Webapp Testing