name: kd1-skills description: > KD1 プロジェクト専用の実装ガイド（手順書）。 React + TypeScript + Express + Catalyst UI を用いた Web アプリケーションを、 定義済みアーキテクチャと技術スタックに準拠して構築する際に使用する。 本 Skill は「どう実装するか（手順・選定・参照）」を提供し、 常時適用の設計憲法は AGENTS.md に従う。

kd1-skills

0. 役割分離（最重要）

• AGENTS.md（憲法）: 常時適用。構造・依存方向・禁止事項・作業プロトコルを定義する。
• kd1-skills（手順書）: 実装時に参照。具体的な作業手順・選定ガイド・確認フロー・参照リンクを提供する。

本 Skill は「詳細なやり方」を扱い、AGENTS.md と矛盾する場合は AGENTS.md を優先する。

1. 最初に読むべきリファレンス

タスクに応じて以下を参照する:

• 技術スタック: references/tech-stack.md
• UIカタログ（Catalyst）: references/tailwind-components.md

NOTE: 追加の設計資料が増える場合は references/ に集約し、このセクションに導線を追加する。

2. 必ず守るルール（KD1 Must Rules）

2.1 Feature は必ず _template から作成（単一責務・レイヤー分離の強制）

新しい機能（feature）は必ず以下で作る:

1. src/features/_template/ をコピーして src/features/<feature-name>/ を作成
2. Template* 命名を <Feature>* に置換
3. ui/hooks/services/domain/types の構造を崩さない
4. Feature作成コマンドを用意　”apps/client/script" $npm feature:new xxxxx

目的:

• レイヤー毎の単一責務（SRP）を構造で強制する
• UI 直I/O、domain の肥大化、pages の肥大化を防ぐ

2.2 Catalyst 優先（Catalyst First）

• UI は Catalyst UI Kit を最優先
• components に存在しない場合のみ自作（その際も components/ に横断部品として追加するか、feature 内に閉じ込めるかを判断する）
• 既存 tailwind パターン（Layout / Form / Table 等）に合わせる

参照:

• references/tailwind-components.md

2.3 DTO の管理場所（SSOT）

• Client/Server 間で共有される DTO 型は packages/types を唯一の真実（SSOT） とする
• UI 専用（表示用VMなど）で閉じる型は feature 内 types.ts に置く
• apps/client と apps/server で DTO を重複定義しない

2.4 import 規約（ alias 統一）

tailwindコンポーネントは必ず alias import を使用する:

import { Button } from '@/components/button'
import { Input } from '@/components/input'
import { Field, Label, Description } from '@/components/fieldset'