Agent skill

Frontend Typescript Testing

by shinpr in shinpr/ai-coding-project-boilerplate

リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。

MITAuto-check passedTesting & QA

Install Frontend Typescript Testing

skills CLI
$ npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install shinpr/ai-coding-project-boilerplate frontend-typescript-testing --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/shinpr/ai-coding-project-boilerplate.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills-ja/frontend-typescript-testing .claude/skills/frontend-typescript-testing && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-typescript-testing
GitHub stars
232
Token cost
~843 tokens
SKILL.md length
148 words
Files
2 (incl. references)
Skills in repo
42
Repo updated
First seen
Licence
MIT

At a glance

リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。

  • Works in 3 steps: 単体テスト(React Testing Library) → 統合テスト(React Testing Library + MSW) → 機能横断検証
  • Tasks that involve Unit testing
  • SKILL.md covers 前提条件の検出, 参照, テストフレームワーク and テストの基本方針, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Typescript Testing is an agent skill from shinpr/ai-coding-project-boilerplate. リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。

Its SKILL.md is about 840 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/e2e.md`).

It sits in Testing & QA, covering Unit testing, End-to-end testing and Browser testing. It works with TypeScript, Vitest, Playwright and React. The repository describes itself as: Agentic coding TypeScript boilerplate for Claude Code: sub-agent workflows with built-in quality checks and context engineering. The licence is MIT.

When your agent uses it

  • Tasks that involve Unit testing
  • Tasks that involve End-to-end testing
  • Tasks that involve Browser testing

Example prompts

  • “/frontend-typescript-testing”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. 単体テスト(React Testing Library)
  2. 統合テスト(React Testing Library + MSW)
  3. 機能横断検証

What it can do on your machine

Read from SKILL.md and the folder at commit 56913a2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Typescript Testing loads about 843 tokens when it runs, and up to ~3.1k if it reads all its reference files. Until then it costs about 42 tokens; SKILL.md has 148 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~843
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from shinpr/ai-coding-project-boilerplate at commit 56913a2, republished under its MIT licence (© shinpr). 148 words, ~843 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-typescript-testing/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
frontend-typescript-testing
description
リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。

TypeScript テストルール(フロントエンド)

前提条件の検出

フレームワークやコマンドを選択する前に、package.json、ロックファイル、テスト設定、既存テストのimportを確認する。Vitest、React Testing Library、MSW、Playwright固有のルールは、依存または設定が存在する場合にのみ適用する。異なるフレームワークが設定されている場合は、リポジトリの同等機能を使用する。実行可能なハーネスを特定できない場合は、作り出さずに、確認したpathと不足しているフレームワークまたはコマンドを報告する。

参照

テスト種別参照先用途
ユニット / 統合本ドキュメントRTL + Vitest + MSW での React コンポーネントテスト
E2Ereferences/e2e.mdPlaywright によるブラウザレベル E2E テスト

テストフレームワーク

  • Vitest: リポジトリ設定または既存テストで選択されている場合に使用
  • React Testing Library: コンポーネントテスト用
  • MSW (Mock Service Worker): APIモック用
  • テストのインポート: import { describe, it, expect, beforeEach, vi } from 'vitest'
  • コンポーネントテストのインポート: import { render, screen } from '@testing-library/react'
  • ユーザー操作: import userEvent from '@testing-library/user-event'
  • モックの作成: vi.mock() を使用

テストの基本方針

品質要件
  • リグレッション保護: クリティカルパスと再利用度の高いコンポーネントでは、明記された受け入れ結果、公開分岐、失敗状態を検証する
  • 独立性: 各テストは他のテストに依存せず実行可能
  • 再現性: 時刻、乱数、環境値、ネットワークレスポンス、ブラウザstateを制御し、同一の入力から同一の観測可能な結果を得る
  • 可読性: 各テストはユーザーから見える振る舞いを1つだけ名前で示し、setup・action・assertionを分け、その振る舞いで使用する値だけをfixtureに含める
テストの重点配分

複数の機能で再利用される共有コンポーネント、Custom hook、utilityは、リグレッションの影響範囲が広いため、公開分岐、error state、境界の契約を検証する。振る舞いが複数のrender済みユニットに依存するページ単位の構成は、統合/E2Eテストで検証する。

テストの種類と範囲
  1. 単体テスト(React Testing Library)

    • 個々のコンポーネントや関数の動作を検証
    • 外部依存はすべてモック化
    • 最も数が多く、細かい粒度で実施
    • ユーザーから観測可能な振る舞いに焦点を当てる
  2. 統合テスト(React Testing Library + MSW)

    • 複数のコンポーネントの連携を検証
    • MSW(Mock Service Worker)でAPIをモック
    • 実際のDB接続なし(DBはバックエンドが管理)
    • 主要な受け入れ基準を実装するフロー、または複数のrender済みコンポーネントが連携するフローを検証
  3. 機能横断検証

    • 新機能が共有の統合ポイントに及び、その失敗が主要なユーザージャーニーまたは契約を壊す、あるいは副次的な観測可能な振る舞いを劣化させる場合は、既存機能の継続性を証明義務とする。その失敗を露出できる最も安い境界で証明する
    • 検証パターン: 既存機能動作 → 新機能有効化 → 既存機能の継続性確認
    • 判定基準: 元の受け入れ基準で指定された表示内容とインタラクションの振る舞いを維持する。レンダリング時間のしきい値は、プロジェクト設定または要件で値と計測方法が定義されている場合にのみ適用する
    • CI/CDでの自動実行を前提とした設計

テストの実装規約

ディレクトリ構造と命名規則
  • コンポーネントのテストはそのコンポーネント自身のディレクトリに置き、実装とテストが一緒に移動する状態を保つ(Co-location原則)
  • テストファイル: {ComponentName}.test.tsx
  • 統合テストファイル: {FeatureName}.integration.test.tsx
  • テストスイート: 対象のコンポーネントや機能を説明する名前
  • テストケース: ユーザー視点から期待される動作を説明する名前
テストコードの品質ルール

コミットするテストはすべて有効に保つ。現行の振る舞いを保護するテストは修復する。テストを削除するのは、対象の振る舞いが不要になったことを元の要件または実装契約で確認できる場合に限る。

モックの型安全性の徹底

MSWハンドラーのresponse bodyは、それが代表するドメイン型に対して satisfies で制約する。契約から乖離したfixtureをコンパイル時に落とし、アプリが実際には受け取らない形に対してテストが通ってしまう状態を防ぐ。

コンポーネントや依存のモックには、テスト対象が実際に利用する範囲だけを型付けする(Pick<Props, 'usedProp'>、Pick<Router, 'push'>)。インターフェース全体は型付けせず、リテラルは satisfies で制約して余分なメンバーや誤った名前をコンパイル時に落とす。

テスト設計パターン

実装詳細ではなくユーザーから見える結果を検証する。クエリはユーザーが認識できるroleとaccessible name(getByRole/getByLabelText/getByText)で行い、getByTestId や container.querySelector に依存しない。操作は生のイベント発火ではなく、テストごとに userEvent.setup() した userEvent 経由で行い、ブラウザのイベント列を再現する。操作と非同期アサーションはすべて await する — awaitしない操作は更新前のrender結果に対してアサーションすることになるため、非同期UIは findBy* で待機する。

正常系だけでなく空・エラー・ローディング/非同期の状態も網羅する。error stateは共有ハンドラ集合を変更せず、そのテスト1件だけMSWハンドラを上書きして作る。

必要なUI state、accessible name、外部契約が不明な場合は、そのアサーションのテスト設計を止め、必要なUI Spec、受け入れ基準、実装契約、ユーザー判断を具体的に示す。期待する振る舞いを確認済みの独立したアサーションは継続する。

© shinpr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in .claude/skills-ja/frontend-typescript-testing of shinpr/ai-coding-project-boilerplate.

  • SKILL.md
  • references/e2e.md

Open the folder on GitHubat commit 56913a2

Compare with similar skills

Frontend Typescript Testing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Typescript Testing compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Typescript Testing this skillshinpr/ai-coding-project-boilerplate232—~843Automated safety check: PassMIT
React Testingaffaan-m/ECC274k1 repos~3.3kAutomated safety check: PassMIT
Test CommanderEliasOulkadi/shokunin114—~3kAutomated safety check: NotesMIT
Front End Testingcitypaul/.dotfiles739—~6.2kAutomated safety check: PassCustom licence
Svelte Testingspences10/sveltest113—~579Automated safety check: PassMIT
Playwright Testingchongdashu/vibejam-starter-pack149—~2.1kAutomated safety check: PassNone

Similar skills

  • React Testing

    affaan-m/ECC

    React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress…

    274k GitHub starsUsed in 1 repo~3.3k tokens
    Testing & QAAuto-check passed
  • Test Commander

    EliasOulkadi/shokunin

    Generate unit, integration, E2E, and visual regression tests following the Testing Trophy methodology (80% integration).

    114 GitHub stars~3k tokensUpdated 2 days ago
    Testing & QAAuto-check: notes
  • Front End Testing

    citypaul/.dotfiles

    Behavior-driven UI testing patterns across Vitest Browser Mode, Playwright E2E evidence boundaries, and DOM Testing Library.

    739 GitHub stars~6.2k tokensUpdated 4 days ago
    Testing & QAAuto-check passed
  • Svelte Testing

    spences10/sveltest

    Fix and create Svelte 5 tests with vitest-browser-svelte and Playwright.

    113 GitHub stars~579 tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Playwright Testing

    chongdashu/vibejam-starter-pack

    Plan, implement, and debug frontend tests: unit/integration/E2E/visual/a11y.

    149 GitHub stars~2.1k tokensUpdated 5 mo ago
    Testing & QAAuto-check passed
  • Ha Frontend Testing

    home-assistant/frontend

    Home Assistant frontend testing and validation workflow. An agent skill from home-assistant/frontend.

    5.7k GitHub stars~1.7k tokensUpdated today
    Testing & QAAuto-check passed

More from shinpr/ai-coding-project-boilerplate

All 42 skills in this repo
  • Integration E2E Testing

    shinpr/ai-coding-project-boilerplate

    Selects and designs the smallest integration/E2E test set that proves accepted behavior at an observable boundary.

    232 GitHub stars~2.8k tokensUpdated 3 days ago
    Auto-check passed
  • Skill Optimization

    shinpr/ai-coding-project-boilerplate

    Evaluates and optimizes skill file quality using 9 content patterns and 10 editing principles.

    232 GitHub stars~3.5k tokensUpdated 3 days ago
    Auto-check passed
  • Frontend Technical Spec

    shinpr/ai-coding-project-boilerplate

    Defines React environment, component architecture, state/data flow, build verification, and frontend non-functional criteria from repository evidence.

    232 GitHub stars~1.9k tokensUpdated 3 days ago
    Auto-check: notes
  • Frontend Typescript Rules

    shinpr/ai-coding-project-boilerplate

    Applies React/TypeScript type safety, component design, and state management rules.

    232 GitHub stars~1.7k tokensUpdated 3 days ago
    Auto-check passed
  • Implementation Approach

    shinpr/ai-coding-project-boilerplate

    Selects implementation strategy (vertical slice, horizontal, or hybrid) with risk assessment.

    232 GitHub stars~3.2k tokensUpdated 3 days ago
    Auto-check passed
  • Subagents Orchestration Guide

    shinpr/ai-coding-project-boilerplate

    Coordinates subagents through scale-based planning, approval, implementation, verification, and escalation flows.

    232 GitHub stars~8k tokensUpdated 3 days ago
    Auto-check passed

Categories

Questions about Frontend Typescript Testing

What does Frontend Typescript Testing do?

リポジトリで設定済みのReactテスト・ブラウザハーネスを使用してフロントエンドテストを設計。RTL、MSW、Vitest、Playwrightが存在する場合に適用。コンポーネント、loading/error state、統合、フロントエンドE2Eテストの追加・レビュー時に使用。. Frontend Typescript Testing is an agent skill from shinpr/ai-coding-project-boilerplate.

When should I use Frontend Typescript Testing?

Frontend Typescript Testing fits situations like: tasks that involve Unit testing; tasks that involve End-to-end testing; tasks that involve Browser testing.

How do I install Frontend Typescript Testing in Claude Code?

Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a claude-code`. Or copy the skill folder (.claude/skills-ja/frontend-typescript-testing in shinpr/ai-coding-project-boilerplate) into .claude/skills/frontend-typescript-testing in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Typescript Testing in Codex?

Run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a codex`. Or copy the skill folder (.claude/skills-ja/frontend-typescript-testing in shinpr/ai-coding-project-boilerplate) into .agents/skills/frontend-typescript-testing in your project. Codex loads it when a task matches its description.

Can I use Frontend Typescript Testing in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add shinpr/ai-coding-project-boilerplate --skill frontend-typescript-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-typescript-testing, .gemini/skills/frontend-typescript-testing, .github/skills/frontend-typescript-testing and .opencode/skills/frontend-typescript-testing in your project.

What does Frontend Typescript Testing need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Typescript Testing is instructions for the agent only.

Does Frontend Typescript Testing access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Typescript Testing safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Typescript Testing use?

Frontend Typescript Testing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Typescript Testing use?

About 843 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.3k tokens, read only when the agent opens those files.

What are the alternatives to Frontend Typescript Testing?

Skills that share tags, products or a category with Frontend Typescript Testing: React Testing (affaan-m/ECC, 274k stars), Test Commander (EliasOulkadi/shokunin, 114 stars), Front End Testing (citypaul/.dotfiles, 739 stars) and Svelte Testing (spences10/sveltest, 113 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Typescript Testing?

shinpr (a GitHub user) maintains it in shinpr/ai-coding-project-boilerplate, which has 232 GitHub stars. The repository holds 42 skills in this directory. The repository was last updated on October 4, 2026.

Source: shinpr/ai-coding-project-boilerplate on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.