Back to Skills

frontend-test

alekspetrov
Updated Today
17 views
47
3
47
View on GitHub
Metatesting

About

This skill automatically generates React/Vue component tests (unit, snapshot, e2e) when developers request component testing. It creates test files using React Testing Library that validate rendering, user interactions, and accessibility. The skill triggers on phrases like "test this component" or "write component test" and follows RTL best practices.

Quick Install

Claude Code

Recommended
Plugin CommandRecommended
/plugin add https://github.com/alekspetrov/navigator
Git CloneAlternative
git clone https://github.com/alekspetrov/navigator.git ~/.claude/skills/frontend-test

Copy and paste this command in Claude Code to install this skill

Documentation

Frontend Test Generator

Generate React/Vue component tests with React Testing Library including user interactions.

When to Invoke

Auto-invoke when user mentions:

  • "Test this component"
  • "Write component test"
  • "Test component"
  • "Add component test"
  • "Component tests for [name]"

What This Does

  1. Generates test file with RTL utilities
  2. Tests component rendering
  3. Tests user interactions (click, type, etc.)
  4. Tests accessibility
  5. Generates snapshot tests

Success Criteria

  • Test file generated with RTL imports
  • Tests render component correctly
  • User interactions are tested
  • Accessibility attributes validated
  • Tests follow React Testing Library best practices

Auto-invoke when writing frontend component tests ⚛️

GitHub Repository

alekspetrov/navigator
Path: skills/frontend-test

Related Skills

content-collections

Meta

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.

View skill

evaluating-llms-harness

Testing

This Claude Skill runs the lm-evaluation-harness to benchmark LLMs across 60+ standardized academic tasks like MMLU and GSM8K. It's designed for developers to compare model quality, track training progress, or report academic results. The tool supports various backends including HuggingFace and vLLM models.

View skill

webapp-testing

Testing

This Claude Skill provides a Playwright-based toolkit for testing local web applications through Python scripts. It enables frontend verification, UI debugging, screenshot capture, and log viewing while managing server lifecycles. Use it for browser automation tasks but run scripts directly rather than reading their source code to avoid context pollution.

View skill

finishing-a-development-branch

Testing

This skill helps developers complete finished work by verifying tests pass and then presenting structured integration options. It guides the workflow for merging, creating PRs, or cleaning up branches after implementation is done. Use it when your code is ready and tested to systematically finalize the development process.

View skill