skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

frontend-testing

Directs Vitest and React Testing Library test work to package-owned testing policies.

1|Updated Aug 11, 2026
Search Tags:#unit tests#vitest#test strategy#monorepo#React Testing Library#frontend testing
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill frontend-testing-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/frontend-testing
Command: npx skills add https://github.com/Chia1104/agent-air --skill frontend-testing-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend test changes often drift from the conventions of the package that owns them, producing inconsistent environments, commands, and coverage decisions. This Skill routes test work to the correct package testing policy so changes follow the owner's established boundaries. ## Core Features & Use Cases - Policy Routing: Points test work under web/ to web/docs/test.md and work under packages/dify-ui/ to packages/dify-ui/docs/testing.md. - Scope Guardrails: Applies only to Vitest and React Testing Library tests, excluding code-review-only requests, Python tests, and Cucumber/Playwright E2E. - Use Case: When asked to add tests for a new React component in packages/dify-ui/, the Skill ensures you follow that package's documented test boundaries, Storybook guidance, and validation commands rather than inventing a parallel strategy. ## Quick Start Use the frontend-testing skill to write Vitest tests for the new component in packages/dify-ui following the package testing policy.

Frequently Asked Questions about frontend-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write Vitest tests for React components in a monorepo?▼

Follow the testing policy of the package that owns the code. For web/ changes, read web/docs/test.md; for packages/dify-ui/, read packages/dify-ui/docs/testing.md, which define test boundaries, environments, and commands.

What testing library should I use for React component tests?▼

This Skill covers Vitest with React Testing Library. The owning package's testing documentation defines the specific environments and commands to use for each package.

Does this apply to Playwright or Cucumber E2E tests?▼

No. The Skill explicitly excludes Cucumber and Playwright E2E tests, as well as Python tests. It only covers Vitest and React Testing Library tests under web/ or packages/dify-ui/.

When should I not use this frontend testing guidance?▼

Do not use it for frontend code-review-only requests or general testability discussions. It activates when writing or changing tests, or when explicitly asked to evaluate a frontend test strategy.

Should I add new tests or delete existing ones?▼

Both are valid outcomes. The Skill recommends deleting low-value tests as readily as adding missing behavior coverage, and reporting the contract verified plus any material verification gap.

Related Skills

Explore More Software Engineering Skills→
langgeniuslanggenius
154.0k

frontend-testing

Guide Vitest and React Testing Library test strategy for Dify web and UI packages.

Official
Intermediate
mParticlemParticle
24

verify

Run lint and test suites to validate code changes.

Official
Intermediate
jcg-adminjcg-admin

frontend-react

Guides phased specification, implementation, and review of React components, hooks, and state.

Community
Intermediate
kevinreberkevinreber
3

testing

Set up Vitest unit tests and Playwright E2E tests in Pixel Studio projects.

Community
Advanced