How do I trigger this skill in Claude Code?

You can auto-invoke it by asking Claude to 'test this component', 'write component test', or 'add component test'.

Does it handle accessibility (A11y) testing?

Yes, the skill validates accessibility attributes to ensure your components are inclusive and compliant with standards.

Which frameworks does this skill support?

It is designed to support modern frontend frameworks, specifically React and Vue, using React Testing Library patterns.

Can it test user interactions like clicks and typing?

Yes, the skill generates code to simulate real-world user behaviors including clicking, typing, and other DOM events.

Frontend Test Generator

Name: Frontend Test Generator
Author: alekspetrov

byalekspetrov

•

安全与测试

Generates comprehensive React and Vue component tests utilizing React Testing Library to ensure high-quality, accessible frontend code.

The Frontend Test Generator skill automates the creation of unit, snapshot, and end-to-end tests for modern frontend components. Optimized for React and Vue, it leverages React Testing Library (RTL) to validate component rendering and simulate complex user interactions like clicking, typing, and hovering. By incorporating accessibility validation and automated snapshot generation, this skill helps developers maintain robust UI codebases, catch regressions early, and adhere to industry best practices without manual boilerplate setup.

主要功能

0147 GitHub stars

02Comprehensive user interaction simulation (click, type, etc.)

03Automated snapshot test generation for UI regression

04Automated React Testing Library (RTL) utility imports

05Built-in accessibility (A11y) attribute validation

06Support for React and Vue component testing patterns

使用场景

01Adding regression snapshots to an existing component library

02Validating accessibility compliance for frontend elements

03Writing unit tests for newly created UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alekspetrov/navigator frontend-test

For use in Claude.ai and ChatGPT

Download Skill