Quality

Front-end testing

Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked "test this component" or "write an e2e test".

fe-testingvitest, jest, playwright, cypress, testing-library5 rules91 tokens always loaded, 949 tokens when used, 1636 tokens in references on demand.

Install

init installs this skill when the project uses vitest, jest, playwright, cypress, testing-library. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-testing lands for Claude Code

.claude/skills/fe-testing/SKILL.mdskill
.claude/skills/fe-testing/references/testing.mdskill
.claude/rules/fe-testing.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-testing.md

---
paths:
  - "**/*.test.*"
  - "**/*.spec.*"
  - "**/__tests__/**"
  - "**/e2e/**"
  - "**/tests/**"
  - "**/cypress/**"
  - "**/playwright.config.*"
  - "**/vitest.config.*"
---

# Front-end testing (frontend-skills)

Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked "test this component" or "write an e2e test".

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.claude/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for OpenAI Codex

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-testing lands for Cursor

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
.cursor/rules/fe-testing.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-testing.mdc

---
description: Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked "test this component" or "write an e2e test".
globs: **/*.test.*, **/*.spec.*, **/__tests__/**, **/e2e/**, **/tests/**, **/cypress/**, **/playwright.config.*, **/vitest.config.*
alwaysApply: false
---

# Front-end testing (frontend-skills)

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.agents/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for GitHub Copilot

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
.github/instructions/fe-testing.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-testing.instructions.md

---
applyTo: "**/*.test.*,**/*.spec.*,**/__tests__/**,**/e2e/**,**/tests/**,**/cypress/**,**/playwright.config.*,**/vitest.config.*"
description: "Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked \"test this component\" or \"write an e2e test\"."
---

# Front-end testing (frontend-skills)

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.agents/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for Gemini CLI

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-testing lands for Antigravity CLI

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
.agents/rules/fe-testing.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-testing.md

---
trigger: glob
globs: "**/*.test.*, **/*.spec.*, **/__tests__/**, **/e2e/**, **/tests/**, **/cypress/**, **/playwright.config.*, **/vitest.config.*"
description: "Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked \"test this component\" or \"write an e2e test\"."
---

# Front-end testing (frontend-skills)

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.agents/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for Devin / Windsurf

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
.devin/rules/fe-testing.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-testing.md

---
trigger: glob
globs: "**/*.test.*,**/*.spec.*,**/__tests__/**,**/e2e/**,**/tests/**,**/cypress/**,**/playwright.config.*,**/vitest.config.*"
---

# Front-end testing (frontend-skills)

Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked "test this component" or "write an e2e test".

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.agents/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for OpenCode

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-testing lands for Cline

.claude/skills/fe-testing/SKILL.mdskill
.claude/skills/fe-testing/references/testing.mdskill
.clinerules/fe-testing.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-testing.md

---
paths:
  - "**/*.test.*"
  - "**/*.spec.*"
  - "**/__tests__/**"
  - "**/e2e/**"
  - "**/tests/**"
  - "**/cypress/**"
  - "**/playwright.config.*"
  - "**/vitest.config.*"
---

# Front-end testing (frontend-skills)

Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked "test this component" or "write an e2e test".

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.claude/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for Zed

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-testing lands for JetBrains Junie

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-testing lands for Kiro

.kiro/skills/fe-testing/SKILL.mdskill
.kiro/skills/fe-testing/references/testing.mdskill
.kiro/steering/fe-testing.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-testing.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.test.*", "**/*.spec.*", "**/__tests__/**", "**/e2e/**", "**/tests/**", "**/cypress/**", "**/playwright.config.*", "**/vitest.config.*"]
---

# Front-end testing (frontend-skills)

Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked "test this component" or "write an e2e test".

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.kiro/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for Augment

.agents/skills/fe-testing/SKILL.mdskill
.agents/skills/fe-testing/references/testing.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-testing lands for Trae

.trae/skills/fe-testing/SKILL.mdskill
.trae/skills/fe-testing/references/testing.mdskill
.trae/rules/fe-testing.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-testing.md

---
description: "Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked \"test this component\" or \"write an e2e test\"."
globs: **/*.test.*,**/*.spec.*,**/__tests__/**,**/e2e/**,**/tests/**,**/cypress/**,**/playwright.config.*,**/vitest.config.*
alwaysApply: false
---

# Front-end testing (frontend-skills)

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.trae/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for Continue

.frontend-skills/skills/fe-testing/SKILL.mdskill
.frontend-skills/skills/fe-testing/references/testing.mdskill
.continue/rules/fe-testing.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-testing.md

---
name: "Front-end testing"
description: "Writes reliable front-end tests with the project's own runner - unit and component tests with Vitest or Jest and Testing Library queries by role, end-to-end tests with Playwright 1.65 or Cypress, network mocking, accessibility scans with axe-core, without flakes. Use when adding or fixing tests, a flaky test or CI test setup, or when asked \"test this component\" or \"write an e2e test\"."
globs: ["**/*.test.*", "**/*.spec.*", "**/__tests__/**", "**/e2e/**", "**/tests/**", "**/cypress/**", "**/playwright.config.*", "**/vitest.config.*"]
alwaysApply: false
---

# Front-end testing (frontend-skills)

- Run tests through the project's own script and runner (`npm test`, `pnpm test:e2e`); never install a second runner.
- Never commit `.only`, `fit` or `fdescribe`; make CI refuse them (test/no-focused-tests).
- Wait for conditions, never for time: no `waitForTimeout`, `cy.wait(ms)` or sleeps (test/no-fixed-wait).
- In Playwright, assert with web-first matchers: `await expect(locator).toBeVisible()` (test/web-first-assertions).
- Find elements by role and name first, then label and text; test ids last (test/query-by-role).
- Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
- Await every async call: `findBy*`, `user.*`, Playwright actions and assertions.
- Each test sets up its own state and passes alone; reset in `beforeEach`, not `afterEach`.
- Mock HTTP at the network boundary (MSW, `page.route`, `cy.intercept`); never hit third-party services.
- Every test asserts something a user would notice; no tests of implementation details.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-testing/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-testing lands for Amazon Q Developer

.frontend-skills/skills/fe-testing/SKILL.mdskill
.frontend-skills/skills/fe-testing/references/testing.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-testing` (Front-end testing): when editing `**/*.test.*`, `**/*.spec.*`, `**/__tests__/**`, `**/e2e/**`, `**/tests/**`, `**/cypress/**`, `**/playwright.config.*`, `**/vitest.config.*`, first read `.frontend-skills/skills/fe-testing/SKILL.md`.

The real file

Where fe-testing lands for Aider

.frontend-skills/skills/fe-testing/SKILL.mdskill
.frontend-skills/skills/fe-testing/references/testing.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-testing` (Front-end testing): when editing `**/*.test.*`, `**/*.spec.*`, `**/__tests__/**`, `**/e2e/**`, `**/tests/**`, `**/cypress/**`, `**/playwright.config.*`, `**/vitest.config.*`, first read `.frontend-skills/skills/fe-testing/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

test this component
write an e2e test

And to check and fix the work:

Use the fe-testing skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain test/no-focused-tests and fix it here.

Rules it teaches

test/no-focused-tests
No focused tests (.only, fit, fdescribe) are committed; they silently skip the rest of the suite.
seriousstatic
test/no-fixed-wait
Tests wait for conditions, never for a fixed time (no waitForTimeout, cy.wait(ms) or setTimeout sleeps).
moderatestatic
test/web-first-assertions
Playwright tests assert with auto-retrying web-first matchers (toBeVisible, toHaveText), not on values read once.
moderatestatic
test/query-by-role
Tests find elements the way users do - getByRole with a name first, then label and text; test ids only as a last resort.
minormanual
test/axe-in-e2e
End-to-end tests run an axe scan with the WCAG tags you target on each key page and state, and fail on violations.
moderatemanual

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Run tests through the project's own script and runner (npm test, pnpm test:e2e); never install a second runner.
Never commit .only, fit or fdescribe; make CI refuse them (test/no-focused-tests).
Wait for conditions, never for time: no waitForTimeout, cy.wait(ms) or sleeps (test/no-fixed-wait).
In Playwright, assert with web-first matchers: await expect(locator).toBeVisible() (test/web-first-assertions).
Find elements by role and name first, then label and text; test ids last (test/query-by-role).
Scan key pages and states with axe-core and the WCAG tags you target; automated checks find only part of the problems (test/axe-in-e2e).
Await every async call: findBy*, user.*, Playwright actions and assertions.
Each test sets up its own state and passes alone; reset in beforeEach, not afterEach.
Mock HTTP at the network boundary (MSW, page.route, cy.intercept); never hit third-party services.
Every test asserts something a user would notice; no tests of implementation details.

Steps the agent follows

Read the profile and package.json scripts to find the runners: vitest.config.* (or test in vite.config.*), jest.config.*, playwright.config.*, cypress.config.*, .storybook/.
Component test: render, act with userEvent.setup(), assert on what is on screen (getByRole, findByText); in jsdom or happy-dom, or Vitest browser mode for anything that needs real layout.
End-to-end: one user journey per test, user-facing locators, web-first assertions, test data created through the API in beforeEach or a setup project for sign-in.
Add an axe scan to the e2e tests of each page type, and again after opening dialogs and menus.
When a test flakes: find the race (a missing await, a fixed wait, shared state), fix it, and keep retries only as a safety net that is reported.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds focused tests, fixed waits and one-shot Playwright assertions in .js, .jsx and .tsx test files.
Run the project's lint with the runner's plugin (eslint-plugin-vitest, eslint-plugin-jest, eslint-plugin-playwright, eslint-plugin-testing-library) if it is installed.
Run the changed tests alone and several times (--repeat-each=5 in Playwright) before calling them stable.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/testing.md1636 tokens

SKILL.md on GitHub