Can I manually override the component classification?

Absolutely. You can use the --simple or --complex flags in your command to force a specific testing template regardless of the auto-detection.

How does the skill determine component complexity?

It uses a scoring system that analyzes indicators such as lines of code, sub-component patterns, the use of context providers, and complex state hooks like useControllableState.

Does this skill handle Vitest globals automatically?

Yes, it inspects your tsconfig files for 'vitest/globals' to determine whether to include explicit Vitest imports in the generated test files.

Which testing library does it use?

It follows Vitest Browser Mode best practices, utilizing 'vitest/browser' for page and user events, and 'vitest-browser-react' for component rendering.

Vitest Browser Test Architect

Name: Vitest Browser Test Architect
Author: StyleList94

byStyleList94

0•

安全与测试

Generates comprehensive Vitest Browser Mode tests by intelligently classifying React components based on their complexity and structural patterns.

The Vitest Browser Test Architect skill automates the creation of high-quality browser-based tests for React components. It eliminates the boilerplate of setting up Vitest Browser Mode by automatically detecting project configurations, tsconfig globals, and necessary dependencies. By applying a sophisticated scoring heuristic, the skill distinguishes between 'Simple' components (like buttons and badges) and 'Complex' components (like modals and date pickers), applying the most effective testing patterns and templates for each. This ensures consistent coverage for props, state interactions, and accessibility within a real browser environment.

主要功能

01Automatic Vitest globals and configuration detection

02Accessibility and edge-case validation coverage

03Support for Testing Library queries and user event simulations

040 GitHub stars

05Template-based test generation for consistent coding standards

06Intelligent component classification using scoring heuristics

使用场景

01Standardizing testing patterns across large-scale React projects

02Rapidly generating browser-mode tests for UI component libraries

03Ensuring robust test coverage for complex stateful components like Selects and Modals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stylelist94/claude-plugins vitest-browser

For use in Claude.ai and ChatGPT

Download Skill