Ha Frontend Testing
home-assistant/frontend
Home Assistant frontend testing and validation workflow. An agent skill from home-assistant/frontend.
Chooses the right verification step after a code change in Pierre's monorepo: format and lint, a typecheck, Bun unit tests, snapshots, or Playwright E2E.
Install Pierre Testing and Verification Guide
$ npx skills add pierrecomputer/pierre --skill testing-and-verification -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pierrecomputer/pierre testing-and-verification --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/pierrecomputer/pierre.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/testing-and-verification .claude/skills/testing-and-verification && 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 "testing-and-verification" agent skill from https://github.com/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verification into .claude/skills/testing-and-verification/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "testing-and-verification", 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/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verificationType 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 pierrecomputer/pierre --skill testing-and-verification -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pierrecomputer/pierre testing-and-verification --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/testing-and-verification .agents/skills/testing-and-verification && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "testing-and-verification" agent skill from https://github.com/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verification into .agents/skills/testing-and-verification/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "testing-and-verification", 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 pierrecomputer/pierre --skill testing-and-verification -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pierrecomputer/pierre testing-and-verification --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/testing-and-verification .cursor/skills/testing-and-verification && 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 "testing-and-verification" agent skill from https://github.com/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verification into .cursor/skills/testing-and-verification/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "testing-and-verification", 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/pierrecomputer/pierre.git --path .agents/skills/testing-and-verification--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 pierrecomputer/pierre --skill testing-and-verification -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pierrecomputer/pierre testing-and-verification --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/testing-and-verification .gemini/skills/testing-and-verification && 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 "testing-and-verification" agent skill from https://github.com/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verification into .gemini/skills/testing-and-verification/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "testing-and-verification", 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 pierrecomputer/pierre testing-and-verificationInstalls 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 pierrecomputer/pierre --skill testing-and-verification -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/testing-and-verification .github/skills/testing-and-verification && 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 "testing-and-verification" agent skill from https://github.com/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verification into .github/skills/testing-and-verification/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "testing-and-verification", 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 pierrecomputer/pierre --skill testing-and-verification -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pierrecomputer/pierre testing-and-verification --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/testing-and-verification .opencode/skills/testing-and-verification && 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 "testing-and-verification" agent skill from https://github.com/pierrecomputer/pierre/tree/main/.agents/skills/testing-and-verification into .opencode/skills/testing-and-verification/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "testing-and-verification", 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
testing-and-verification- GitHub stars
- 6.2k
- Token cost
- ~608 tokens
- SKILL.md length
- 235 words
- Files
- 1
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Chooses the right verification step after a code change in Pierre's monorepo: format and lint, a typecheck, Bun unit tests, snapshots, or Playwright E2E.
- Deciding which verification step to run after a code change
- SKILL.md covers Baseline Commands, Unit and Integration Tests, Snapshots and Browser and E2E Tests
- Calls bun
- Running unit tests scoped to just the packages that changed
What it does
After any code change, a baseline format-and-lint command runs from anywhere in the repo through the project's task runner, with separate check-only and fix variants available for the root project. Code changes also get a typecheck scoped to the affected project, with the task runner automatically building workspace dependencies first, and an `--affected` flag available to scope the check to only what actually changed.
Unit and integration tests use Bun's built-in runner with `describe`, `test` and `expect`, usually living in a `test/` folder inside each package; running the whole suite is possible but tests import workspace dependencies through their built output, so either the task runner builds those first or `bun test` is run directly once the dist output is already fresh. Snapshot testing is supported but discouraged except where it stays shallow and narrowly scoped to the exact behavior under test, updated from the package directory with a dedicated flag.
Browser and end-to-end tests are reserved for behavior that genuinely cannot be checked without a real browser engine, such as computed style checks or shadow DOM boundaries, kept small and high-value rather than broad. A React-oriented lint rule set is overridden off for two specific Preact component directories, so new Preact components belong there rather than getting a one-off lint-disable comment.
When your agent uses it
- Deciding which verification step to run after a code change
- Running unit tests scoped to just the packages that changed
- Adding a browser E2E test for behavior that needs a real rendering engine
- Updating a snapshot test from inside its package directory
Example prompts
- “What should I run after this change to the trees package?”
- “Add a Playwright test for this shadow DOM boundary behavior.”
- “Update the snapshot for this component after my change.”
Requirements
- Bun
- The project's moon task runner
- Playwright, for browser E2E tests
What it can do on your machine
Read from SKILL.md and the folder at commit d302ea0. 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:
bun
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
Pierre Testing and Verification Guide loads about 608 tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 235 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
The full file from pierrecomputer/pierre at commit d302ea0, republished under its Apache-2.0 licence (© pierrecomputer). 235 words, ~608 tokens.
Download SKILL.mdSave it as
.claude/skills/testing-and-verification/SKILL.md (or your agent's skills folder).- name
- testing-and-verification
- description
- Use when adding or running tests, checking snapshots, choosing between Bun tests and Playwright, running lint/format/typecheck, or deciding the verification scope for a change.
Testing and Verification
Baseline Commands
After code changes, run the required baseline (moon tasks run from anywhere in the repo, including CI-marked agent shells):
moon run root:format root:lintUseful check/fix pairs on the root project:
moon run root:format-check
moon run root:format
moon run root:lint
moon run root:lint-fix
moon run root:lint-css
moon run root:lint-css-fixFor code changes, also run the relevant typecheck (moon builds workspace dependencies first automatically):
moonx <project>:typecheck
# or, scoped to what actually changed:
moonx :typecheck --affectedThe React Compiler lint rules (react/* in .oxlintrc.json) assume React.
packages/trees/src/render/**/*.tsx and
packages/trees/src/components/**/*.tsx are Preact, so an overrides entry
there turns react/refs off for those globs. Put new Preact components under
those directories instead of adding per-file oxlint-disable headers.
Unit and Integration Tests
Use Bun's built-in test runner. Tests usually live in a test/ folder inside
each package and use describe, test, and expect from bun:test.
Prefer unit or integration tests by default:
moonx diffs:test
moonx trees:testmoon run :test runs every project's suite. Tests import workspace dependencies
through their built dist, so moon builds those first; running bun test
directly inside a package also works when dist is fresh.
Snapshots
Bun supports toMatchSnapshot(). Avoid new snapshot coverage unless it is
shallow and narrowly scoped to the exact behavior under test.
Update snapshots from the package directory:
bun test -uBrowser and E2E Tests
Add Playwright/browser E2E tests only when behavior cannot be validated without a real browser engine. Good candidates include computed style checks, shadow DOM boundaries, and browser-only rendering behavior.
Keep E2E coverage small and high-value:
moonx trees:coverage
moonx trees:test-e2e
moonx path-store:test-demo
moonx docs:test-e2eIf E2E fixtures or dev servers are started in a worktree, follow the cleanup
contract from the worktrees-and-dev-servers skill.
© pierrecomputer, Apache-2.0. 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 .agents/skills/testing-and-verification of pierrecomputer/pierre.
Open the folder on GitHubat commit d302ea0
Compare with similar skills
Pierre Testing and Verification Guide 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 |
|---|---|---|---|---|---|---|
| Pierre Testing and Verification Guide this skillpierrecomputer/pierre | 6.2k | — | ~608 | Automated safety check: Pass | Apache-2.0 | |
| Ha Frontend Testinghome-assistant/frontend | 5.7k | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| React Testingaffaan-m/ECC | 274k | 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 | |
| Front End Testingcitypaul/.dotfiles | 739 | — | ~6.2k | Automated safety check: Pass | Custom licence |
Similar skills
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…
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.
Front End Testing
citypaul/.dotfiles
Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.
Senior QA
borghei/Claude-Skills
Testing for React/Next.js with Jest, React Testing Library, and Playwright.
More from pierrecomputer/pierre
All 10 skills in this repo@pierre/diffs Code Rendering
pierrecomputer/pierre
Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.
Pierre Theming Library
pierrecomputer/pierre
Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.
Pierre Trees File Tree
pierrecomputer/pierre
Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag…
Pierre Highlights
pierrecomputer/pierre
Shows how to use @pierre/highlights for syntax-highlighted HTML or tokens, streaming and incremental tokenizing, and Zed-compatible themes with CSS variables.
Pierre Theme Package
pierrecomputer/pierre
Shows an agent how to install and use the @pierre/theme package, which ships ten Pierre light and dark color themes for Shiki and VS Code.
Monorepo Tooling and Dependencies
pierrecomputer/pierre
Sets one monorepo's rules for toolchain pins, pnpm package operations, the shared dependency catalog and moon tasks, so the agent adds versions and scripts the right way.
Related
Works with
Categories
Questions about Pierre Testing and Verification Guide
What does Pierre Testing and Verification Guide do?
Chooses the right verification step after a code change in Pierre's monorepo: format and lint, a typecheck, Bun unit tests, snapshots, or Playwright E2E. After any code change, a baseline format-and-lint command runs from anywhere in the repo through the project's task runner, with separate check-only and fix variants available for the root project. Code changes also get a typecheck scoped to the affected project, with the task runner automatically building workspace dependencies first, and an `--affected` flag available to scope the check to only what actually changed.
When should I use Pierre Testing and Verification Guide?
Pierre Testing and Verification Guide fits situations like: deciding which verification step to run after a code change; running unit tests scoped to just the packages that changed; adding a browser E2E test for behavior that needs a real rendering engine; updating a snapshot test from inside its package directory.
How do I install Pierre Testing and Verification Guide in Claude Code?
Run `npx skills add pierrecomputer/pierre --skill testing-and-verification -a claude-code`. Or copy the skill folder (.agents/skills/testing-and-verification in pierrecomputer/pierre) into .claude/skills/testing-and-verification in your project. Claude Code loads it when a task matches its description.
How do I install Pierre Testing and Verification Guide in Codex?
Run `npx skills add pierrecomputer/pierre --skill testing-and-verification -a codex`. Or copy the skill folder (.agents/skills/testing-and-verification in pierrecomputer/pierre) into .agents/skills/testing-and-verification in your project. Codex loads it when a task matches its description.
Can I use Pierre Testing and Verification Guide 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 pierrecomputer/pierre --skill testing-and-verification -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/testing-and-verification, .gemini/skills/testing-and-verification, .github/skills/testing-and-verification and .opencode/skills/testing-and-verification in your project.
What does Pierre Testing and Verification Guide need to run?
Going by SKILL.md and its folder, Pierre Testing and Verification Guide needs the command-line tools its instructions call (bun). Our summary lists: Bun; The project's moon task runner; Playwright, for browser E2E tests.
Does Pierre Testing and Verification Guide 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 Pierre Testing and Verification Guide 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 Pierre Testing and Verification Guide use?
Pierre Testing and Verification Guide is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Pierre Testing and Verification Guide use?
About 608 tokens (SKILL.md is roughly 2.4k 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 Pierre Testing and Verification Guide?
Skills that share tags, products or a category with Pierre Testing and Verification Guide: Ha Frontend Testing (home-assistant/frontend, 5.7k stars), React Testing (affaan-m/ECC, 274k stars), Senior QA (alirezarezvani/claude-skills, 28k 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 Pierre Testing and Verification Guide?
pierrecomputer (a GitHub organization) maintains it in pierrecomputer/pierre, which has 6,243 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 6, 2026.
Source: pierrecomputer/pierre on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.