Skip to content
Back to skills

Component Test Runner

ASecurity

指定されたコンポーネントの全テスト(unit, a11y, vrt, interaction)を実行し、結果をレポートする。

  • 666 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added February 8, 2026
testing

Security analysis

A100/100

Scanned February 12, 2026

npx -y skills add majiayu000/claude-skill-registry --skill component-test-runner --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Component Test Runner?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Component Test Runner
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/majiayu000-component-test-runner/badge)](https://www.skillsdirectory.com/skills/majiayu000-component-test-runner)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: component-test-runner
description: 指定されたコンポーネントの全テスト(unit, a11y, vrt, interaction)を実行し、結果をレポートする。
---

# Component Test Runner

指定されたコンポーネントに対して、すべてのテストを実行し、結果を統合してレポートするSkill。

## 概要

このSkillは以下の4種類のテストエージェントを順番に呼び出し、結果を統合します:

1. **unit-test-runner**: ロジックユニットテスト(Vitest)
2. **a11y-test-runner**: アクセシビリティテスト(markup + axe-core)
3. **vrt-test-runner**: Visual Regression Test
4. **interaction-test-runner**: Storybookインタラクションテスト

## 使い方

```
/component-test-runner Button
```

または

```
component-test-runner を使って Button コンポーネントをテストして
```

## 実行手順

### 1. 入力の確認

ユーザーから対象コンポーネント名を受け取る。

例: `Button`, `Alert`, `TextField`

### 2. テストエージェントの呼び出し

以下の順序で各テストエージェントを呼び出す:

#### 2.1 ロジックユニットテスト

`unit-test-runner` エージェントを呼び出し:

```
unit-test-runner: {Component}
```

#### 2.2 アクセシビリティテスト

`a11y-test-runner` エージェントを呼び出し:

```
a11y-test-runner: {Component}
```

#### 2.3 VRTテスト

`vrt-test-runner` エージェントを呼び出し:

```
vrt-test-runner: {Component}
```

#### 2.4 インタラクションテスト

`interaction-test-runner` エージェントを呼び出し:

```
interaction-test-runner: {Component}
```

### 3. 結果の統合

すべてのテスト結果を統合し、以下のフォーマットでレポート。

## 出力フォーマット

````markdown
## テスト結果サマリー: {Component}

### 検出されたファイル

| テスト種別  | ファイル               | 存在  |
| ----------- | ---------------------- | ----- |
| Unit Test   | `{path}.test.tsx`      | ✅/❌ |
| A11y Test   | `{path}.a11y.test.tsx` | ✅/❌ |
| VRT         | `{path}.vrt.test.tsx`  | ✅/❌ |
| Interaction | `{path}.stories.tsx`   | ✅/❌ |

### テスト結果サマリー

| テスト種別  | 結果     | 備考 |
| ----------- | -------- | ---- |
| Unit Test   | ✅/❌/⏭️ |      |
| Markup Lint | ✅/❌/⏭️ |      |
| A11y Test   | ✅/❌/⏭️ |      |
| VRT         | ✅/❌/⏭️ |      |
| Interaction | ✅/❌/⏭️ |      |

### 修正が必要な項目(失敗がある場合)

#### {テスト種別}

**エラー概要**: {概要}

**影響範囲**: {影響を受ける機能/コンポーネント}

**優先度**: High/Medium/Low

**修正箇所**:

- ファイル: `{path}`
- 行番号: {line}
- 問題: {説明}

**修正案**:

```tsx
// 修正コード例
```
````

### 次のアクション

- [ ] {修正が必要な項目}
- [ ] VRTスクリーンショット更新(意図した変更の場合)

### 懸念事項・考慮点

| アクション | 懸念事項                       | リスクレベル    | 対策                 |
| ---------- | ------------------------------ | --------------- | -------------------- |
| {修正内容} | {副作用やリグレッションリスク} | High/Medium/Low | {推奨される検証手順} |

```

## 関連エージェント

各テストで問題が検出された場合、以下のエージェントを使用:

- **vrt-reviewer**: VRT差分の詳細分析
- **vrt-updater**: VRTスクリーンショットの更新

## 注意事項

- VRT差分が検出された場合、自動でスクリーンショットを更新しない
- テストファイルが存在しない場合はそのテストをスキップ
- 複数のエラーがある場合は優先度順にレポート
```

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.