tkc310 · Oct 24, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026
diff --git a/.claude/skills/design-review/SKILL.md b/.claude/skills/design-review/SKILL.md
@@ -14,16 +14,4 @@ description: 画面デザインやモックアップをレビューする。UI
 
 ルールのギャップに気づいたら `../design-principles/feedback.md` の手順でユーザーに伝える。
 
-## レビュー時の追加確認
-
-- コメントが日本語かどうか
-- 不具合になりそうな部分はないか
-- リファクタできそうな部分がないか（変更差分の範囲内のみ）
-- 修正が必要な場合は提案のみ行い、修正は実行しないこと
-- インラインコメントや PR コメントで補足した方が良い箇所がないか
-
-（フロントエンドの場合）
-
-- 不必要なメモ化（useMemo / useCallback）がないか
-- 過剰な抽象化によって可読性が低下していないか
-- リンクは next/link を利用しているか
+修正が必要な箇所は提案だけを行い、ユーザーに頼まれない限り修正はしない。
diff --git a/.claude/skills/ds-factory/finish.md b/.claude/skills/ds-factory/finish.md
@@ -2,7 +2,7 @@
 
 以降は生成先のディレクトリで行う。
 
-1. **依存とトークン**: `git init && make setup`（道具の版は `.tool-versions`） → `make palette` → `make tokens` → `design-md` → `tw-merge` → `make registry`
+1. **依存とトークン**: `git init && make setup`（道具の版は `.tool-versions`） → `make palette` → `make generate`
 2. **コントラスト**: `make check`。不足があれば `semantic/light.tokens.json` / `dark.tokens.json` の段階番号を調整する。`contrast.rules.json` の基準は緩めない。AAA を選んだ場合は、文字の基準を 7:1 に上げる
 3. **見た目の性格**: 生成時に表示された箇所を、新しいキーカラーと性格で書き換える（DESIGN.md の冒頭、`docs/rulebook/01-principles.md` の「見た目の性格」、README の冒頭と特長、README のバナー `docs/assets/banner-*.svg` の色）。ロゴとアイコン（`docs/assets/logo*`・`icon-*`、`apps/storybook/public/` の favicon・アイコン・`logo.svg`）は 8341-ui 固有なので、新しいシステムのロゴに差し替えるか、削除して `.storybook/manager.ts` の `brandImage` と `manager-head.html` のリンクを外す（`docs/assets/README.md`）。ひな形の ADR（0002 など）は「引き継いだ判断」として残し、変えた判断は新しい ADR に書く
 4. **プロダクトの前提**:

diff --git a/.claude/skills/ds-improve/SKILL.md b/.claude/skills/ds-improve/SKILL.md
@@ -17,13 +17,9 @@ description: このデザインシステム自体を改善するときに使う
    - 1 PR 1 改善。大きいものは分割してバックログに戻す
 3. **直す**
    - 関連するルールブックの章、DESIGN.md、該当コンポーネントのソースとストーリーを先に読む
-   - トークンを変えるなら `packages/tokens/src/*.tokens.json` を編集し、`make tokens` と `design-md`・`tw-merge` を実行する（生成物を手で編集しない）
+   - トークンを変えるなら `packages/tokens/src/{primitive,semantic}/*.tokens.json` を編集し、`make generate` で生成物を更新する（生成物を手で編集しない）
    - 値や方針を変えるなら `docs/decisions/` に ADR を追加する
-4. **再発を防ぐ（省略しない）**
-   - コントラスト → `tokens/contrast.rules.json` に組み合わせを追加
-   - クラスの書き方 → `packages/ui/scripts/audit-classes.ts`、依存の向き → `.dependency-cruiser.cjs`、lint → ルートの `vite.config.ts` の `lint` にルールを追加
-   - 振る舞い → テストかストーリーの play 関数を追加
-   - 判断基準 → ルールブックに追記
+4. **再発を防ぐ（省略しない）**: 問題の種類に合うものを `docs/rulebook/06-improvement-loop.md` の「4. 再発を防ぐ」の表から選んで追加する
 5. **確かめる**
    - `make verify` が通ること。見た目を変えたら `make test-vrt` も
    - 見た目を変えたら Storybook の「並べて表示」でライト / ダークを確認する

diff --git a/.github/workflows/branch-cleanup.yml b/.github/workflows/branch-cleanup.yml
@@ -4,7 +4,7 @@ name: Branch cleanup
 #   - 対象: main・gh-pages 以外で、開いている PR が無く、次のどれかに当たるブランチ
 #     マージ済み・閉じた PR の元ブランチ / main に取り込み済み / ci-debug で始まる一時ブランチ
 #   - plan ジョブが候補を一覧にし、delete ジョブは環境 branch-cleanup の承認を待ってから消す
-#     （承認者は Settings > Environments > branch-cleanup の Required reviewers で設定する。手順は README）
+#     （承認者は Settings > Environments > branch-cleanup の Required reviewers で設定する。手順は docs/operations.md の「ブランチの片付け」）
 #   - 候補が無ければ delete ジョブは動かず、承認の依頼も出ない
 
 on:

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,7 +48,7 @@ jobs:
       # VRT と e2e は手動・都度実行のため CI では回さない
       - run: make test
 
-  # リリースは CI では行わない。権限のあるアカウント保有者が手元で pnpm release:version / release:publish を実行する
+  # リリースは CI では行わない。権限のあるアカウント保有者が手元で make release-version / release-publish を実行する
   # （リポジトリにトークンやシークレットを置かない。docs/releasing.md・ADR-0014）
 
   # main の Storybook と最新のレジストリ（/r/*.json）を gh-pages ブランチの直下に置く。

diff --git a/.github/workflows/storybook-preview-cleanup.yml b/.github/workflows/storybook-preview-cleanup.yml
@@ -1,7 +1,7 @@
 name: Storybook preview cleanup
 
 # PR を閉じたら、ローカルから公開した Storybook のプレビュー（gh-pages の pr-preview/pr-<番号>/）を消す。
-# 公開はローカルで行う（pnpm storybook:preview。手順は .claude/skills/ds-storybook-preview/SKILL.md）。
+# 公開はローカルで行う（make storybook-preview。手順は .claude/skills/ds-storybook-preview/SKILL.md）。
 # ここではビルドしない。
 
 on:

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -85,7 +85,7 @@ gh auth login
 | --- | --- |
 | `make setup` | 初回の準備（`make tools` と `make install`） |
 | `make dev` | Storybook を起動する |
-| `make check` | fmt・lint（型情報つき）・型、生成物の鮮度、コントラスト、クラス監査、依存の向き |
+| `make check` | fmt・lint・型・生成物の鮮度（DESIGN.md・プロダクト用 DESIGN.md の原則・tw-merge・registry.json）・コントラスト・クラス監査・依存の向き・スライドとスキルの検査 |
 | `make test` | 単体テスト（happy-dom）と、全ストーリーの実ブラウザ描画・axe |
 | `make verify` | `check` と `test` をまとめて実行する（PR を出す前に） |
 | `make test-vrt` | 見た目の回帰テスト（手動） |
@@ -168,10 +168,8 @@ main へは squash マージするため、**PR のタイトルが main のコ
 ```bash
 # 値を変える: packages/tokens/src/{primitive,semantic}/*.tokens.json
 # キーカラーを変える: packages/tokens/src/palette.config.json → 次で primitive を再生成
-make palette
-make tokens       # CSS 変数・Tailwind テーマ・Figma JSON
-make design-md   # DESIGN.md の表
-make tw-merge    # クラス統合の設定
+make palette     # キーカラーを変えたときだけ
+make generate    # CSS 変数・Tailwind テーマ・DESIGN.md の表・クラス統合の設定・レジストリ
 make check
 ```
 
@@ -180,20 +178,7 @@ make check
 
 ### コンポーネントを足す・変える
 
-`packages/ui/src/components/ui/<Name>/`（ディレクトリ名は PascalCase）に次をそろえる。構造と import の規則は [コンポーネント構造規則](./packages/ui/src/components/COMPONENT_STRUCTURE.md)（`make check` が検査する）。
-
-| ファイル | 中身 |
-| --- | --- |
-| `index.tsx` | 本体（そのまま公開 API）。Base UI の部品と `tv`（`@/lib/tv`）で書く。フックを使うなら先頭に `'use client'` |
-| `index.test.tsx` | 振る舞いの単体テスト（happy-dom） |
-| `index.stories.tsx` | ストーリー。操作があるなら play 関数で振る舞いを検査する |
-| `index.figma.ts` | Code Connect（Figma のコンポーネントがある場合） |
-| `useXxx.ts`・`<Child>/` | そのコンポーネント専用のフック・子コンポーネント（必要なら） |
-
-- semantic トークンの Tailwind クラスだけを使う（任意値では `var(--8341-*)`）
-- ほかのコンポーネントは `@/components/ui/<Name>/index` で import する（相対パスにしない）
-- 追加・削除したら `make registry` でレジストリを更新する
-- 使い方の規約は [docs/rulebook/04-components.md](./docs/rulebook/04-components.md)、アクセシビリティは [02-accessibility.md](./docs/rulebook/02-accessibility.md)
+置き場所・ファイルの種類・import の規則は [コンポーネント構造規則](./packages/ui/src/components/COMPONENT_STRUCTURE.md)、実装の規約と完了の定義は [docs/rulebook/04-components.md](./docs/rulebook/04-components.md)、アクセシビリティは [02-accessibility.md](./docs/rulebook/02-accessibility.md) を読む。構造は `make check` が検査する。
 
 ### 画面設計のルールを変える
 

diff --git a/DESIGN.md b/DESIGN.md
@@ -182,14 +182,10 @@ DTCG では `{"colorSpace": "oklch", "components": [L, C, H], "hex": "#..."}`
 
 ### 共通規約
 
-- コンポーネントは Base UI の部品を `tv()`（`@/lib/tv`）のスタイルで包む。`tailwind-variants` の `tv` を直接使わない（独自のテーマ名を登録した `tv` でないと `text-fg text-body-md` の文字色が消える）
 - import パスは shadcn 方式: `@/components/ui/{Name}/index`（ディレクトリ名は PascalCase）、`@/lib/{name}`
-- 状態は Base UI の data 属性で装飾する: `data-[checked]:`、`data-[invalid]:`、`data-[disabled]:`、`data-[highlighted]:`、`data-[panel-open]:`、`data-[starting-style]:`
-- **フォーカスは `focus-ring` クラス**（Base UI は `data-focus-visible` を付けないため `:focus-visible` で描く）。`outline-none` だけで消さない
-- 見た目が 44px 未満の操作対象には `tap-target` クラスでタップ領域を足す
-- `hover:` は Tailwind v4 では自動で `@media (hover: hover)` に入る。無効状態に効かせないよう `enabled:hover:` を使う
-- 強制カラーモードは `forced-colors:` で補う
-- `'use client'` はフック・コンテキスト・イベントハンドラを作るエントリだけに付ける（button / form-field / text-field / textarea / select / truncate）
+- 独自のスタイルは `tv()` を `@/lib/tv` から import して書く。`tailwind-variants` の `tv` を直接使わない（独自のテーマ名を登録した `tv` でないと `text-fg text-body-md` の文字色が消える）
+- **フォーカスは `focus-ring` クラス**。見た目が 44px 未満の操作対象には `tap-target`
+- コンポーネント自体を作る・直すときの規約（data 属性、`enabled:hover:`、`forced-colors:`、`'use client'` など）は [docs/rulebook/04-components.md](./docs/rulebook/04-components.md)
 
 ### Button
 
@@ -411,19 +407,10 @@ Breakpoint:         md: のみ（768px）
 Variants:           tv() from '@/lib/tv'（tailwind-variants v3）
 ```
 
-### 作業前に必ず読むもの
+### 作業の前と後
 
-0. 画面を作る場合は、プロダクトの DESIGN.md（UI の方向性とサービス種別）
-1. このファイル
-2. `docs/rulebook/02-accessibility.md`（必須ルール）
-3. 該当コンポーネントのソースとストーリー（`packages/ui/src/components/*/`）
-
-### 作業後に必ず実行するもの
-
-```bash
-make check   # fmt・lint（型情報つき）・型・トークン・コントラスト・DESIGN.md・レジストリ・クラス監査・アーキテクチャ
-make test    # 単体テスト + 全ストーリーの a11y テスト
-```
+- 前: このファイルは全文ではなく、作業に要る節だけを読む。読む節と順序は `.claude/skills/ds-build-ui/SKILL.md` の「作る前に読む」
+- 後: `make verify`（中身は `make` で出る一覧）
 
 ### プロンプト例
 

diff --git a/Makefile b/Makefile
@@ -1,5 +1,5 @@
 # 8341-ui の開発・運用コマンド。`make` で一覧を表示する。
-# 中身は pnpm のスクリプト（package.json）を呼ぶだけ。手順の説明は CONTRIBUTING.md・docs/releasing.md。
+# 中身は pnpm のスクリプト（package.json）か、リポジトリのスクリプト（node scripts/…）を呼ぶだけ。手順の説明は CONTRIBUTING.md・docs/releasing.md。
 
 .DEFAULT_GOAL := help
 SHELL := /bin/bash
@@ -52,7 +52,7 @@ build-storybook: ## Storybook とレジストリをビルドする
 
 ##@ 検査・テスト
 
-check: ## fmt・lint・型・生成物の鮮度・コントラスト・クラス監査・依存の向き・スライドとスキルの検査
+check: ## fmt・lint・型・生成物の鮮度（DESIGN.md・プロダクト用 DESIGN.md の原則・tw-merge・registry.json）・コントラスト・クラス監査・依存の向き・スライドとスキルの検査
 	pnpm check
 
 test: ## 単体テストと、全ストーリーの描画・axe
@@ -90,7 +90,7 @@ registry: ## shadcn の registry.json を更新する
 registry-build: ## レジストリを配信用にビルドする（apps/storybook/public/r）
 	pnpm --filter $(UI) registry:build
 
-generate: tokens design-md tw-merge registry ## 生成物をまとめて更新する（トークンやコンポーネントを変えた後に）
+generate: tokens design-md tw-merge registry ## 生成物をまとめて更新する（トークン・コンポーネント・原則を変えた後に）
 
 audit: ## 健康診断レポートを作る（reports/audit.md）
 	pnpm audit:report
@@ -141,4 +141,4 @@ factory: ## 新しいデザインシステムを生成する（CONFIG=設定フ
 ##@ 後片付け
 
 clean: ## ビルドの成果物を消す（依存は残す）
-	rm -rf packages/*/dist apps/storybook/storybook-static apps/storybook/public/r packages/ui/registry-assets reports
+	rm -rf dist packages/*/dist apps/storybook/storybook-static apps/storybook/public/r packages/ui/registry-assets reports
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -7,8 +7,7 @@
     "dev": "storybook dev -p 6006",
     "build": "pnpm --filter 8341-ui registry:build && storybook build",
     "test": "vp test --project storybook",
-    "test:e2e": "playwright test",
-    "preview:publish": "node scripts/publish-preview.ts"
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "8341-ui": "workspace:*",

diff --git a/apps/storybook/scripts/publish-preview.ts b/apps/storybook/scripts/publish-preview.ts
@@ -5,7 +5,7 @@
  *
  * 使い方（リポジトリのルートで）
  *   make storybook-preview              # ビルドして、今のブランチの PR に公開する
- *   make storybook-preview PR=12     # ビルド済みのものを PR #12 に公開する
+ *   make storybook-preview PR=12     # ビルドして、PR #12 に公開する
  *   make storybook-preview-remove PR=12   # PR #12 のプレビューを消す
  *
  * - PR 番号を省くと、今のブランチから開いている PR を探す（gh の REST API を使う）

diff --git a/docs/factory.md b/docs/factory.md
@@ -5,7 +5,7 @@
 このリポジトリには二つの使い方がある。
 
 1. **デザインシステムとして使う**
-   8341-ui は、そのままプロダクトで使えるデザインシステムである。トークン（W3C DTCG）、コンポーネント（Base UI + Tailwind CSS v4）、Storybook、ルールブック、DESIGN.md、改善ループを持つ。shadcn のレジストリでコードを取り込む（[README](../README.md) の「使う」）。
+   8341-ui は、そのままプロダクトで使えるデザインシステムである。トークン（W3C DTCG）、コンポーネント（Base UI + Tailwind CSS v4）、Storybook、ルールブック、DESIGN.md、改善ループを持つ。shadcn のレジストリでコードを取り込む（[README](../README.md) の「クイックスタート」）。
 
 2. **デザインシステムファクトリーとして使う**
    画面設計のルール（[design-principles](./design-principles/README.md)）とユーザーへのヒアリングの結果から、**新しいデザインシステムのリポジトリ**を作る。8341-ui はそのひな形になる。ファクトリーは AI エージェントのスキル（`ds-factory`）として動く。
@@ -35,18 +35,9 @@ docs/design-principles/ ──（ルール）──┬──▶ 8341-ui（この
 
 ### 流れ
 
-1. **ルールを読む**: `design-principles` スキルの「新規作成」モード（`mode-1-init.md`）に従う
-2. **ヒアリング**: [hearing.md](./design-principles/hearing.md) の項目に、ファクトリー固有の項目（共有の基盤か専用か、名前、接頭辞、キーカラー、フォント、アクセシビリティ目標、テーマ、リポジトリ、配布方法）を足して、一度にまとめて聞く
-3. **設定ファイル**: 回答を JSON にまとめる
-4. **生成**: `node scripts/factory/create.mjs --config <設定> --out <出力先>`
-   - git で追跡しているファイルを複製し、名前・接頭辞・キーカラーの系統名・リポジトリの URL を置き換える
-   - キーカラーの色相（hex から変換も可）を `palette.config.json` に入れる
-   - ファクトリー専用のファイルと、文書中の `<!-- factory:start -->` 〜 `<!-- factory:end -->` を取り除く
-   - 改善ログを空にし、生成の記録を ADR に残す
-5. **仕上げ**（生成先で）: 依存の導入、パレットとトークンの再生成、コントラストの確認、見た目の性格（キーカラーの名前・説明）の書き換え、プロダクトの前提を DESIGN.md に記入、`make verify`
-6. **公開**: ユーザーの承認を得てから GitHub にリポジトリを作る
+ルールを読む（`design-principles` の新規作成モード）→ ヒアリング → 設定ファイル（名前・接頭辞・キーカラー・リポジトリ）→ `make factory CONFIG=<設定> OUT=<出力先>` で生成 → 生成先で仕上げ（トークンの再生成・コントラスト・見た目の性格・DESIGN.md）→ ユーザーの承認を得て公開。
 
-詳しい手順は [`.claude/skills/ds-factory/SKILL.md`](../.claude/skills/ds-factory/SKILL.md)。
+生成では、git で追跡しているファイルを複製し、名前・接頭辞・キーカラーの系統名・リポジトリの URL を置き換え、ファクトリー専用のファイルと `<!-- factory:start -->` 〜 `<!-- factory:end -->` を取り除く。手順の詳細、ヒアリングの項目、設定ファイルの形は [`ds-factory` スキル](../.claude/skills/ds-factory/SKILL.md)。たとえば接頭辞を `acme` にすると、パッケージは `acme-ui` と `acme-ui-tokens`、CSS 変数は `--acme-*`、レジストリは `@acme/button` になる。
 
 ### 生成されるもの・されないもの
 
@@ -56,19 +47,6 @@ docs/design-principles/ ──（ルール）──┬──▶ 8341-ui（この
 | design-principles とそのスキル | 8341-ui の改善ログ（空から始める） |
 | ルールブック・ADR（引き継いだ判断として残る） | ロックファイル（生成先で `make install` して作る） |
 
-### 設定ファイルの例
-
-```json
-{
-  "name": "acme-ui",
-  "prefix": "acme",
-  "repository": { "owner": "acme-inc", "name": "acme-design-system" },
-  "keyColor": { "hex": "#2f7d5b", "family": "wakatake", "label": "若竹 Wakatake — キーカラー" }
-}
-```
-
-この設定で生成すると、パッケージは `acme-ui` と `acme-ui-tokens`、CSS 変数は `--acme-*`、レジストリは `@acme/button` のようになる。
-
 ### ファクトリーを直す
 
 - 置き換え漏れや、生成後の手作業が多い手順を見つけたら、`scripts/factory/create.mjs` か `ds-factory` スキルを直す