MCP HubMCP Hub
スキル一覧に戻る

frontend-test

alekspetrov
更新日 2 days ago
40 閲覧
47
3
47
GitHubで表示
メタtesting

について

このスキルは、開発者がコンポーネントテストを要求した際に、React/Vueコンポーネントのテスト(単体、スナップショット、E2E)を自動生成します。React Testing Libraryを使用してテストファイルを作成し、レンダリング、ユーザーインタラクション、アクセシビリティを検証します。「このコンポーネントをテストして」や「コンポーネントテストを書いて」などのフレーズで起動し、RTLのベストプラクティスに従います。

クイックインストール

Claude Code

推奨
プラグインコマンド推奨
/plugin add https://github.com/alekspetrov/navigator
Git クローン代替
git clone https://github.com/alekspetrov/navigator.git ~/.claude/skills/frontend-test

このコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします

ドキュメント

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 リポジトリ

alekspetrov/navigator
パス: skills/frontend-test

関連スキル

content-collections

メタ

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.

スキルを見る

evaluating-llms-harness

テスト

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.

スキルを見る

cloudflare-turnstile

メタ

This skill provides comprehensive guidance for implementing Cloudflare Turnstile as a CAPTCHA-alternative bot protection system. It covers integration for forms, login pages, API endpoints, and frameworks like React/Next.js/Hono, while handling invisible challenges that maintain user experience. Use it when migrating from reCAPTCHA, debugging error codes, or implementing token validation and E2E tests.

スキルを見る

webapp-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.

スキルを見る