tdd

TDD（テスト駆動開発）のワークフロー。新機能やバグ修正の実装時に適用する。 Red → Green → Refactor のサイクルを必ず守る。

Repositorio: yend724/typography-playground
Última actividad en el origen: 9 de febrero de 2026 a las 07:55
Idioma detectado de SKILL.md: japonés
Estrellas: 0
Forks: 0

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

npx skills add https://github.com/yend724/typography-playground --skill tdd

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

commit

Git コミットメッセージの規約。Conventional Commits 形式、日本語。 Apply when creating git commits, reviewing commit messages, or when the user asks to commit changes.

2026-02-09

react

React / Next.js の TypeScript 規約。コンポーネント（.tsx）、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。

2026-02-09

review

コミット前のセルフレビュー。プロジェクトの規約に沿っているかチェックする。 Apply when the user asks to review code, check conventions, or requests a self-review before committing.

2026-02-09

Ver todos los de este repositorio

npx vitest run src/shared/utils/css.test.ts  # → FAIL（まだ実装がない）

export const buildAppliedStyles = (
  properties: Readonly<Record<string, string | undefined>>,
): React.CSSProperties => {
  const styles: Record<string, string> = {}
  for (const [key, value] of Object.entries(properties)) {
    if (value !== undefined) {
      styles[kebabToCamel(key)] = value
    }
  }
  return styles
}

npx vitest run src/shared/utils/css.test.ts  # → PASS

export const buildAppliedStyles = (
  properties: Readonly<Record<string, string | undefined>>,
): React.CSSProperties =>
  Object.entries(properties).reduce<Record<string, string>>(
    (acc, [key, value]) => (value !== undefined ? { ...acc, [kebabToCamel(key)]: value } : acc),
    {},
  )

npx vitest run src/shared/utils/css.test.ts  # → まだ PASS

種類	何をテストするか	例
ユーティリティ関数	入出力	`kebabToCamel`, `buildAppliedStyles`
カスタム hooks	状態遷移	`useTypographyState` の dispatch 結果
コンポーネント	ユーザー操作 → UI 変化	スライダー操作 → プレビュー更新
データ定義	構造の整合性	全 PropertyDefinition が必須フィールドを持つか

npx vitest              # ウォッチモード（開発中はこれ）
npx vitest run          # 全テスト1回実行
npx vitest <path>       # 特定ファイルのみ

tdd

Opciones de instalación

Revisa los archivos de origen

TDD ワークフロー

サイクル: Red → Green → Refactor

1. Red — 失敗するテストを先に書く

TDD ワークフロー

サイクル: Red → Green → Refactor

1. Red — 失敗するテストを先に書く

2. Green — テストを通す最小限の実装

3. Refactor — テストが通ったままリファクタリング

テスト粒度の指針

守ること

コマンド

name	tdd
description	TDD（テスト駆動開発）のワークフロー。新機能やバグ修正の実装時に適用する。 Red → Green → Refactor のサイクルを必ず守る。

tdd

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

TDD ワークフロー

サイクル: Red → Green → Refactor

1. Red — 失敗するテストを先に書く

Más de este repositorio

TDD ワークフロー

サイクル: Red → Green → Refactor

1. Red — 失敗するテストを先に書く

2. Green — テストを通す最小限の実装

3. Refactor — テストが通ったままリファクタリング

テスト粒度の指針

守ること

コマンド