claude

frontend-testing

Comprehensive guide and tools for writing frontend tests. 55 best practices, specialized agents for planning, analysis, verification, and healing.

13 on GitHubby Yoni Goldberg (Practica.js)v1.5.0MITupdated 25 days ago
/

Plugin frontend-testing from marketplace frontend-testing-skill-marketplace in practicajs/the-frontend-testing-skill. Commands read from the repo's manifest — 25 days ago.

This plugin runs code on your machine — its hooks fire automatically on events like tool use. The exact commands are listed below; read them before installing.

What it installs

Skills (1)

  • frontend-testing

    The project's unique and mandatory frontend testing playbook, which must be consulted whenever doing anything related to testing and during the plan of any coding session. Without consulting this skill, you might perform things that deviate from the organization's standards.

Slash commands (12)

  • /frontend-testing:testskill.fix-flaky

    Reproduce, diagnose, and fix a flaky test

  • /frontend-testing:testskill.fix-test

    Fix a failing test

  • /frontend-testing:testskill.generate-test-review-report

    Generate an HTML report from test verification JSON data

  • /frontend-testing:testskill.init

    Initialize Testing Skill - set up MCP servers, link memory files, and integrate with spec-driven development frameworks

  • /frontend-testing:testskill.plan

    Plan testing of a the $ARGUMENTS page and scenarios including page inspection, elements accessibility check, console errors verification, print screens and more

  • /frontend-testing:testskill.review

    Review a test file against testing best practices

  • /frontend-testing:testskill.setup-playwright

    Setup Playwright for frontend page and component testing. Including Playwright config, browser installation, CI, rules and more

  • /frontend-testing:testskill.setup-vite

    Setup Vitest browser mode with Playwright provider for frontend page and component testing. Including config, browser installation, CI, rules and more

  • /frontend-testing:testskill.toolbox-checklist

    Scan the project for essential testing tools and infrastructure, produce a summary checklist

  • /frontend-testing:testskill.update-skill

    Safely apply a small change to the testing skill

  • /frontend-testing:testskill.verify

    Verify tests pass and meet quality standards

  • /frontend-testing:testskill.write-test

    Write tests following the full test workflow

Subagents (9)

  • testskill.flaky-fixer

    Reproduce, diagnose, and fix flaky tests using trace comparison and escalated reproduction strategies. Use when a test passes sometimes and fails other times.

  • testskill.healer

    Use this agent when you need to debug and fix failing Playwright tests. Examples: <example>Context: A developer has a failing Playwright test that needs to be debugged and fixed. user: 'The login test is failing, can you fix it?' assistant: 'I'll use the testskill.healer agent to debug and fix the f

  • testskill.locator-fixer

    Use this agent to add proper ARIA attributes to page elements lacking accessibility. Examples: <example>Context: Test planner reported elements without proper ARIA attributes. user: 'The login button doesn't have an aria-label, can you fix it?' assistant: 'I'll use the testskill.locator-fixer agent

  • testskill.mutator

    Plants mutants in production code to verify a test catches them. Returns pure JSON.

  • testskill.page-analyzer

    Analyze a web page and create a page-analysis.md report with various information about a page, like the DOM, network requests, and more. It's a good practice to use this before writing non-trivial tests

  • testskill.planner

    Use this agent at the begining of coding workflows to generate a test plan, pass a screen name, a more specific flow or a specific test and get an exhaustive test plan markdown. If already having a working folder with tasks for this feature, pass it in $context_folder so the test artifacts will be c

  • testskill.reviewer

    Reviews one or more tests against best practices. Returns a JSON array.

  • testskill.test-fixer

    Use this anytime you have a failing test and would like to understand the failure better or fix it

  • testskill.verifier

    Use this agent after completing test writing to verify tests pass and meet quality standards. Examples: <example>Context: Developer finished writing tests and wants to verify everything is correct. user: 'Verify my tests are complete and passing' assistant: 'I'll use the testskill.verifier agent to

Hooks (1)

  • SessionStart

    echo -e 'Use the frontend testing skill for any code editing, whether big or small. This project has a strict, opinionated, and regulated testing workflow that should never be discarded — specifically

View source on GitHub

Similar plugins

Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling

19 skills

anthropics/skills 193,780

Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification

1 command · 6 agents

anthropics/claude-code 155,476

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.

1 skill · 4 agents · hooks

pbakaus/impeccable 109,099

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

Agentic QE (external: maintained in proffesor-for-testing/agentic-qe, pinned to v3.15.17): a quality-engineering fleet with 11 QE agents, 9 skills, 9 commands, the agentic-qe MCP server pinned to the plugin version, and the aqe-mod guard that refuses destructive operations on AQE learning data

9 skills · 9 commands · 11 agents · 1 MCP server

ruvnet/ruflo 81,589

Maintain frontend-testing?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex pluginslisted