frontend-test-author

Name: frontend-test-author
Availability: InStock
Author: yoshihiko

Fix and place Vitest and Testing Library tests for Next.js/React frontend projects.

Updated Jan 13, 2026

Search Tags:#vitest #testing #frontend #react #nextjs #testing-library #test-setup

Ready to run

npx skills add https://github.com/yoshihiko555/dotfiles --skill frontend-test-author

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-test-author
Source: https://github.com/yoshihiko555/dotfiles/tree/main/shared/skills/codex-only/frontend-test-author
Command: npx skills add https://github.com/yoshihiko555/dotfiles --skill frontend-test-author

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to create and maintain reliable tests for UI components, screens, and features in Next.js/React apps.

Core Features & Use Cases

Add unit and integration tests for UI components located under frontend/src/tests/components/** and tests/features/, validate core use cases under frontend/src/tests/core/usecases/, and ensure E2E tests under frontend/src/e2e/** when needed.
Ensure test setup with Vitest, Testing Library, and proper alias resolution in frontend/package.json and vitest.config.ts, to enable fast, deterministic feedback during development.
Use this skill to fix failing tests, improve test coverage, and guide test placement decisions across frontend projects.

Quick Start

Run tests with Vitest in your frontend project to validate components and features.

Frequently Asked Questions about frontend-test-author

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

FAQPage Schema

How do I write and stabilize frontend tests for Next.js and React components?▼

To write and stabilize frontend tests for Next.js and React, apply this Skill to identify and fix failing tests across UI components, screens, and use cases using Vitest and Testing Library to ensure they pass in CI.

What is the best way to fix failing Vitest tests in a Next.js project?▼

The best way to fix failing Vitest tests in a Next.js project is to validate test setup configurations in vitest.config.ts and package.json, ensuring proper alias resolution and deterministic feedback for components and core use cases.

Do I need a specific test directory structure to use Vitest with Testing Library?▼

Yes, this Skill requires a properly configured frontend codebase with designated test directories for components, features, and core use cases, alongside a package.json and vitest.config.ts to operate effectively.

Can I use this approach to add unit and integration tests for React screens?▼

Yes, you can use this approach to add unit and integration tests for React screens by placing them under designated test directories and validating core use cases to improve overall test coverage and reliability.

Why are my frontend tests failing in CI despite passing locally with Vitest?▼

Frontend tests may fail in CI due to improper test setup or alias resolution issues. This Skill helps ensure tests are properly placed and configurations in vitest.config.ts are correct for deterministic CI execution.

Does this Skill support adding E2E tests alongside unit tests for Next.js applications?▼

Yes, this Skill supports adding and validating E2E tests under the designated e2e directory when needed, alongside unit and integration tests for Next.js UI components and core use cases.