React Testing
affaan-m/ECC
React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…
Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.
Install Front End Testing
$ npx skills add citypaul/.dotfiles --skill front-end-testing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install citypaul/.dotfiles front-end-testing --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/citypaul/.dotfiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/claude/.claude/skills/front-end-testing .claude/skills/front-end-testing && 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 "front-end-testing" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testing into .claude/skills/front-end-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "front-end-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 install https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testingType 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 citypaul/.dotfiles --skill front-end-testing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install citypaul/.dotfiles front-end-testing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/claude/.claude/skills/front-end-testing .agents/skills/front-end-testing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "front-end-testing" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testing into .agents/skills/front-end-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "front-end-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.
$ npx skills add citypaul/.dotfiles --skill front-end-testing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install citypaul/.dotfiles front-end-testing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/claude/.claude/skills/front-end-testing .cursor/skills/front-end-testing && 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 "front-end-testing" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testing into .cursor/skills/front-end-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "front-end-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 https://github.com/citypaul/.dotfiles.git --path claude/.claude/skills/front-end-testing--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 citypaul/.dotfiles --skill front-end-testing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install citypaul/.dotfiles front-end-testing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/claude/.claude/skills/front-end-testing .gemini/skills/front-end-testing && 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 "front-end-testing" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testing into .gemini/skills/front-end-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "front-end-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.
$ gh skill install citypaul/.dotfiles front-end-testingInstalls 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 citypaul/.dotfiles --skill front-end-testing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/claude/.claude/skills/front-end-testing .github/skills/front-end-testing && 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 "front-end-testing" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testing into .github/skills/front-end-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "front-end-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.
$ npx skills add citypaul/.dotfiles --skill front-end-testing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install citypaul/.dotfiles front-end-testing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/citypaul/.dotfiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/claude/.claude/skills/front-end-testing .opencode/skills/front-end-testing && 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 "front-end-testing" agent skill from https://github.com/citypaul/.dotfiles/tree/main/claude/.claude/skills/front-end-testing into .opencode/skills/front-end-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "front-end-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
front-end-testing- GitHub stars
- 739
- Token cost
- ~6.2k tokens
- SKILL.md length
- 2,506 words
- Files
- 5
- Skills in repo
- 44
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.
- Works in 2 steps: End-users: Interact through the DOM… → Developers: You, refactoring…
- Testing any front-end application
- SKILL.md covers Core Philosophy, Vitest Browser Mode for…, Playwright E2E Is a Different… and Query Selection Priority, plus 5 more sections
- Calls playwright
What it does
Front End Testing is an agent skill from citypaul/.dotfiles. Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library. Use when testing any front-end application, writing UI or end-to-end tests, querying DOM elements, simulating user interactions, or choosing the lightest harness that proves a browser-observable claim. For React-specific patterns, see the react-testing skill.
Its SKILL.md is about 6.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `resources/async-patterns.md`, `resources/dom-testing-library-legacy.md` and `resources/msw.md`).
It sits in Testing & QA, covering Unit testing, Test strategy and End-to-end testing. It works with React, Vitest, Playwright and Testing Library.
When your agent uses it
- Testing any front-end application
- End-to-end tests
- Querying DOM elements
- Simulating user interactions
Example prompts
- “/front-end-testing”
Requirements
- Node.js
- Docker
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- End-users: Interact through the DOM (clicks, typing, reading text)
- Developers: You, refactoring implementation
What it can do on your machine
Read from SKILL.md and the folder at commit cd4028d. 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:
playwright
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Front End Testing loads about 6.2k tokens when it runs. Until then it costs about 101 tokens; SKILL.md has 2,506 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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 2,506 words (~6,205 tokens).
“For React-specific patterns (components, hooks, context), load the react-testing skill. For TDD workflow, load the tdd skill. For general testing patterns (factories, public-interface testing), load the testing skill.”
- name
- front-end-testing
Files
SKILL.md and 4 other files in claude/.claude/skills/front-end-testing of citypaul/.dotfiles.
- SKILL.md
- resources/async-patterns.md
- resources/dom-testing-library-legacy.md
- resources/msw.md
- resources/playwright-e2e.md
Open the folder on GitHubat commit cd4028d
Compare with similar skills
Front End 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Front End Testing this skillcitypaul/.dotfiles | 739 | — | ~6.2k | Automated safety check: Pass | Custom licence | |
| React Testingaffaan-m/ECC | 275k | 1 repos | ~3.3k | Automated safety check: Pass | MIT | |
| Senior QAalirezarezvani/claude-skills | 28k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Frontend Typescript Testingshinpr/ai-coding-project-boilerplate | 232 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Frontend Typescript Testingshinpr/ai-coding-project-boilerplate | 232 | — | ~843 | Automated safety check: Pass | MIT | |
| Frontend Typescript Testingshinpr/ai-coding-project-boilerplate | 232 | — | ~692 | Automated safety check: Pass | MIT |
Similar skills
Senior QA
alirezarezvani/claude-skills
Generates unit tests, integration tests, and E2E tests for React/Next.js applications.
Frontend Typescript Testing
shinpr/ai-coding-project-boilerplate
Designs frontend tests using the repository's configured React test and browser harnesses, including RTL, MSW, Vitest, and Playwright when present.
Frontend Typescript Testing
shinpr/ai-coding-project-boilerplate
リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。
Frontend Typescript Testing
shinpr/ai-coding-project-boilerplate
使用仓库已配置的 React 测试与浏览器测试工具（包括 RTL、MSW、Vitest，以及存在时的 Playwright）设计前端测试。适用于新增或评审组件测试、加载/错误状态测试、集成测试或前端 E2E 测试时。
Playwright Testing
chongdashu/vibejam-starter-pack
Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.
More from citypaul/.dotfiles
All 44 skills in this repoFind Skills
citypaul/.dotfiles
Discover and, with authorization, install agent skills from the open skills ecosystem.
Render Code Shape
citypaul/.dotfiles
Render the shape of code — module boundaries, the types that cross them, signatures, and a cited call graph — for code that already exists or a change about to be built.
Structure Codebase
citypaul/.dotfiles
Design, audit, and evolve physical source and package structures that expose real architectural boundaries while keeping related behavior together.
Test Design Reviewer
citypaul/.dotfiles
Review test quality using Dave Farley's eight properties of good tests.
Characterisation Tests
citypaul/.dotfiles
A skill your agent uses when modifying existing code that lacks tests and you need to document its actual current behavior before making changes -- the legacy code dilemma where you need tests to…
CI Debugging
citypaul/.dotfiles
Systematic CI/CD failure diagnosis using hypothesis-first investigation, local reproduction, and environment delta analysis.
Related
Works with
Categories
Questions about Front End Testing
What does Front End Testing do?
Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library. dotfiles. Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.
When should I use Front End Testing?
Front End Testing fits situations like: testing any front-end application; end-to-end tests; querying DOM elements; simulating user interactions.
How do I install Front End Testing in Claude Code?
Run `npx skills add citypaul/.dotfiles --skill front-end-testing -a claude-code`. Or copy the skill folder (claude/.claude/skills/front-end-testing in citypaul/.dotfiles) into .claude/skills/front-end-testing in your project. Claude Code loads it when a task matches its description.
How do I install Front End Testing in Codex?
Run `npx skills add citypaul/.dotfiles --skill front-end-testing -a codex`. Or copy the skill folder (claude/.claude/skills/front-end-testing in citypaul/.dotfiles) into .agents/skills/front-end-testing in your project. Codex loads it when a task matches its description.
Can I use Front End 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 citypaul/.dotfiles --skill front-end-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/front-end-testing, .gemini/skills/front-end-testing, .github/skills/front-end-testing and .opencode/skills/front-end-testing in your project.
What does Front End Testing need to run?
Going by SKILL.md and its folder, Front End Testing needs the command-line tools its instructions call (playwright). Our summary lists: Node.js; Docker.
Does Front End Testing 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 Front End 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 Front End Testing use?
Front End Testing has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Front End Testing use?
About 6.2k tokens (SKILL.md is roughly 25k 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 Front End Testing?
Skills that share tags, products or a category with Front End Testing: React Testing (affaan-m/ECC, 275k stars), Senior QA (alirezarezvani/claude-skills, 28k stars), Frontend Typescript Testing (shinpr/ai-coding-project-boilerplate, 232 stars) and Frontend Typescript Testing (shinpr/ai-coding-project-boilerplate, 232 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Front End Testing?
citypaul (a GitHub user) maintains it in citypaul/.dotfiles, which has 739 GitHub stars. The repository holds 44 skills in this directory. The repository was last updated on October 2, 2026.
Source: citypaul/.dotfiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.