Agent skill

UI Test Utils

by open-edge-platform in open-edge-platform/anomalib

A skill your agent uses when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme…

Apache-2.0Auto-check passedTesting & QA

Install UI Test Utils

skills CLI

$ npx skills add open-edge-platform/anomalib --skill ui-test-utils -a claude-code

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

GitHub CLI

$ gh skill install open-edge-platform/anomalib ui-test-utils --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/open-edge-platform/anomalib.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ui-test-utils .claude/skills/ui-test-utils && 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/

Paste into Claude Code

Install the "ui-test-utils" agent skill from https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils into .claude/skills/ui-test-utils/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-test-utils", 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

$skill-installer install https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils

Type 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.

skills CLI

$ npx skills add open-edge-platform/anomalib --skill ui-test-utils -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install open-edge-platform/anomalib ui-test-utils --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/open-edge-platform/anomalib.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/ui-test-utils .agents/skills/ui-test-utils && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ui-test-utils" agent skill from https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils into .agents/skills/ui-test-utils/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-test-utils", 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.

skills CLI

$ npx skills add open-edge-platform/anomalib --skill ui-test-utils -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install open-edge-platform/anomalib ui-test-utils --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/open-edge-platform/anomalib.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/ui-test-utils .cursor/skills/ui-test-utils && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ui-test-utils" agent skill from https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils into .cursor/skills/ui-test-utils/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-test-utils", 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

$ gemini skills install https://github.com/open-edge-platform/anomalib.git --path .agents/skills/ui-test-utils

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add open-edge-platform/anomalib --skill ui-test-utils -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install open-edge-platform/anomalib ui-test-utils --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/open-edge-platform/anomalib.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/ui-test-utils .gemini/skills/ui-test-utils && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "ui-test-utils" agent skill from https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils into .gemini/skills/ui-test-utils/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-test-utils", 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.

GitHub CLI

$ gh skill install open-edge-platform/anomalib ui-test-utils

Installs 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).

skills CLI

$ npx skills add open-edge-platform/anomalib --skill ui-test-utils -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/open-edge-platform/anomalib.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/ui-test-utils .github/skills/ui-test-utils && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "ui-test-utils" agent skill from https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils into .github/skills/ui-test-utils/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-test-utils", 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.

skills CLI

$ npx skills add open-edge-platform/anomalib --skill ui-test-utils -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install open-edge-platform/anomalib ui-test-utils --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/open-edge-platform/anomalib.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/ui-test-utils .opencode/skills/ui-test-utils && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ui-test-utils" agent skill from https://github.com/open-edge-platform/anomalib/tree/main/.agents/skills/ui-test-utils into .opencode/skills/ui-test-utils/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-test-utils", 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: ui-test-utils
GitHub stars: 6.2k
Token cost: ~1.3k tokens
SKILL.md length: 420 words
Files: 1
Skills in repo: 17
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

A skill your agent uses when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme…

Updating Anomalib Studio UI component
SKILL.md covers Purpose, When To Use Each Helper, Advantages and Component Tests, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Hook tests that need the shared render/renderHook helpers

What it does

UI Test Utils is an agent skill from open-edge-platform/anomalib. Use when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme, URL-query, stream, suspense, or toast providers.

Its SKILL.md is about 1.3k 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. It works with TanStack, React Router and Testing Library. The repository describes itself as: An anomaly detection library comprising state-of-the-art algorithms and features such as experiment management, hyper-parameter optimization, and edge inference. The licence is Apache-2.0.

When your agent uses it

Updating Anomalib Studio UI component
Hook tests that need the shared render/renderHook helpers
React Router paths
Toast providers

Example prompts

“/ui-test-utils”

What it can do on your machine

Read from SKILL.md and the folder at commit 4807ef1. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
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

UI Test Utils loads about 1.3k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 420 words of instructions outside code blocks.

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

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 open-edge-platform/anomalib at commit 4807ef1, republished under its Apache-2.0 licence (© open-edge-platform). 420 words, ~1,252 tokens.

Download SKILL.mdSave it as .claude/skills/ui-test-utils/SKILL.md (or your agent's skills folder).

name: ui-test-utils
description: Use when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme, URL-query, stream, suspense, or toast providers.

Anomalib Studio UI Test Utilities

Use this skill when working on tests in application/ui/ that render React components or hooks. The shared utilities are defined in application/ui/tests/utils.ts.

Purpose

Import render and renderHook from the shared test utilities rather than directly from @testing-library/react when the unit under test depends on application context. The utilities build a memory router and mount these providers:

QueryClientProvider with an isolated QueryClient by default.
ThemeProvider for @geti-ui/ui components.
NuqsAdapter for URL query-state hooks.
StreamConnectionProvider for stream-dependent UI.
Suspense with IntelBrandedLoading fallback for lazy components.
Toast for toast assertions and feedback behavior.

The default route is /projects/project-123/inspect, matched by the default path /projects/:projectId/inspect.

When To Use Each Helper

Use render for a component, dialog, or view that renders DOM output. Use renderHook for a React hook that reads provider state, route parameters, search parameters, or React Query state.

Keep direct Testing Library rendering only for genuinely provider-free units. Do not duplicate the provider stack in individual tests.

Advantages

Tests exercise the component in the same context expected by the Studio application.
The memory router makes route and route-parameter behavior deterministic without browser navigation.
A fresh query client prevents React Query cache state leaking between tests by default.
Shared provider setup keeps tests short and ensures new tests follow the established application test environment.
Toast, stream, theme, URL-query, and suspense dependencies are available without per-test boilerplate.

Show full SKILL.md (192 more words)Show less

Component Tests

Import the helper using the relative path from the test file to application/ui/tests/utils.ts:

tsx

import { screen } from "@testing-library/react";

import { render } from "../../../../../tests/utils";
import { ProjectPanel } from "./project-panel.component";

it("shows the selected project", () => {
  render(<ProjectPanel />, { route: "/projects/project-456/inspect" });

  expect(screen.getByText("Project details")).toBeVisible();
});

Pass route when the component needs a specific location or projectId. The supplied route must match the selected path.

tsx

render(<ProjectSettings />, {
  path: "/projects/:projectId/settings",
  route: "/projects/project-456/settings",
});

Use Testing Library's accessible queries and async helpers after rendering. For server-backed behavior, configure the existing MSW server handler before calling render.

tsx

server.use(
  http.get("/api/projects/{project_id}", () => HttpResponse.json(project)),
);

render(<ProjectPanel />, { route: "/projects/project-456/inspect" });

expect(
  await screen.findByRole("heading", { name: project.name }),
).toBeVisible();

Hook Tests

Use the wrapper-enabled helper rather than creating a custom provider wrapper in the test.

tsx

import { waitFor } from "@testing-library/react";

import { renderHook } from "../../../../../tests/utils";
import { useActivePipelineStatus } from "./use-active-pipeline-status.hook";

it("reports an active project", async () => {
  server.use(
    http.get("/api/active-pipeline", () =>
      HttpResponse.json({ project_id: "project-456" }),
    ),
  );

  const { result } = renderHook(() => useActivePipelineStatus("project-123"));

  await waitFor(() => {
    expect(result.current.hasActiveProject).toBe(true);
  });
});

The helper accepts the same route, path, and queryClient options as render, together with normal Testing Library hook options such as initialProps.

tsx

const queryClient = new QueryClient();
const { result, rerender } = renderHook(
  ({ projectId }) => useActivePipelineStatus(projectId),
  {
    initialProps: { projectId: "project-123" },
    queryClient,
    route: "/projects/project-123/inspect",
  },
);

rerender({ projectId: "project-456" });

Provide queryClient only when the test must seed, inspect, or deliberately share cache state. Otherwise, use the default isolated client.

Test Hygiene

Configure MSW responses with server.use(...) for API behavior; do not perform real network requests.
Wait for asynchronous query or mutation results with findBy... or waitFor.
Keep routes explicit when behavior depends on project identifiers or URL state.
Clear any externally imported, shared query client in beforeEach when the code under test uses one instead of the client supplied by this helper.
Do not add application providers around render or renderHook; the utility already owns that setup.

Files

Just SKILL.md in .agents/skills/ui-test-utils of open-edge-platform/anomalib.

Open the folder on GitHubat commit 4807ef1

Compare with similar skills

UI Test Utils 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.

UI Test Utils compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
UI Test Utils this skillopen-edge-platform/anomalib	6.2k	—	~1.3k	Automated safety check: Pass	Apache-2.0	today
React Devdavila7/claude-code-templates	32k	2 repos	~2.6k	Automated safety check: Pass	MIT	today
Clerkgeekskai/blog	103	3 repos	~1.5k	Automated safety check: Pass	MIT	yesterday
Reactericrisco/rsc-harness	156	—	~3.2k	Automated safety check: Pass	MIT	today
Jest Testing PatternsChrisWiles/claude-code-showcase	6.1k	7 repos	~1.5k	Automated safety check: Pass	None	9 mo ago
Frontend TestingOhh-889/skyroc	795	1 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

React Dev
davila7/claude-code-templates
This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned.
32k GitHub starsUsed in 2 repos~2.6k tokens
Frontend & DesignAuto-check passed
Clerk
geekskai/blog
Clerk authentication router. An agent skill from geekskai/blog.
103 GitHub starsUsed in 3 repos~1.5k tokens
Backend & APIsAuto-check passed
React
ericrisco/rsc-harness
A skill your agent uses when building or reviewing a client-side React SPA bundled by Vite (React 19.2): components, where state lives, hooks, server data fetching, client routing, re-render and…
156 GitHub stars~3.2k tokensUpdated today
MobileAuto-check passed
Jest Testing Patterns
ChrisWiles/claude-code-showcase
Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.
6.1k GitHub starsUsed in 7 repos~1.5k tokens
Testing & QAAuto-check passed
Frontend Testing
Ohh-889/skyroc
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities.
795 GitHub starsUsed in 1 repo~2.5k tokens
Testing & QAAuto-check passed
Write Tests
grafana/synthetic-monitoring-app
Official
Write Jest integration and unit tests for the Grafana Synthetic Monitoring app using React Testing Library, MSW, and src/test helpers.
171 GitHub stars~1.2k tokensUpdated today
Testing & QAAuto-check passed

More from open-edge-platform/anomalib

All 17 skills in this repo

Anomalib Adding A Datamodule
open-edge-platform/anomalib
Adds a new dataset/datamodule to anomalib under src/anomalib/data/.
6.2k GitHub stars~3.7k tokensUpdated today
Auto-check passed
Anomalib Adding A Model
open-edge-platform/anomalib
Adds a new anomaly-detection model to anomalib under src/anomalib/models/.
6.2k GitHub stars~1.9k tokensUpdated today
Auto-check passed
Anomalib Benchmarking
open-edge-platform/anomalib
Runs the anomalib benchmarking pipeline to train/evaluate a grid of model + dataset (+ category) combinations and collect metrics into a results CSV.
6.2k GitHub stars~1k tokensUpdated today
Auto-check passed
Anomalib Tiled Ensemble
open-edge-platform/anomalib
Runs and configures the anomalib tiled-ensemble pipeline, which trains/evaluates one model per image tile and merges results (with optional seam smoothing) for high-resolution anomaly detection.
6.2k GitHub stars~1.4k tokensUpdated today
Auto-check passed
Anomalib Training
open-edge-platform/anomalib
Trains an anomalib model on a dataset via the Python API or CLI, including training on a custom folder-structured dataset with the Folder datamodule.
6.2k GitHub stars~1.4k tokensUpdated today
Auto-check passed
Model Sample Image Export
open-edge-platform/anomalib
Export, validate, and publish model sample-result images into docs/source/images and reference them from README/docs pages.
6.2k GitHub stars~874 tokensUpdated today
Auto-check passed

Works with

Questions about UI Test Utils

What does UI Test Utils do?

A skill your agent uses when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme…. UI Test Utils is an agent skill from open-edge-platform/anomalib. Use when writing or updating Anomalib Studio UI component or hook tests that need the shared render/renderHook helpers, React Router paths or parameters, React Query, theme, URL-query, stream, suspense, or toast providers.

When should I use UI Test Utils?

UI Test Utils fits situations like: updating Anomalib Studio UI component; hook tests that need the shared render/renderHook helpers; React Router paths; toast providers.

How do I install UI Test Utils in Claude Code?

Run `npx skills add open-edge-platform/anomalib --skill ui-test-utils -a claude-code`. Or copy the skill folder (.agents/skills/ui-test-utils in open-edge-platform/anomalib) into .claude/skills/ui-test-utils in your project. Claude Code loads it when a task matches its description.

How do I install UI Test Utils in Codex?

Run `npx skills add open-edge-platform/anomalib --skill ui-test-utils -a codex`. Or copy the skill folder (.agents/skills/ui-test-utils in open-edge-platform/anomalib) into .agents/skills/ui-test-utils in your project. Codex loads it when a task matches its description.

Can I use UI Test Utils 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 open-edge-platform/anomalib --skill ui-test-utils -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-test-utils, .gemini/skills/ui-test-utils, .github/skills/ui-test-utils and .opencode/skills/ui-test-utils in your project.

What does UI Test Utils need to run?

SKILL.md names no scripts, command-line tools or credentials: UI Test Utils is instructions for the agent only.

Does UI Test Utils 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 UI Test Utils 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 UI Test Utils use?

UI Test Utils 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 UI Test Utils use?

About 1.3k tokens (SKILL.md is roughly 5k 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 UI Test Utils?

Skills that share tags, products or a category with UI Test Utils: React Dev (davila7/claude-code-templates, 32k stars), Clerk (geekskai/blog, 103 stars), React (ericrisco/rsc-harness, 156 stars) and Jest Testing Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Test Utils?

open-edge-platform (a GitHub organization) maintains it in open-edge-platform/anomalib, which has 6,227 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: open-edge-platform/anomalib on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install UI Test Utils

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Anomalib Studio UI Test Utilities

Purpose

When To Use Each Helper

Advantages

Component Tests

Hook Tests

Test Hygiene

Files

Compare with similar skills

Similar skills

More from open-edge-platform/anomalib

Related

Questions about UI Test Utils