Skip to main content

​
コード品質

  • pnpm biome check --write . でリント・フォーマットを適用
  • any は使用しない。適切な型を定義する
  • 環境変数は null チェックまたはデフォルト値を設定。非空アサーション (!) は避ける

​
スタイリング

  • Tailwind CSS を使用
  • 条件付きクラスには cn ユーティリティを使用
  • @phosphor-icons/react のアイコンは *Icon 形式で命名（例: BookOpenIcon）

​
アクセシビリティ

  • インタラクティブ要素はキーボード操作に対応（tabIndex, onKeyDown）
  • SVG には <title> と aria-label を付与
  • セマンティックな HTML を使用（<button> を優先）
  • フォーム要素には <label htmlFor="..."> を関連付け

​
ボタン

  • フォーム送信以外のボタンには type="button" を指定
  • 立体感: border-b-4、クリック時: active:translate-y-1

​
提出前チェック

  1. pnpm biome check . がパスする
  2. pnpm exec tsc --noEmit で型が有効
  3. pnpm test がパスする