Agent skill

Memstack Development Webapp Testing

by cwinvestments in cwinvestments/memstack

A skill your agent uses when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser…

MITAuto-check: notesTesting & QA

Install Memstack Development Webapp Testing

skills CLI
$ npx skills add cwinvestments/memstack --skill memstack-development-webapp-testing -a claude-code

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

GitHub CLI
$ gh skill install cwinvestments/memstack memstack-development-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/cwinvestments/memstack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/development/webapp-testing .claude/skills/memstack-development-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/

Facts

Skill name
memstack-development-webapp-testing
GitHub stars
423
Token cost
~1.5k tokens
SKILL.md length
340 words
Files
1
Skills in repo
87
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser…

  • Works in 6 steps: Assess the target → Set up Playwright (if not installed) → Write tests for each user flow → …
  • The user says write browser tests
  • SKILL.md covers Activation, Context Guard, Steps and Disambiguation, plus 1 more section
  • Calls npx, npm and pnpm

What it does

Memstack Development Webapp Testing is an agent skill from cwinvestments/memstack. Use when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser testing for a web application. Do NOT use for unit tests, API tests, or non-browser testing.

Its SKILL.md is about 1.5k 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 Browser testing and Unit testing. It works with Playwright. The repository describes itself as: Structured skill framework for Claude Code. 130 skills, persistent memory, TokenStack compression, localhost dashboard with 3-agent runner, real-time streaming, MCP tools. The licence is MIT.

When your agent uses it

  • The user says write browser tests
  • Playwright test
  • End to end test
  • Needs Playwright-based browser testing for a web application

Example prompts

  • “write browser tests”
  • “test this page”
  • “playwright test”
  • “/memstack-development-webapp-testing”

Requirements

  • Node.js

Workflow steps

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

  1. Assess the target
  2. Set up Playwright (if not installed)
  3. Write tests for each user flow
  4. Handle authentication flows
  5. Common test patterns
  6. Run and report

What it can do on your machine

Read from SKILL.md and the folder at commit 00370ce. 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:

    • npx
    • npm
    • pnpm
    • playwright

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, npm and 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

Memstack Development Webapp Testing loads about 1.5k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 340 words of instructions outside code blocks.

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

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:35
    | App URL | Check package.json scripts, .env, or ask | `http://localhost:3000` |

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 cwinvestments/memstack at commit 00370ce, republished under its MIT licence (© cwinvestments). 340 words, ~1,535 tokens.

Download SKILL.mdSave it as .claude/skills/memstack-development-webapp-testing/SKILL.md (or your agent's skills folder).
name
memstack-development-webapp-testing
description
Use when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser testing for a web application. Do NOT use for unit tests, API tests, or non-browser testing.
version
1.0.0

Webapp Testing: Writing browser tests...

Produces Playwright end-to-end tests that verify real user flows in a browser.

Activation

TriggerStatus
User says "write browser tests" or "playwright test"ACTIVE
User says "test this page" or "e2e test"ACTIVE
User says "test the UI" or "browser test"ACTIVE
User wants unit tests or API testsNOT this skill: use standard test patterns
User wants load testingNOT this skill

Context Guard

  • Do NOT use for unit tests (Jest, Vitest without browser)
  • Do NOT use for API-only testing (use curl/fetch patterns)
  • Do NOT use for performance benchmarking
  • This skill ONLY produces Playwright browser tests

Steps

Step 1: Assess the target

Determine what to test:

ParameterHow to findExample
App URLCheck package.json scripts, .env, or askhttp://localhost:3000
FrameworkCheck package.json dependenciesNext.js, React, SvelteKit
Auth required?Check for login pages, auth middlewareYes/No
Key user flowsAsk or infer from routesSign up, checkout, search
bash
# Check if Playwright is already installed
cat package.json | grep -i playwright

# Check existing test structure
find . -name "*.spec.ts" -o -name "*.test.ts" | head -20
Step 2: Set up Playwright (if not installed)
bash
npm init playwright@latest
# or
pnpm add -D @playwright/test
npx playwright install

Confirm playwright.config.ts exists. If not, create with sensible defaults:

typescript
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});
Step 3: Write tests for each user flow

Follow this structure per flow:

typescript
import { test, expect } from '@playwright/test';

test.describe('Feature Name', () => {
  test('should [expected behavior] when [action]', async ({ page }) => {
    // Arrange, navigate to the page
    await page.goto('/path');

    // Act, perform user actions
    await page.getByRole('button', { name: 'Submit' }).click();

    // Assert, verify the result
    await expect(page.getByText('Success')).toBeVisible();
  });
});

Test writing rules:

  1. Use getByRole, getByLabel, getByText over CSS selectors: they survive refactors
  2. One assertion per test where practical: clear failure messages
  3. Name tests as user stories: "should show error when email is invalid"
  4. Use test.describe to group related flows
  5. Add test.beforeEach for shared navigation/auth setup
  6. Never hardcode waits, use expect with auto-waiting or waitForSelector
Step 4: Handle authentication flows

If the app requires login:

typescript
// tests/e2e/auth.setup.ts
import { test as setup, expect } from '@playwright/test';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Password').fill('testpassword');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL('/dashboard');

  // Save signed-in state
  await page.context().storageState({ path: '.auth/user.json' });
});

Add to playwright.config.ts:

typescript
projects: [
  { name: 'setup', testMatch: /.*\.setup\.ts/ },
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
      storageState: '.auth/user.json',
    },
    dependencies: ['setup'],
  },
],
Step 5: Common test patterns

Form validation:

typescript
test('should show validation errors for empty required fields', async ({ page }) => {
  await page.goto('/form');
  await page.getByRole('button', { name: 'Submit' }).click();
  await expect(page.getByText('Email is required')).toBeVisible();
});

Navigation flow:

typescript
test('should navigate from landing to pricing', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('link', { name: 'Pricing' }).click();
  await expect(page).toHaveURL('/pricing');
  await expect(page.getByRole('heading', { name: 'Pricing' })).toBeVisible();
});

API response verification:

typescript
test('should load and display data', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page.getByRole('table')).toBeVisible();
  await expect(page.locator('tbody tr')).toHaveCount(10);
});
Step 6: Run and report
bash
# Run all tests
npx playwright test

# Run specific test file
npx playwright test tests/e2e/auth.spec.ts

# Run with UI mode for debugging
npx playwright test --ui

# Show HTML report
npx playwright show-report

Present results:

Playwright tests written:
- [N] test files covering [N] user flows
- Auth setup: [yes/no]
- Flows tested: [list]

Run with: npx playwright test

Disambiguation

  • "write browser tests" / "playwright test" / "e2e test" = Webapp Testing
  • "write unit tests" / "jest test" / "vitest" = Standard test patterns (not this skill)
  • "test the API" / "curl test" = API testing (not this skill)
  • "verify my code" / "check this work" = Verify (not this skill)

Level History

  • Lv.1: Base: Playwright test generation with role-based selectors, auth flows, common patterns, CI-ready config. (Origin: MemStack v3.5, Apr 2026)

© cwinvestments, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/development/webapp-testing of cwinvestments/memstack.

Open the folder on GitHubat commit 00370ce

Compare with similar skills

Memstack Development 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.

Memstack Development Webapp Testing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Memstack Development Webapp Testing this skillcwinvestments/memstack423—~1.5kAutomated safety check: NotesMIT
Debug Playwright Prowquay/quay2.8k—~2.2kAutomated safety check: PassApache-2.0
Control UI E2Eopenclaw/openclaw392k—~2.9kAutomated safety check: PassMIT
Quay Prow Triagequay/quay2.8k—~2.9kAutomated safety check: PassApache-2.0
Ckeditor5 TestingTriliumNext/Trilium38k—~3.3kAutomated safety check: PassAGPL-3.0
Check Visual Changesigrlk/storybook-addon-test-codegen1541 repos~1.4kAutomated safety check: PassMIT

Similar skills

  • Deep-dive diagnosis of a Playwright test failure already isolated to one Quay Prow/OpenShift CI run: downloads its GCS artifacts (results.json, JUnit, build/pod logs, Jaeger traces), classifies real…

    2.8k GitHub stars~2.2k tokensUpdated today
    Testing & QAAuto-check passed
  • Control UI E2E

    openclaw/openclaw

    A skill your agent uses when designing, testing, fixing, or extending the OpenClaw Control UI GUI, including UI stress-test galleries with feedback inputs, Vitest + Playwright end-to-end checks…

    392k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check passed
  • Diagnose any Quay Prow job failure end to end: prowjob.json - top-level build log - JUnit - resolved failing step - Playwright results.json when the failing step is Playwright, continuing through…

    2.8k GitHub stars~2.9k tokensUpdated today
    Testing & QAAuto-check passed
  • Ckeditor5 Testing

    TriliumNext/Trilium

    Testing CKEditor 5 plugins in the Trilium monorepo. An agent skill from TriliumNext/Trilium.

    38k GitHub stars~3.3k tokensUpdated today
    Testing & QAAuto-check passed
  • Check Visual Changes

    igrlk/storybook-addon-test-codegen

    Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…

    154 GitHub starsUsed in 1 repo~1.4k tokens
    Testing & QAAuto-check passed
  • Verify

    Gnathonic/mokuro-reader

    Verify reader features end-to-end by importing a synthetic volume through the real upload modal and driving the reader with Playwright.

    209 GitHub stars~724 tokensUpdated today
    Testing & QAAuto-check passed

More from cwinvestments/memstack

All 87 skills in this repo
  • Memstack SEO Site Audit

    cwinvestments/memstack

    A skill your agent uses when the user says 'SEO audit', 'site audit', 'check SEO', 'audit my site', 'SEO check', 'technical SEO', or is evaluating a website's search engine optimization health, meta…

    423 GitHub stars~3.5k tokensUpdated 11 days ago
    Auto-check passed
  • Memstack SEO Schema Markup

    cwinvestments/memstack

    A skill your agent uses when the user says 'add schema', 'schema markup', 'JSON-LD', 'structured data', 'rich results', 'rich snippets', or is adding or fixing schema.org structured data for better…

    423 GitHub stars~2.7k tokensUpdated 11 days ago
    Auto-check passed
  • Compress

    cwinvestments/memstack

    A skill your agent uses when the user says 'tokenstack', 'compression', 'token savings', 'proxy status', or asks about context window usage.

    423 GitHub stars~1.2k tokensUpdated 11 days ago
    Auto-check passed
  • Diary

    cwinvestments/memstack

    A skill your agent uses when the user says 'save diary', 'log session', 'wrapping up', or at end of a productive session.

    423 GitHub stars~5k tokensUpdated 11 days ago
    Auto-check passed
  • Echo

    cwinvestments/memstack

    A skill your agent uses when the user references past sessions, asks 'what did we do', 'do you remember', 'last session', 'recall', or 'continue from'.

    423 GitHub stars~1.7k tokensUpdated 11 days ago
    Auto-check passed
  • Familiar

    cwinvestments/memstack

    A skill your agent uses when the user says 'dispatch', 'send familiar', 'split task', or needs work split across parallel CC sessions.

    423 GitHub stars~556 tokensUpdated 11 days ago
    Auto-check passed

Works with

Categories

Questions about Memstack Development Webapp Testing

What does Memstack Development Webapp Testing do?

A skill your agent uses when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser…. Memstack Development Webapp Testing is an agent skill from cwinvestments/memstack. Use when the user says 'write browser tests', 'test this page', 'playwright test', 'e2e test', 'end to end test', 'browser test', 'test the UI', or needs Playwright-based browser testing for a web application.

When should I use Memstack Development Webapp Testing?

Memstack Development Webapp Testing fits situations like: the user says write browser tests; playwright test; end to end test; needs Playwright-based browser testing for a web application.

How do I install Memstack Development Webapp Testing in Claude Code?

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

How do I install Memstack Development Webapp Testing in Codex?

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

Can I use Memstack Development 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 cwinvestments/memstack --skill memstack-development-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/memstack-development-webapp-testing, .gemini/skills/memstack-development-webapp-testing, .github/skills/memstack-development-webapp-testing and .opencode/skills/memstack-development-webapp-testing in your project.

What does Memstack Development Webapp Testing need to run?

Going by SKILL.md and its folder, Memstack Development Webapp Testing needs the command-line tools its instructions call (npx, npm, pnpm and playwright). Our summary lists: Node.js.

Does Memstack Development Webapp Testing access the network?

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

Is Memstack Development Webapp 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 Memstack Development Webapp Testing use?

Memstack Development 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 Memstack Development Webapp Testing 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 Memstack Development Webapp Testing?

Skills that share tags, products or a category with Memstack Development Webapp Testing: Debug Playwright Prow (quay/quay, 2.8k stars), Control UI E2E (openclaw/openclaw, 392k stars), Quay Prow Triage (quay/quay, 2.8k stars) and Ckeditor5 Testing (TriliumNext/Trilium, 38k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Memstack Development Webapp Testing?

cwinvestments (a GitHub user) maintains it in cwinvestments/memstack, which has 423 GitHub stars. The repository holds 87 skills in this directory. The repository was last updated on September 26, 2026.

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