performing-visual-regression-testing
について
このスキルは、ClaudeがPercyやBackstopJSなどのツールを使用してスクリーンショットを撮影し、ベースラインと比較することで、ビジュアルリグレッションテストを自動化できるようにします。意図しないUIの変更を特定し、コード更新後の視覚的一貫性を検証するのに最適です。開発者は、UIリグレッションチェック、ビジュアルテストのリクエスト、または「/visual-test」のようなフレーズを使用する際に、これをトリガーすべきです。
クイックインストール
Claude Code
推奨/plugin add https://github.com/jeremylongshore/claude-code-plugins-plusgit clone https://github.com/jeremylongshore/claude-code-plugins-plus.git ~/.claude/skills/performing-visual-regression-testingこのコマンドをClaude Codeにコピー＆ペーストしてスキルをインストールします
ドキュメント
Overview
This skill empowers Claude to automatically detect unintended UI changes by performing visual regression tests. It integrates with popular visual testing tools to streamline the process of capturing screenshots, comparing them against baselines, and identifying visual differences.
How It Works
- Capture Screenshots: Captures screenshots of specified components or pages using the configured visual testing tool.
- Compare Against Baselines: Compares the captured screenshots against established baseline images.
- Analyze Visual Diffs: Identifies and analyzes visual differences between the current screenshots and the baselines.
When to Use This Skill
This skill activates when you need to:
- Detect unintended UI changes introduced by recent code modifications.
- Verify the visual consistency of a web application across different browsers or environments.
- Automate visual regression testing as part of a CI/CD pipeline.
Examples
Example 1: Verifying UI Changes After a Feature Update
User request: "Run a visual test on the homepage to check for any UI regressions after the latest feature update."
The skill will:
- Capture a screenshot of the homepage.
- Compare the screenshot against the baseline image of the homepage.
- Report any visual differences detected, highlighting potential UI regressions.
Example 2: Checking Visual Consistency Across Browsers
User request: "Perform a visual regression test on the product details page to ensure it renders correctly in Chrome and Firefox."
The skill will:
- Capture screenshots of the product details page in both Chrome and Firefox.
- Compare the screenshots against the respective baseline images for each browser.
- Identify and report any visual inconsistencies detected between the browsers.
Best Practices
- Configuration: Ensure the visual testing tool is properly configured with the correct API keys and project settings.
- Baselines: Maintain accurate and up-to-date baseline images to avoid false positives.
- Viewport Sizes: Define appropriate viewport sizes to cover different screen resolutions and devices.
Integration
This skill can be integrated with other Claude Code plugins to automate end-to-end testing workflows. For example, it can be combined with a testing plugin to run visual tests after functional tests have passed.
GitHub リポジトリ
関連スキル
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.
creating-opencode-plugins
メタThis skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.
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.
sglang
メタSGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.