Unit Test Automation

One-click initialization of an AI-driven unit testing environment for frontend projects (supports React/Vue/pure TypeScript/Next.js). Automatically detects p...

Security Scan

The skill's code and instructions largely match its stated purpose (auto-setup of frontend unit tests) but there are notable inconsistencies and data-exposure risks (git-hook modification + optional auto-generation that can send source files to an external AI) that the user should review before installing.

Purpose & Capability

The skill's files and SKILL.md align with a unit-test automation tool: detection script, test-check script, prompts, and config generation. However, the declared metadata lists no required binaries or environment variables while the runtime instructions and shipped scripts assume node, git, and a package manager (npm/yarn/pnpm). The absence of declared required binaries is a discrepancy worth noting but not necessarily malicious.

Instruction Scope

SKILL.md instructs the agent to read package.json, write config files, run package-manager installs, and modify Husky pre-commit hooks. The injected .claude/commands include workflows that recursively scan source files, read source code, generate tests, run vitest, and attempt automatic repair — which implies the project source code may be transmitted to an external AI when those commands are invoked. Auto-generation is disabled by default, but enabling AUTO_GEN_TEST or invoking the generated commands will expose project code to the AI service; this is scope creep relative to purely local setup and is a potential data-exfiltration vector.

Install Mechanism

There is no install spec (instruction-only) and the skill ships only small local scripts and prompt templates. No remote downloads, obfuscated code, or unusual install steps are present. This limits supply-chain risk; all executed code is included in the skill bundle and runs locally.

Credentials

The skill declares no required credentials or config paths (appropriate). It does reference an environment toggle AUTO_GEN_TEST (not declared in metadata) which controls whether the pre-commit hook will invoke automatic test generation (and thereby may send code to the external AI). No secrets are requested, but enabling auto-generation can expose project contents to the agent/AI service — the user should verify that is acceptable.

Persistence & Privilege

The skill does modify project state: it writes config files under the project (vitest config, tests setup), writes .claude/commands templates, copies scripts, and updates .husky/pre-commit. Those are project-scoped changes and expected for this purpose but can be sensitive (git hooks executing code on commits). The skill is not always-enabled and does not request global/system privileges.

What to consider before installing

This skill appears to do what it says (set up Vitest, Testing Library, MSW, config files, and pre-commit checks) and ships readable scripts. Before installing: 1) Confirm you have Node, Git, and your package manager available — the metadata doesn't declare these but the scripts need them. 2) Inspect the exact files it will write (.husky/pre-commit, vitest.config.ts, .claude/commands/*) and back up your existing pre-commit hook; the installer will modify your git hooks. 3) Be cautious with AUTO_GEN_TEST: enabling it or invoking the injected /gen-unit-test or /fix-test commands can cause source files to be sent to the external AI for test generation/repair — only enable that if you are comfortable sending code to the AI service and have reviewed the prompt templates in .claude/commands. 4) Run the tool in a disposable branch or test repo first so you can review generated tests and any automatic changes. If you need higher assurance, ask the author for a manifest of exact file changes or for the skill to declare required binaries and the AUTO_GEN_TEST env var in metadata.

Security & Permissions Statement

This skill performs the following privileged operations to automate test environment configuration:

• File System: Reads package.json and writes config files (vitest.config.ts, .claude/commands/*.md).
• Shell Execution: Runs npm/yarn/pnpm commands to install dependencies, and runs git commands to detect staged files.
• Git Hooks: Initializes Husky and modifies .husky/pre-commit to automate the testing workflow.

All scripts run locally and will not transmit project data to external servers (unless explicitly sent to Claude via a command invocation).

---

Initialize Unit Testing Environment

One-click setup of a production-grade unit testing solution for any frontend project. Detect environment → Install enhanced plugins → Auto alias resolution → AI command injection.

Workflow

Step 1: Detect Project Environment

Run the detection script to identify project details:

node <skill-dir>/scripts/detect-framework.mjs <project-dir>

Returns JSON containing: os, framework, isNext, typescript, hasTsConfig, packageManager, hasGit, hasVitest, etc.

Step 2: Install Enhanced Dependencies

Install dev dependencies (-D) using the corresponding package manager. Skip already-installed dependencies.

Core Toolchain:

• vitest
• @vitest/ui (visual test interface)
• @vitest/coverage-v8 (code coverage)
• jsdom (browser environment simulation)
• msw (API network request mocking)
• vitest-tsconfig-paths (auto-resolve path aliases from tsconfig.json)

Additional for React/Next.js projects:

• @testing-library/react
• @testing-library/jest-dom
• @testing-library/user-event
• @vitejs/plugin-react

Additional for Vue projects:

• @testing-library/vue
• @testing-library/jest-dom
• @testing-library/user-event
• @vitejs/plugin-vue

Step 3: Generate Smart Config Files

vitest.config.ts

Uses the tsconfigPaths() plugin for "zero-config alias resolution".

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vitest-tsconfig-paths'

export default defineConfig({
  plugins: [
    tsconfigPaths(),
    // react(), // Enable for React/Next.js projects
    // vue(),   // Enable for Vue projects
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    include: ['tests/unit/**/*.test.{ts,tsx}'],
    setupFiles: ['./tests/unit/setup/index.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'json-summary'],
      include: ['src/**/*.{ts,tsx,vue}'],
      exclude: ['src/**/*.stories.*', 'src/**/*.d.ts'],
      thresholds: { statements: 70, branches: 70, functions: 70, lines: 70 },
    },
    // Additional config for Next.js server component mocking can be added here
  },
})

tests/unit/setup/index.ts

import '@testing-library/jest-dom/vitest'
import { afterAll, afterEach, beforeAll, vi } from 'vitest'
import { server } from './msw-server'

// Global Mock example (e.g., Next.js Router)
// vi.mock('next/navigation', () => ({ useRouter: () => ({ push: vi.fn() }) }))

beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

Step 4: Inject AI Commands (Cross-Project Reuse)

Write prompt templates to the project's .claude/commands/:

• gen-unit-test.md: Core test generation instructions.
• fix-test.md: Automated failure repair instructions.

Step 5: Automation Integration (Git Hooks)

5.1 Install Husky & lint-staged

5.2 Copy check-missing-tests.mjs

5.3 Write .husky/pre-commit (dual-layer guard)

• Layer 1: vitest related --run (only run tests affected by the current changes).
• Layer 2: When AUTO_GEN_TEST=1, detect missing tests and invoke Claude Code to auto-generate them.

Step 6: Verification & Summary Output

Initialization complete:
- Framework:       [detection result] (Next.js compatible)
- Alias resolution: Enabled (vitest-tsconfig-paths)
- Visual UI:       Enabled (npm run test:ui)
- Coverage threshold: 70% (manually adjustable in vitest.config.ts)
- AI automation:   Injected /gen-unit-test and /fix-test commands
- Auto-generation: Disabled by default, enable via export AUTO_GEN_TEST=1

Resource Files

• scripts/detect-framework.mjs — Environment detection script (with OS and Next.js detection)
• scripts/check-missing-tests.mjs — Cross-platform path-compatible test checking script
• references/gen-unit-test-prompt.md
• references/fix-test-prompt.md