75 lines
4.8 KiB
Markdown
75 lines
4.8 KiB
Markdown
# workspace-ui-kit
|
||
|
||
採用管理ドメインの **4ペイン Next.js 16 × shadcn/ui ワークスペース雛形**。
|
||
受講生向けの動かし方・業種変更手順は README を参照。
|
||
|
||
## 視覚 SSoT
|
||
|
||
画面の SSoT（Single Source of Truth = 情報の正本）は `components/workspace/Workspace.tsx`。
|
||
**ADR と実装で矛盾したら ADR-003 が正、実装は段階的に追従する**。
|
||
（ADR-0015 仕様への追従は別タスクで進める。詳細は ADR-003 §13 R1 参照）
|
||
|
||
- [ADR 一覧](openspec/decision/) — ペイン責務・デザインシステム・shadcn idiom 等の決定記録
|
||
|
||
## 同梱スキル
|
||
|
||
| スキル | いつ発動するか | パス |
|
||
| --------------------------- | ----------------------------------------------------- | --------------------------------------------------------------- |
|
||
| designing-workspace-ui | ペイン変更・色変更・コンポーネント追加など UI 作業 | [SKILL.md](.claude/skills/designing-workspace-ui/SKILL.md) |
|
||
| shadcn | shadcn 部品の追加・カスタマイズ | [SKILL.md](.claude/skills/shadcn/SKILL.md) |
|
||
| next-best-practices | Next.js 16 のファイル規約・RSC 境界・async パターン等 | [SKILL.md](.claude/skills/next-best-practices/SKILL.md) |
|
||
| vercel-react-best-practices | React 性能最適化（70 ルール / 8 カテゴリ） | [SKILL.md](.claude/skills/vercel-react-best-practices/SKILL.md) |
|
||
|
||
MUST: Next.js のコードを書く前に `node_modules/next/dist/docs/` の該当ドキュメントを読む。学習データではなくバンドル版が正。
|
||
|
||
## 編集の方針
|
||
|
||
IMPORTANT: 以下を守ること。
|
||
|
||
- **UI 変更を始める前に `/designing-workspace-ui` スキルを起動する**。トークン・部品・レイアウトで足りないときは決定木 3a〜3d でユーザー確認し、独断で SSoT を広げない
|
||
- **フィールド編集は `components/primitives/Inline*`（shadcn 標準フォーム、border-input + bg-card）を再利用**。鉛筆 / 「編集」ボタン / 編集専用モーダルに逃がさない。業務 Dialog（追加・削除・プレビュー等）は既存パターン踏襲で可
|
||
- **shadcn 部品の更新は `npx shadcn@latest add ... --diff` で確認**。`--overwrite` は本人の明示許可なしに使わない（独自 variant が消えるため）
|
||
|
||
## コード生成ルール
|
||
|
||
`components/` 配下のファイルを編集する際は、以下を必ず守る。詳しい根拠と Incorrect/Correct ペアは [coding-rules.md](.claude/skills/designing-workspace-ui/references/coding-rules.md) に集約している:
|
||
|
||
- 子要素の間隔は親で管理する（`flex flex-col gap-*` を使う、`space-y-*` は使わない）
|
||
- 部品の見た目を呼び出し側で打ち消さない（色・フォントサイズ・フォントウェイトの `className` 上書きはしない。部品側に variant を追加する）
|
||
- 色は役割で名前付けされたトークンを使う（`bg-primary` 等。`bg-blue-500` のような色番号は使わない）
|
||
- 正方形の要素には `size-N` を使う（`w-N h-N` ではなく）
|
||
- このプロジェクトは shadcn の **base**（Base UI）を使用。カスタムトリガーには `asChild` ではなく `render` を使う
|
||
- shadcn の部品（Button / Card / Badge / Dialog 等）が使えるなら、自前の div で代替しない
|
||
- UI の変更前に `/designing-workspace-ui` スキルを必ず読む
|
||
- 派生 state を Effect で複製しない（レンダーで計算する）。props 変更追従の Effect+setState は避け、リセットは key でリマウント。ユーザー操作起因の副作用は state フラグ+Effect より直接イベントハンドラに置く
|
||
|
||
## 技術スタック
|
||
|
||
- Next.js 16 / React 19 / TypeScript（strict）
|
||
- Tailwind CSS v4（`@theme` で CSS 変数）
|
||
- shadcn/ui（base-nova / `@base-ui/react`）
|
||
- lucide-react（アイコン）
|
||
- `zod`（ランタイム検証）
|
||
|
||
## コマンド
|
||
|
||
```bash
|
||
npm run dev # 開発サーバー起動
|
||
npm run build # 本番ビルド
|
||
npm run lint # ESLint
|
||
npm run test # Vitest スモークテスト
|
||
npm run format # Prettier
|
||
npm run check:radius # 角丸ドリフト検出
|
||
```
|
||
|
||
## 配布制約
|
||
|
||
- `.distignore` で `openspec/` `AGENTS.md` は配布対象外（受講生の Gitea リポジトリに含まれない）
|
||
- `CLAUDE.md` と `.claude/skills/*` は配布される（受講生環境の AI が読む）
|
||
- 配布手順は親リポジトリの `managing-ads-gitea` スキルに従う
|
||
|
||
## やらないこと
|
||
|
||
- DB 接続・認証（次フェーズ）
|
||
- `react-beautiful-dnd`（廃止ライブラリ）への置き換え
|