Our review

Implements features following the TDD cycle (red-green-refactor) with Svelte and Vitest.

Strengths

Ensures full test coverage from the start
Clear, structured development workflow
Reduces regressions through automated tests
Encourages minimal code and regular refactoring

Limitations

Requires strict discipline to stick to the cycle
May slow down initial development for trivial tasks
Not suitable for exploration or rapid prototyping

When to use it

Use this skill when implementing well-defined features in a Svelte project that require high reliability.

When not to use it

Avoid this skill during rapid prototyping phases or when requirements are still vague and change frequently.

Examples

Implement a user login form

Implement a user login form with email and password fields, validation, and submit handler. Use TDD cycle with Svelte 5 and Vitest.

Add a counter component

Add a counter component that increments and decrements using Svelte 5 runes. Write tests first, then implement, then refactor.

description: TDD（テスト駆動開発）サイクルで機能を実装する allowed-tools: Bash, Read, Write, Edit, Grep, Glob argument-hint: <対象コンポーネントまたは機能の説明>

TDD 実装スキル

ワークフロー

Step 1: 対象把握

$ARGUMENTS から実装対象を把握する
関連する既存コード・テストを確認する
テストファイルの配置先を決定する（co-located .test.ts）

Step 2: RED - 失敗するテストを書く

テストファイルを作成する（存在しない場合）
テスト対象の振る舞いをテストとして記述する
- テスト説明は 日本語
- describe / it を使用
pnpm test を実行し、テストが 失敗する ことを確認する

import { render, screen } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import MyComponent from './MyComponent.svelte';

describe('MyComponent', () => {
  it('期待する振る舞いの説明', () => {
    render(MyComponent, { props: { /* ... */ } });
    // Assert
  });
});

Step 3: GREEN - テストを通す最小限のコードを書く

テストを通すための 最小限 の実装を行う
コンポーネントは Svelte v5 Runes API で実装する
pnpm test を実行し、テストが 成功する ことを確認する

Step 4: REFACTOR - コードを整理する

重複の除去、命名の改善
コンポーネント分割、Store の抽出
pnpm test を実行し、テストが 引き続き成功する ことを確認する

繰り返し

Step 2〜4 を対象機能が完成するまで繰り返す。各サイクルで必ず pnpm test を実行する。

TDD Implementation (Test-Driven Development)

Recommended for