diff --git a/AGENTS.md b/AGENTS.md index 9b26ba2e..8801aae4 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,422 +1,55 @@ -# Posimai Project — AI Instructions +# Posimai Project — AI 規約 (Core Rules) -> **このファイルについて**: `AGENTS.md` は Claude Code 以外の AI ツール(Antigravity, Gemini, ChatGPT 等)向けの規約ファイルです。内容は `CLAUDE.md`(Claude Code 用)と完全同期しています。変更する場合は **必ず両ファイルを同時に更新**してください。 +これは `posimai-project` の全 AI ツール(Claude Code, Cursor, Antigravity 等)が**必ず遵守すべき絶対の掟**です。 +詳細な仕様や手順は `docs/` ディレクトリ内の外部ドキュメントを参照してください。 ---- - -## 新しい AI への引き継ぎチェックリスト(必読) - -別の AI エージェント(Antigravity 等)やセッションを新たに始めるときは、**必ず最初にこのセクションを読ませること。** - -### 作業前に AI が確認すべき事項 - -1. **AGENTS.md を全文読む**(このファイル)— デザインルール・デプロイ方法・禁止事項がすべてここにある -2. **memory/ ディレクトリを確認する** — `C:\Users\maita\.claude\projects\c--Users-maita-posimai-project\memory\MEMORY.md` にプロジェクト固有の記憶がある -3. **`posimai-dashboard/src/data/projects.json` を確認する** — 全アプリの一覧・ステータス・技術スタックがここにある -4. **`APP_IDEAS.md` を確認する**(新アプリ相談時のみ)— 候補アプリの評価・推奨順がここにある - ---- - -## ディザスタリカバリ(PC 完全消失時の復元手順) - -### バックアップリポジトリ - -| リポジトリ | Gitea(ローカル) | GitHub(クラウド) | 内容 | -|-----------|-----------------|-----------------|------| -| `posimai-root` | `http://100.76.7.3:3000/mai/posimai-root` | `https://github.com/posimai/posimai-root` (private) | CLAUDE.md / AGENTS.md / _template / server.js / scripts / deploy-server.sh / claude-settings.json | -| `claude-memory` | `http://100.76.7.3:3000/mai/claude-memory` | `https://github.com/posimai/claude-memory` (private) | ~/.claude/memory 以下の全記憶ファイル | - -### 新マシンでの復元手順 - -```bash -# 1. GitHub CLI 認証 -gh auth login - -# 2. posimai-root を clone(CLAUDE.md・設定類を復元) -git clone https://github.com/posimai/posimai-root.git "C:/Users/maita/posimai-project" -cd "C:/Users/maita/posimai-project" -git remote add gitea http://100.76.7.3:3000/mai/posimai-root.git - -# 3. Claude Code settings を復元 -cp "C:/Users/maita/posimai-project/claude-settings.json" "C:/Users/maita/.claude/settings.json" - -# 4. claude-memory を clone(AI 記憶を復元) -git clone https://github.com/posimai/claude-memory.git "C:/Users/maita/.claude/projects/c--Users-maita-posimai-project/memory" -cd "C:/Users/maita/.claude/projects/c--Users-maita-posimai-project/memory" -git remote add gitea http://100.76.7.3:3000/mai/claude-memory.git - -# 5. 各アプリを必要に応じて clone -# git clone https://github.com/posimai/[app-name].git "C:/Users/maita/posimai-project/[app-name]" -# cd [app-name] && git remote add gitea http://100.76.7.3:3000/mai/[app-name].git -``` - -### posimai-root の更新方法(CLAUDE.md・AGENTS.md・server.js 等を変更した後) - -```bash -cd C:/Users/maita/posimai-project -git add CLAUDE.md AGENTS.md claude-settings.json _template/ deploy-server.sh scripts/ server.js -git commit -m "chore: update ..." -git push gitea main && git push github main -``` - -### claude-memory の更新方法(AI が記憶を更新した後) - -```bash -cd "C:/Users/maita/.claude/projects/c--Users-maita-posimai-project/memory" -git add . -git commit -m "chore: update memory" -git push gitea main && git push github main -``` - ---- - -## AI の調査・回答ルール - -### バージョン・最新情報は必ず WebSearch で確認する - -以下のトピックについては、**訓練データの知識だけで答えてはいけない**。回答前に必ず検索ツールで現在の情報を確認すること: - -| トピック | 理由 | -|---------|------| -| AI モデルのバージョン・モデル名(Claude, Gemini, GPT 等) | リリースサイクルが速く訓練データがすぐ古くなる | -| npm パッケージの最新バージョン | セキュリティパッチ・breaking changes が頻繁 | -| Vercel / Next.js の設定・API 仕様 | バージョンアップで仕様変更が多い | -| Tailscale / Docker の設定・コマンド | 手順がバージョンで変わることがある | -| ブラウザ API のサポート状況(PWA, Web Share 等) | Can I Use で現在のサポート率を確認 | - -**検索してから答える手順:** -1. 検索ツールで「[技術名] [バージョン or latest] site:公式ドキュメント」で検索 -2. 取得した情報をもとに回答 -3. 回答に「検索日: [今日の日付]」を添えて情報の鮮度を明示する - -**検索ツールが使えない・不明な場合:** -- 「訓練データをもとに回答しています。最新情報は公式ドキュメントで確認してください(知識カットオフ: [自分のカットオフ日])」と明示してから回答する -- 検索できないのに検索したかのように回答してはいけない - -### ファイル同期ルール(違反時は即修正) - -| 操作 | 必ず同時にやること | -|------|-----------------| -| `CLAUDE.md` を変更 | `AGENTS.md` も同等の内容に更新する(ツール名は AI 固有のため完全同一でなくてよい) | -| `AGENTS.md` を変更 | `CLAUDE.md` も同等の内容に更新する(ツール名は AI 固有のため完全同一でなくてよい) | -| `~/.claude/settings.json` を変更 | `posimai-root/claude-settings.json` を上書きコピーして push | -| memory ファイルを変更 | `claude-memory` リポジトリに push する | -| インフラ変更(VPS・DB・認証・ドメイン・アプリ追加) | `docs/master-architecture.md` を更新する(最終更新日付も書き換える) | - ---- - -### AI が絶対に守るべきルール(違反時は即修正) +## 1. 絶対の禁止事項・コーディング規約(違反時は即修正) | 禁止事項 | 理由 | |---------|------| -| 絵文字の使用(コード・コメント・HTML 問わず) | デザインルール違反 | -| `lucide@latest` の使用 | バージョン固定済み(`@0.344.0`) | -| CDN ライブラリのバージョン未固定(`@latest` 等) | SW キャッシュ破壊・予期せぬ破壊的変更のリスク | -| `vercel --prod` の直接実行 | GitHub push で自動デプロイされるため二重になる | -| `git push origin` の使用 | `gitea` と `github` の2リモートを使う | -| デザインシステム外の色の使用 | アクセントは `--accent` 1色のみ | -| manifest.json / sw.js のないアプリを作る | 全アプリ PWA 必須 | -| `theme-color` メタタグをメディアクエリなしで書く | ライトモード時に黒い問題が発生する | -| **新アプリ作成後に Dashboard 更新を省略する** | アプリがエコシステムから孤立する。ユーザーに言われなくても必ずやる | -| SW でクロスオリジン GET リクエストをキャッシュする | Brain API 等の外部 API が古いデータを返す・データ消失に見える(Habit バグ事例あり) | -| `lucide.createIcons()` を早期 return の後にしか呼ばない | 早期 return のコードパスでアイコンが空になる(Habit バグ事例あり) | -| CSS でアクセントカラーをハードコード(`#6EE7B7` 直書き等) | ダーク/ライトテーマ切り替えが壊れる。必ず `var(--accent)` を使う | -| 底面固定要素に `env(safe-area-inset-bottom)` を付けない | iPhone のホームインジケーター領域にコンテンツが被る | -| 外部リンクに `rel="noopener"` を付けない | Tabnabbing 攻撃の温床。`target="_blank"` には必ずセットで付ける | -| **新アプリ作成前にアクセントカラーを宣言しない** | 実装後に変更コストが大きい。カテゴリ確認→AGENTS.md テーブル追記→実装の順を守る | +| **絵文字の使用**(コード・ファイル・コミット)| デザインルール違反 | +| **`lucide@latest` の使用** | バージョン固定済み(`@0.344.0`) | +| **CDN のバージョン未固定**(`@latest` 等) | SW キャッシュ破壊・予期せぬ破壊的変更のリスク | +| **`vercel --prod` の直接実行** | GitHub push で Vercel 自動デプロイが走るため二重になる | +| **`git push origin` の使用** | `gitea` と `github` の2つのリモートを使うアーキテクチャのため | +| **デザインシステム外の色の直接使用** | ダーク/ライトテーマ切り替えが壊れる。`var(--accent)` を使うこと | +| manifest.json / sw.js のないアプリ | 全アプリ PWA 必須 | +| クロスオリジン GET リクエストの SW キャッシュ | API データが古くなる・消失バグの原因 | +| 外部リンクに `rel="noopener"` なし | Tabnabbing 攻撃の温床。`target="_blank"` には必ず付ける | +| AI 訓練データのみによるバージョン回答 | 情報が古い可能性があるため、`WebSearch` ツールで確認してから答える | -### 作業完了時の必須チェック +## 2. 必須のデプロイ・パイプライン -- [ ] emoji が増えていないか (`grep -r "emoji\|✅\|📱\|⚙️\|🎉" --include="*.html"`) -- [ ] `@latest` が増えていないか (`grep -r "@latest" --include="*.html"`) -- [ ] `npm run deploy` でデプロイしたか(`git push gitea main && git push github main`) -- [ ] **Dashboard Timeline に追記してデプロイしたか**(変更規模を問わず、コードを変更した全セッションで必須。「大きな変更のみ」は誤り) -- [ ] **新アプリなら Dashboard カード・Ecosystem・Timeline・Access Guide を更新してデプロイしたか**(ユーザーに言われる前に完了させる) - ---- - -## 対応不要と判断済みの改善案(再提案禁止) - -以下は検討したうえで「対応不要」と確定した事項。再度提案・実装しないこと。 - -| 項目 | 却下理由 | -|------|---------| -| Lucide CDN に `defer` 属性を付ける | 効果が体感できない(Lucide は約 70KB、unpkg CDN でキャッシュ済み)。リスク低でも実装コストに見合わない。`
` 内配置は意図的 | -| モノレポ化 | 個人利用規模では不要。リポジトリ分離で Vercel 自動デプロイが成立している | -| Firebase / Supabase SSO | 現行の Magic Link + Posimai API Key 方式で十分。複雑性を増やす理由がない | -| `?init_key=` URL の廃止 | Magic Link の意図的設計。セキュリティ上許容済み(ユーザーが承知)| - ---- - -## Deploy ルール(必須) - -コードを変更してデプロイするときは **必ずこの手順** を使うこと: +コードのデプロイは**以下の Git コマンドのみ**を実行すること。 ```bash git add . git commit -m "feat/fix/chore: 変更内容" -npm run deploy +npm run deploy # = git push gitea main && git push github main ``` -`npm run deploy` = `git push gitea main && git push github main` +ローカル(Gitea)とクラウド(GitHub → Vercel トリガー)の2箇所へプッシュします。 -- **Gitea**(`http://100.76.7.3:3000/mai/`): ローカルバックアップ -- **GitHub**(`https://github.com/posimai/`): Vercel 自動デプロイのトリガー +**VPS バックエンド(server.js)のデプロイ:** +`bash deploy-server.sh` を実行する(完全無人。手動で `scp` しない)。 -### やってはいけないこと -- `vercel --prod` を直接実行しない(GitHub push で自動デプロイされるため不要) - - **例外**: 新アプリの初回本番デプロイのみ、空コミット push で代替する(`_template/README.md` 参照) -- `git push origin` を使わない(`gitea` と `github` の2つのリモートを使う) -- `git push github main` だけ実行して Gitea を忘れない +## 3. アプリ追加・更新時の必須タスク(ダッシュボード追記) ---- +エコシステムからの孤立を防ぐため、新規アプリ作成や既存アプリ修正の際は**必ずユーザーに言われる前に**ダッシュボードのリポジトリを更新しデプロイすること。 -## プロジェクト構成 +- 既存アプリ修正時:`posimai-dashboard/src/app/timeline/page.tsx` を必ず更新。 +- 新規アプリ作成時:Timeline の他に、`projects.json`, `apps/page.tsx`, `ecosystem/page.tsx`, `roadmap.json` などをすべて更新する(詳細は `docs/new-app-guide.md` 参照)。 -| アプリ | ディレクトリ | 説明 | -|--------|-------------|------| -| posimai-dashboard | `posimai-dashboard/` | Next.js メインダッシュボード | -| posimai-analytics | `posimai-analytics/` | Next.js アナリティクス | -| posimai-brain | `posimai-brain/` | 記事管理(静的) | -| posimai-feed | `posimai-feed/` | RSS フィード(静的) | -| posimai-events | `posimai-events/` | イベント情報(静的) | -| posimai-hotels | `posimai-hotels/` | ホテル価格ウォッチ(静的) | -| posimai-daily | `posimai-daily/` | オーディオファースト・ブリーフィング(静的/API融合) | -| posimai-maps | `posimai-maps/` | マップ(静的) | -| posimai-reader | `posimai-reader/` | 記事リーダー(静的) | -| posimai-together | `posimai-together/` | 共有スペース(静的) | -| posimai-journal | `posimai-journal/` | CMS エディタ(Synology API バック) | -| posimai-site | `posimai-site/` | 公開ホームページ(journal/site_config と連携) | -| posimai-digest | `posimai-digest/` | テキスト要約(静的) | -| posimai-ambient | `posimai-ambient/` | 常時表示アンビエント PWA(静的) | -| posimai-widget | `posimai_widget/` | Android ホーム画面ウィジェット(Flutter) | -| posimai-timer | `posimai-timer/` | ストップウォッチ+カウントダウン(静的) | -| posimai-habit | `posimai-habit/` | 習慣チェックリスト・ヒートマップ(静的) | -| posimai-pulse | `posimai-pulse/` | 気分・エネルギー記録(静的) | -| posimai-lens | `posimai-lens/` | 写真 EXIF メタデータ表示(静的) | -| posimai-diff | `posimai-diff/` | テキスト差分ビューア(静的) | -| posimai-clean | `posimai-clean/` | テキストクリーナー(静的) | -| posimai-tech-events | `posimai-tech-events/` | IT イベント情報(Doorkeeper/connpass RSS) | -| posimai-think | `posimai-think/` | AI 思考整理アシスタント(Gemini 直接呼び出し) | -| posimai-atlas | `posimai-atlas/` | インフラ構成図・サービス依存マップ(静的)| -| posimai-brief | `posimai-brief/` | VOICEVOX 音声ブリーフィング(静的)| -| posimai-veil | `posimai-veil/` | PWA アプリランチャー(静的)| -| posimai-ui | `posimai-ui/` | 共有デザインシステム(CSS/JS)— 全静的アプリが参照するインフラ | +## 4. プロジェクト構成とドキュメント辞書 -## 共有デザインシステム(posimai-ui) +必要な情報に応じて、以下の外部ドキュメントを参照してください。 -- URL: `https://posimai-ui.vercel.app/v1/base.css` / `https://posimai-ui.vercel.app/v1/base.js` -- リポジトリ: `posimai-ui/`(GitHub: `posimai/posimai-ui` private) -- **全静的アプリが `` と ` -``` - -## VPS バックエンド(server.js) -- ファイル: `server.js`(ルートに配置、git 管理外) -- **デプロイ方法(必須)**: `bash deploy-server.sh` を実行する(SSH → docker cp → docker restart まで自動) - - SSHパスワード → sudoパスワードの順に2回入力を求められる - - スクリプト内の処理: `ssh` でファイル転送 → `docker cp` → `docker restart posimai_api` → ログ確認 - - ⚠️ `vercel --prod` や File Station での手動アップロードは使わない -- API base: `https://api.soar-enrich.com/brain/api`(VPS 本番) -- 主なテーブル: `users`, `articles`, `journal_posts`, `site_config`, `reading_history` -- 主なエンドポイント: `/health`, `/auth-test`, `/articles`, `/article`, `/feeds`, `/events/rss`, `/tts/*`, `/journal/*` - -## デザインシステム(projects.json designRules が正) -``` ---bg: #0D0D0D 背景 ---surface: #1A1A1A カード面 ---surface2: #252525 ネスト面 ---border: #2D2D2D ボーダー ---text: #F3F4F6 主テキスト ---text2: #9CA3AF 副テキスト ---text3: #6B7280 弱テキスト ---accent: #6EE7B7 アクセント(Posimai Teal)← デフォルト ---radius: 12px 角丸 -``` -- フォント: Inter(300/400/500/600) -- アイコン: Lucide(stroke 1.5〜2.0) -- ヘッダー: 高さ 52px、glassmorphism、アクセントドット + アプリ名 -- 絵文字: **禁止** -- 全アプリ: manifest.json + sw.js + PWA メタタグ必須 -- トランジション: `0.12s〜0.3s` の範囲、標準イージング `cubic-bezier(0.2, 0.9, 0.2, 1)` -- 空状態 (Empty State): 必ずアイコン + 説明テキストを実装する(空コンテナ禁止) -- 外部リンク: `target="_blank" rel="noopener"` を必ずセットで付ける -- 底面固定要素: `padding-bottom: max(Xpx, env(safe-area-inset-bottom))` で safe area 対応 -- SW キャッシュ: クロスオリジン GET は必ずネットワーク経由(キャッシュ禁止) - ```js - const ORIGIN = self.location.origin; - self.addEventListener('fetch', e => { - if (!e.request.url.startsWith(ORIGIN)) return; // APIはスルー - }); - ``` - -### アプリ別アクセントカラー(デフォルトから意図的に変える場合のみ記載) - -| アプリ | ダーク accent | ライト accent | 理由 | -|--------|-------------|-------------|------| -| 全般(デフォルト) | `#6EE7B7` Teal | `#059669` | Posimai ブランドカラー | -| posimai-journal | `#80CAEE` Sky-Blue | `#0284C7` | CMS 系・静かで知的な印象 | -| posimai-site | `#80CAEE` Sky-Blue | `#0284C7` | journal と同系統の公開サイト | -| posimai-atlas | `#22D3EE` Cyan | `#0891B2` | インフラ可視化・技術系ツール。Teal より冷たく機械的な印象 | -| ponshu-room | `#D4A574` 琥珀(Amber) | `#D4A574` | **Posimai デザインシステム適用外**。独立プロダクト。Washi テーマ(和紙×墨×琥珀)を使用。詳細は `ponshu-room/ROADMAP.md` を参照。 | - -**新アプリ作成時のルール:** -1. デフォルト Teal を使うなら何も記載不要 -2. 意図的に変える場合はこの表に追記してから実装する -3. 同じ用途・系統のアプリは同じアクセントカラーに揃える - -## 新アプリ作成 - -`_template/` をコピーして使う。`APP_NAME` / `APP_ID` / `APP_DESCRIPTION` を置換するだけで動く。 - -**完全な手順(Git / Vercel セットアップ含む)は必ず `_template/README.md` を参照すること。** -特に以下の2点は詰まりやすいので注意: -- Gitea リポジトリは **AI が必ず自動作成する**。git credential store に認証情報があるため、curl + basic auth で作成できる(手動案内は不可): - ```bash - GITEA_PASS=$(git credential fill <<< $'protocol=http\nhost=100.76.7.3:3000' | grep password | cut -d= -f2) - curl -s -X POST "http://100.76.7.3:3000/api/v1/user/repos" -u "mai:$GITEA_PASS" \ - -H "Content-Type: application/json" -d "{\"name\":\"APP_ID\",\"private\":false,\"auto_init\":false}" - ``` -- `vercel git connect` 後、**空コミット push** で初回本番デプロイをトリガーする - -### 新アプリ作成後の必須チェックリスト(抜け漏れ禁止) - -新しいアプリを作ったら、**必ずこの順番で実行する**こと(0番台は実装開始前、1番以降は実装完了後): - -0. **【実装前】アクセントカラーを宣言する** - - このアプリのカテゴリを確認(`input` インプット / `routine` 日次ルーティン / `create` 作成・記録 / `tools` ツール / `business` ビジネス / `infra` インフラ / `ideas` アイデア) - - デフォルト Teal で問題なければ何もしない - - Sky Blue 等に変える場合は AGENTS.md の「アプリ別アクセントカラー」テーブルに**先に追記**してから実装を開始する - -0.5. **【実装前】logo.png 用 Gemini プロンプトを作成・提示する** - - コード実装と並行して、ユーザーが Gemini Image に貼れるプロンプトを提示する - - 構成: 以下の共通プロンプト + アプリ固有の追加プロンプト - - アプリ固有部分はアプリの**目的・体験・隠喩**を視覚化する(機能の説明ではなく感覚的な表現) - - **共通プロンプト(全アプリ固定):** - ``` - App icon, 512x512px, squircle shape with rounded corners. - - A small translucent glass orb character, soft matte-frosted surface with - inner teal (#6EE7B7) luminescence glowing from within, gentle light refraction. - - Two tiny calm black dot eyes, subtle implied smile. - - Background: deep charcoal (#0D0D0D) with barely visible teal ambient gradient. - - Style: Apple Liquid Glass, multi-material, 2026 premium minimal. - - No outline, no harsh edges. Soft depth, subsurface scattering. - ``` - - **アプリ固有の追加プロンプト例(posimai-veil):** - ``` - + The character gently lifts the edge of a thin translucent frosted veil - (like a sheer fabric curtain), peering out from underneath it. - - Behind the veil, a soft 3x3 grid of tiny glowing app dots is barely - visible — implied home screen icons, diffused through the frosted layer. - - The veil itself is semi-transparent glass-like material, teal-tinted, - catching the orb's inner glow at the lifted corner. - ``` - -1. **Git 初期化・リポジトリ作成・初回 push** - ```bash - cd posimai-[app-name] - git init && git add . && git commit -m "feat: initial commit" - - # Gitea リポジトリ作成(AI が必ず実行。手動案内は禁止) - GITEA_PASS=$(git credential fill <<< $'protocol=http\nhost=100.76.7.3:3000' | grep password | cut -d= -f2) - curl -s -X POST "http://100.76.7.3:3000/api/v1/user/repos" \ - -H "Content-Type: application/json" \ - -u "mai:$GITEA_PASS" \ - -d "{\"name\":\"posimai-[app-name]\",\"private\":false,\"auto_init\":false}" - git remote add gitea http://100.76.7.3:3000/mai/posimai-[app-name].git - - # GitHub リポジトリ作成(AI が必ず実行) - gh repo create posimai/posimai-[app-name] --private --source=. --remote=github - npm run deploy # = git push gitea main && git push github main - ``` - -2. **Vercel に接続して初回デプロイをトリガーする** - ```bash - echo "https://github.com/posimai/posimai-[app-name].git" | vercel git connect --yes - git commit --allow-empty -m "ci: trigger initial Vercel deployment" - npm run deploy - ``` - これを省略すると Vercel にプロジェクトが登録されず自動デプロイが走らない。 - -3. **Dashboard カード追加** - - `posimai-dashboard/src/data/projects.json` の `projects` 配列にエントリを追加 - - 適切な `category` を設定(`posimai-pwa` / `active` / `flagship` / `micro` / `infra` など) - -4. **App Browser カテゴリに追加** - - `posimai-dashboard/src/app/apps/page.tsx` の `APP_CATEGORIES` 配列から適切なカテゴリを選び `projectIds` に追加 - - カテゴリ: `input`(インプット)/ `routine`(日次ルーティン)/ `create`(作成・記録)/ `tools`(ツール)/ `business`(ビジネス)/ `infra`(インフラ)/ `ideas`(アイデア) - - ここに追加しないと App Browser に表示されない(Ecosystem Map には出るが App Browser は別管理) - -5. **Ecosystem Map 追加** - - `posimai-dashboard/src/app/ecosystem/page.tsx` の `NODES` 配列にノードを追加 - - 関連する `EDGES`(依存関係)も追加 - -6. **Development Timeline に追記** - - `posimai-dashboard/src/app/timeline/page.tsx` の `EVENTS` 配列に今日の日付でエントリを追加 - - type: `launch`(新規公開)/ `feature`(機能追加)/ `fix`(修正)/ `infra`(インフラ) - -7. **Access Guide に追記** - - `posimai-dashboard/src/app/access/page.tsx` の `APPS` 配列にエントリを追加 - - `accessLevel` / `codevAccess` / `authDetail` / `codevNote` を正確に記入する - -8. **Roadmap サイドバーに追加** - - `posimai-roadmap/roadmap.json` の `apps` 配列に空エントリを追加する - ```json - { "id": "posimai-[app-name]", "tasks": [] } - ``` - - 追加後にデプロイする(既存ユーザーの localStorage には自動マージされる) - ```bash - cd posimai-roadmap - git add roadmap.json && git commit -m "feat: add posimai-[app-name] to roadmap" && npm run deploy - ``` - -9. **Dashboard をデプロイ** - ```bash - cd posimai-dashboard - git add src/data/projects.json src/app/apps/page.tsx src/app/ecosystem/page.tsx src/app/timeline/page.tsx src/app/access/page.tsx - git commit -m "feat: add [app-name] to dashboard" - npm run deploy - ``` - -10. **プロジェクト構成テーブルを AGENTS.md に追記**(このファイル) - -11. **logo.png をデプロイする**(ユーザーが logo.png を配置した後) - ```bash - cd posimai-[app-name] - git add logo.png && git commit -m "chore: add logo" && npm run deploy - ``` - -> ⚠️ ダッシュボード更新(カード・App Browser・Ecosystem・Timeline)を忘れると、アプリが孤立してエコシステムから見えなくなる。 - -## 既存アプリを変更した場合の必須チェックリスト - -**コードを変更してデプロイしたら、規模を問わず必ず実行すること**(「大きな変更のみ」「気づくレベルのみ」は判断基準として使わない): - -1. `posimai-dashboard/src/app/timeline/page.tsx` の `EVENTS` 配列に今日の日付でエントリを追加 - - 複数アプリを変更した場合は1エントリにまとめてよい - - type: `fix`(バグ修正)/ `feature`(機能追加)/ `infra`(インフラ・設定) -2. Dashboard をデプロイ - -## Git リモート(全アプリ共通) -- `gitea` → `http://100.76.7.3:3000/mai/[app-name].git` -- `github` → `https://github.com/posimai/[app-name].git` +> **注意**: `AGENTS.md` は `CLAUDE.md` と並行稼働しています。基本の読み込みコンテキストとして使用され、詳細ルールは必要に応じて `docs/*` を読み込んでください。 diff --git a/CLAUDE.md b/CLAUDE.md index 51fbdcc1..c41e36b9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,455 +1,55 @@ -# Posimai Project — AI Instructions +# Posimai Project — AI 規約 (Core Rules) -## 新しい AI への引き継ぎチェックリスト(必読) +これは `posimai-project` の全 AI ツール(Claude Code, Cursor, Antigravity 等)が**必ず遵守すべき絶対の掟**です。 +詳細な仕様や手順は `docs/` ディレクトリ内の外部ドキュメントを参照してください。 -別の AI エージェント(Antigravity 等)やセッションを新たに始めるときは、**必ず最初にこのセクションを読ませること。** - -### 作業前に AI が確認すべき事項 - -1. **CLAUDE.md を全文読む**(このファイル)— デザインルール・デプロイ方法・禁止事項がすべてここにある -2. **memory/ ディレクトリを確認する** — `C:\Users\maita\.claude\projects\c--Users-maita-posimai-project\memory\MEMORY.md` にプロジェクト固有の記憶がある -3. **`posimai-dashboard/src/data/projects.json` を確認する** — 全アプリの一覧・ステータス・技術スタックがここにある -4. **`APP_IDEAS.md` を確認する**(新アプリ相談時のみ)— 候補アプリの評価・推奨順がここにある - ---- - -## ディザスタリカバリ(PC 完全消失時の復元手順) - -### バックアップリポジトリ - -| リポジトリ | Gitea(ローカル) | GitHub(クラウド) | 内容 | -|-----------|-----------------|-----------------|------| -| `posimai-root` | `http://100.76.7.3:3000/mai/posimai-root` | `https://github.com/posimai/posimai-root` (private) | CLAUDE.md / _template / server.js / scripts / deploy-server.sh / claude-settings.json | -| `claude-memory` | `http://100.76.7.3:3000/mai/claude-memory` | `https://github.com/posimai/claude-memory` (private) | ~/.claude/memory 以下の全記憶ファイル | - -### 新マシンでの復元手順 - -```bash -# 1. GitHub CLI 認証 -gh auth login - -# 2. posimai-root を clone(CLAUDE.md・設定類を復元) -git clone https://github.com/posimai/posimai-root.git "C:/Users/maita/posimai-project" -cd "C:/Users/maita/posimai-project" -git remote add gitea http://100.76.7.3:3000/mai/posimai-root.git - -# 3. Claude Code settings を復元 -cp "C:/Users/maita/posimai-project/claude-settings.json" "C:/Users/maita/.claude/settings.json" - -# 4. claude-memory を clone(AI 記憶を復元) -git clone https://github.com/posimai/claude-memory.git "C:/Users/maita/.claude/projects/c--Users-maita-posimai-project/memory" -cd "C:/Users/maita/.claude/projects/c--Users-maita-posimai-project/memory" -git remote add gitea http://100.76.7.3:3000/mai/claude-memory.git - -# 5. 各アプリを必要に応じて clone -# git clone https://github.com/posimai/[app-name].git "C:/Users/maita/posimai-project/[app-name]" -# cd [app-name] && git remote add gitea http://100.76.7.3:3000/mai/[app-name].git -``` - -### posimai-root の更新方法(CLAUDE.md・server.js 等を変更した後) - -```bash -cd C:/Users/maita/posimai-project -git add CLAUDE.md claude-settings.json _template/ deploy-server.sh scripts/ server.js -git commit -m "chore: update ..." -git push gitea main && git push github main -``` - -### claude-memory の更新方法(AI が記憶を更新した後) - -```bash -cd "C:/Users/maita/.claude/projects/c--Users-maita-posimai-project/memory" -git add . -git commit -m "chore: update memory" -git push gitea main && git push github main -``` - ---- - -## AI の調査・回答ルール - -### バージョン・最新情報は必ず WebSearch で確認する - -以下のトピックについては、**訓練データの知識だけで答えてはいけない**。回答前に必ず `WebSearch` ツールで現在の情報を確認すること: - -| トピック | 理由 | -|---------|------| -| AI モデルのバージョン・モデル名(Claude, Gemini, GPT 等) | リリースサイクルが速く訓練データがすぐ古くなる | -| npm パッケージの最新バージョン | セキュリティパッチ・breaking changes が頻繁 | -| Vercel / Next.js の設定・API 仕様 | バージョンアップで仕様変更が多い | -| Tailscale / Docker の設定・コマンド | 手順がバージョンで変わることがある | -| ブラウザ API のサポート状況(PWA, Web Share 等) | Can I Use で現在のサポート率を確認 | - -**検索してから答える手順:** -1. `WebSearch` で「[技術名] [バージョン or latest] site:公式ドキュメント」で検索 -2. 取得した情報をもとに回答 -3. 回答に「検索日: [今日の日付]」を添えて情報の鮮度を明示する - -**WebSearch が使えない状況の場合:** -- 「訓練データをもとに回答しています。最新情報は公式ドキュメントで確認してください(知識カットオフ: [自分のカットオフ日])」と明示してから回答する - -### ファイル同期ルール(違反時は即修正) - -| 操作 | 必ず同時にやること | -|------|-----------------| -| `CLAUDE.md` を変更 | `AGENTS.md` も同等の内容に更新する(ツール名は AI 固有のため完全同一でなくてよい) | -| `AGENTS.md` を変更 | `CLAUDE.md` も同等の内容に更新する(ツール名は AI 固有のため完全同一でなくてよい) | -| `~/.claude/settings.json` を変更 | `posimai-root/claude-settings.json` を上書きコピーして push | -| memory ファイルを変更 | `claude-memory` リポジトリに push する | -| インフラ変更(VPS・DB・認証・ドメイン・アプリ追加) | `docs/master-architecture.md` を更新する(最終更新日付も書き換える) | - ---- - -### AI が絶対に守るべきルール(違反時は即修正) +## 1. 絶対の禁止事項・コーディング規約(違反時は即修正) | 禁止事項 | 理由 | |---------|------| -| 絵文字の使用(コード・コメント・HTML 問わず) | デザインルール違反 | -| `lucide@latest` の使用 | バージョン固定済み(`@0.344.0`) | -| CDN ライブラリのバージョン未固定(`@latest` 等) | SW キャッシュ破壊・予期せぬ破壊的変更のリスク | -| `vercel --prod` の直接実行 | GitHub push で自動デプロイされるため二重になる | -| `git push origin` の使用 | `gitea` と `github` の2リモートを使う | -| デザインシステム外の色の使用 | アクセントは `--accent` 1色のみ | -| manifest.json / sw.js のないアプリを作る | 全アプリ PWA 必須 | -| `theme-color` メタタグをメディアクエリなしで書く | ライトモード時に黒い問題が発生する | -| **新アプリ作成後に Dashboard 更新を省略する** | アプリがエコシステムから孤立する。ユーザーに言われなくても必ずやる | -| SW でクロスオリジン GET リクエストをキャッシュする | Brain API 等の外部 API が古いデータを返す・データ消失に見える(Habit バグ事例あり) | -| `lucide.createIcons()` を早期 return の後にしか呼ばない | 早期 return のコードパスでアイコンが空になる(Habit バグ事例あり) | -| CSS でアクセントカラーをハードコード(`#6EE7B7` 直書き等) | ダーク/ライトテーマ切り替えが壊れる。必ず `var(--accent)` を使う | -| 底面固定要素に `env(safe-area-inset-bottom)` を付けない | iPhone のホームインジケーター領域にコンテンツが被る | -| 外部リンクに `rel="noopener"` を付けない | Tabnabbing 攻撃の温床。`target="_blank"` には必ずセットで付ける | -| **新アプリ作成前にアクセントカラーを宣言しない** | 実装後に変更コストが大きい。カテゴリ確認→CLAUDE.md テーブル追記→実装の順を守る | +| **絵文字の使用**(コード・ファイル・コミット)| デザインルール違反 | +| **`lucide@latest` の使用** | バージョン固定済み(`@0.344.0`) | +| **CDN のバージョン未固定**(`@latest` 等) | SW キャッシュ破壊・予期せぬ破壊的変更のリスク | +| **`vercel --prod` の直接実行** | GitHub push で Vercel 自動デプロイが走るため二重になる | +| **`git push origin` の使用** | `gitea` と `github` の2つのリモートを使うアーキテクチャのため | +| **デザインシステム外の色の直接使用** | ダーク/ライトテーマ切り替えが壊れる。`var(--accent)` を使うこと | +| manifest.json / sw.js のないアプリ | 全アプリ PWA 必須 | +| クロスオリジン GET リクエストの SW キャッシュ | API データが古くなる・消失バグの原因 | +| 外部リンクに `rel="noopener"` なし | Tabnabbing 攻撃の温床。`target="_blank"` には必ず付ける | +| AI 訓練データのみによるバージョン回答 | 情報が古い可能性があるため、`WebSearch` ツールで確認してから答える | -### 作業完了時の必須チェック +## 2. 必須のデプロイ・パイプライン -- [ ] emoji が増えていないか (`grep -r "emoji\|✅\|📱\|⚙️\|🎉" --include="*.html"`) -- [ ] `@latest` が増えていないか (`grep -r "@latest" --include="*.html"`) -- [ ] `npm run deploy` でデプロイしたか(`git push gitea main && git push github main`) -- [ ] **Dashboard Timeline に追記してデプロイしたか**(変更規模を問わず、コードを変更した全セッションで必須。「大きな変更のみ」は誤り) -- [ ] **新アプリなら Dashboard カード・Ecosystem・Timeline・Access Guide を更新してデプロイしたか**(ユーザーに言われる前に完了させる) - ---- - -## 対応不要と判断済みの改善案(再提案禁止) - -以下は検討したうえで「対応不要」と確定した事項。再度提案・実装しないこと。 - -| 項目 | 却下理由 | -|------|---------| -| Lucide CDN に `defer` 属性を付ける | 効果が体感できない(Lucide は約 70KB、unpkg CDN でキャッシュ済み)。リスク低でも実装コストに見合わない。`` 内配置は意図的 | -| モノレポ化 | 個人利用規模では不要。リポジトリ分離で Vercel 自動デプロイが成立している | -| Firebase / Supabase SSO | 現行の Magic Link + Posimai API Key 方式で十分。複雑性を増やす理由がない | -| `?init_key=` URL の廃止 | Magic Link の意図的設計。セキュリティ上許容済み(ユーザーが承知)| - ---- - -## Deploy ルール(必須) - -コードを変更してデプロイするときは **必ずこの手順** を使うこと: +コードのデプロイは**以下の Git コマンドのみ**を実行すること。 ```bash git add . git commit -m "feat/fix/chore: 変更内容" -npm run deploy +npm run deploy # = git push gitea main && git push github main ``` -`npm run deploy` = `git push gitea main && git push github main` +ローカル(Gitea)とクラウド(GitHub → Vercel トリガー)の2箇所へプッシュします。 -- **Gitea**(`http://100.76.7.3:3000/mai/`): ローカルバックアップ -- **GitHub**(`https://github.com/posimai/`): Vercel 自動デプロイのトリガー +**VPS バックエンド(server.js)のデプロイ:** +`bash deploy-server.sh` を実行する(完全無人。手動で `scp` しない)。 -### やってはいけないこと -- `vercel --prod` を直接実行しない(GitHub push で自動デプロイされるため不要) - - **例外**: 新アプリの初回本番デプロイのみ、空コミット push で代替する(`_template/README.md` 参照) -- `git push origin` を使わない(`gitea` と `github` の2つのリモートを使う) -- `git push github main` だけ実行して Gitea を忘れない +## 3. アプリ追加・更新時の必須タスク(ダッシュボード追記) ---- +エコシステムからの孤立を防ぐため、新規アプリ作成や既存アプリ修正の際は**必ずユーザーに言われる前に**ダッシュボードのリポジトリを更新しデプロイすること。 -## プロジェクト構成 +- 既存アプリ修正時:`posimai-dashboard/src/app/timeline/page.tsx` を必ず更新。 +- 新規アプリ作成時:Timeline の他に、`projects.json`, `apps/page.tsx`, `ecosystem/page.tsx`, `roadmap.json` などをすべて更新する(詳細は `docs/new-app-guide.md` 参照)。 -| アプリ | ディレクトリ | 説明 | -|--------|-------------|------| -| posimai-dashboard | `posimai-dashboard/` | Next.js メインダッシュボード | -| posimai-analytics | `posimai-analytics/` | Next.js アナリティクス | -| posimai-brain | `posimai-brain/` | 記事管理(静的) | -| posimai-feed | `posimai-feed/` | RSS フィード(静的) | -| posimai-events | `posimai-events/` | イベント情報(静的) | -| posimai-hotels | `posimai-hotels/` | ホテル価格ウォッチ(静的) | -| posimai-daily | `posimai-daily/` | オーディオファースト・ブリーフィング(静的/API融合) | -| posimai-maps | `posimai-maps/` | マップ(静的) | -| posimai-reader | `posimai-reader/` | 記事リーダー(静的) | -| posimai-together | `posimai-together/` | 共有スペース(静的) | -| posimai-journal | `posimai-journal/` | CMS エディタ(Synology API バック) | -| posimai-site | `posimai-site/` | 公開ホームページ(journal/site_config と連携) | -| posimai-digest | `posimai-digest/` | テキスト要約(静的) | -| posimai-ambient | `posimai-ambient/` | 常時表示アンビエント PWA(静的) | -| posimai-widget | `posimai_widget/` | Android ホーム画面ウィジェット(Flutter) | -| posimai-timer | `posimai-timer/` | ストップウォッチ+カウントダウン(静的) | -| posimai-habit | `posimai-habit/` | 習慣チェックリスト・ヒートマップ(静的) | -| posimai-pulse | `posimai-pulse/` | 気分・エネルギー記録(静的) | -| posimai-lens | `posimai-lens/` | 写真 EXIF メタデータ表示(静的) | -| posimai-diff | `posimai-diff/` | テキスト差分ビューア(静的) | -| posimai-clean | `posimai-clean/` | テキストクリーナー(静的) | -| posimai-tech-events | `posimai-tech-events/` | IT イベント情報(Doorkeeper/connpass RSS) | -| posimai-think | `posimai-think/` | AI 思考整理アシスタント(Gemini 直接呼び出し) | -| posimai-ui | `posimai-ui/` | 共有デザインシステム(CSS/JS)— 全静的アプリが参照するインフラ | -| posimai-veil | `posimai-veil/` | アプリランチャー — ホーム画面を1アイコンに集約(静的 PWA) | -| posimai-brief | `posimai-brief/` | 音声ブリーフィング PWA — Daily から切り出し(VOICEVOX/ずんだもん対応・Canvas 波形)| -| posimai-roadmap | `posimai-roadmap/` | プロジェクト課題・ロードマップ管理 PWA — Board/Apps/Ideas の3ビュー、roadmap.json + localStorage | -| posimai-atlas | `posimai-atlas/` | インフラ構成図・サービス依存マップ PWA — D3.js Galaxy 可視化、AI Context 生成、ノード CRUD | +## 4. プロジェクト構成とドキュメント辞書 -## 共有デザインシステム(posimai-ui) +必要な情報に応じて、以下の外部ドキュメントを参照してください。 -- URL: `https://posimai-ui.vercel.app/v1/base.css` / `https://posimai-ui.vercel.app/v1/base.js` -- リポジトリ: `posimai-ui/`(GitHub: `posimai/posimai-ui` private) -- **全静的アプリが `` と ` -``` - ---- - -## VPS バックエンド(server.js) -- ファイル: `server.js`(ルートに配置、git 管理外) -- **デプロイ方法(必須)**: `bash deploy-server.sh` を実行する(SSH鍵認証・完全無人) - - 入力不要(SSH鍵 `~/.ssh/id_ed25519` + docker グループで自動実行) - - スクリプト内の処理: `ssh` でファイル転送 → `docker cp` → `docker restart posimai_api` → ログ確認 - - ⚠️ `vercel --prod` や File Station での手動アップロードは使わない -- API base: `https://api.soar-enrich.com/brain/api`(VPS 本番) -- 主なテーブル: `users`, `articles`, `journal_posts`, `site_config`, `reading_history` -- 主なエンドポイント: `/health`, `/auth-test`, `/articles`, `/article`, `/feeds`, `/events/rss`, `/tts/*`, `/journal/*` - -## デザインシステム(projects.json designRules が正) -``` ---bg: #0D0D0D 背景 ---surface: #1A1A1A カード面 ---surface2: #252525 ネスト面 ---border: #2D2D2D ボーダー ---text: #F3F4F6 主テキスト ---text2: #9CA3AF 副テキスト ---text3: #6B7280 弱テキスト ---accent: #6EE7B7 アクセント(Posimai Teal)← デフォルト ---radius: 12px 角丸 -``` -- フォント: Inter(300/400/500/600) -- アイコン: Lucide(stroke 1.5〜2.0) -- ヘッダー: 高さ 52px、glassmorphism、アクセントドット + アプリ名 -- 絵文字: **禁止** -- 全アプリ: manifest.json + sw.js + PWA メタタグ必須 -- トランジション: `0.12s〜0.3s` の範囲、標準イージング `cubic-bezier(0.2, 0.9, 0.2, 1)` -- 空状態 (Empty State): 必ずアイコン + 説明テキストを実装する(空コンテナ禁止) -- 外部リンク: `target="_blank" rel="noopener"` を必ずセットで付ける -- 底面固定要素: `padding-bottom: max(Xpx, env(safe-area-inset-bottom))` で safe area 対応 -- SW キャッシュ: クロスオリジン GET は必ずネットワーク経由(キャッシュ禁止) - ```js - const ORIGIN = self.location.origin; - self.addEventListener('fetch', e => { - if (!e.request.url.startsWith(ORIGIN)) return; // APIはスルー - }); - ``` - -### アプリ別アクセントカラー(デフォルトから意図的に変える場合のみ記載) - -| アプリ | ダーク accent | ライト accent | 理由 | -|--------|-------------|-------------|------| -| 全般(デフォルト) | `#6EE7B7` Teal | `#059669` | Posimai ブランドカラー | -| posimai-journal | `#80CAEE` Sky-Blue | `#0284C7` | CMS 系・静かで知的な印象 | -| posimai-site | `#80CAEE` Sky-Blue | `#0284C7` | journal と同系統の公開サイト | -| posimai-atlas | `#22D3EE` Cyan | `#0891B2` | インフラ/ネットワーク管理 — ターミナル・サイバー感。背景も `#0C1221` navy に変更 | -| ponshu-room | `#D4A574` 琥珀(Amber) | `#D4A574` | **Posimai デザインシステム適用外**。独立プロダクト。Washi テーマ(和紙×墨×琥珀)を使用。詳細は `ponshu-room/ROADMAP.md` を参照。 | - -**新アプリ作成時のルール:** -1. デフォルト Teal を使うなら何も記載不要 -2. 意図的に変える場合はこの表に追記してから実装する -3. 同じ用途・系統のアプリは同じアクセントカラーに揃える - -## 新アプリ作成 - -### テンプレート選択 - -| テンプレート | 使うべきアプリ | -|------------|--------------| -| `_template/` | 複数ビュー・i18n・Magic Link 認証・サイドバーナビが必要なアプリ(brain, daily, together, journal 相当) | -| `_template-minimal/` | 単機能ツール・サイドバー不要なアプリ(diff, clean, timer, lens, ambient 相当) | - -迷ったら `_template-minimal/` を選ぶ(後からフル機能に移行する方が簡単)。 - -`create-app.sh` で新規アプリを一括セットアップできる(Git 初期化 + Gitea/GitHub リポジトリ作成 + Vercel 連携まで自動): - -```bash -bash create-app.sh posimai-myapp "My App Name" "アプリの説明" -``` - -`create-app.sh` は `_template/` を使う。`_template-minimal/` を使いたい場合は手動でコピーしてから `create-app.sh` の Step 3 以降と同じ Git セットアップを行う(`_template-minimal/README.md` 参照)。 - -**完全な手順(Git / Vercel セットアップ含む)は必ず `_template/README.md` を参照すること。** -特に以下の2点は詰まりやすいので注意: -- Gitea リポジトリは **AI が必ず自動作成する**。`GITEA_TOKEN` 環境変数がなくても、git credential store に認証情報が保存されているため、以下のコマンドで作成できる: - ```bash - GITEA_PASS=$(git credential fill <<< $'protocol=http\nhost=100.76.7.3:3000' | grep password | cut -d= -f2) - curl -s -X POST "http://100.76.7.3:3000/api/v1/user/repos" \ - -H "Content-Type: application/json" \ - -u "mai:$GITEA_PASS" \ - -d "{\"name\":\"$APP_ID\",\"private\":false,\"auto_init\":false}" - ``` - 作成後すぐ `git push gitea main` を実行する。「手動で作成してください」と案内してはいけない。 -- `vercel git connect` と **空コミット push** は AI が必ず実行する。手順: - ```bash - echo "https://github.com/posimai/APP_ID.git" | vercel git connect --yes - git commit --allow-empty -m "ci: trigger initial Vercel deployment" - npm run deploy - ``` - これを省略すると Vercel にプロジェクトが登録されず、GitHub push しても自動デプロイが走らない。 - -### 新アプリ作成後の必須チェックリスト(抜け漏れ禁止) - -新しいアプリを作ったら、**必ずこの順番で実行する**こと(0番台は実装開始前、1番以降は実装完了後): - -0. **【実装前】アクセントカラーを宣言する** - - このアプリのカテゴリを確認(`input` インプット / `routine` 日次ルーティン / `create` 作成・記録 / `tools` ツール / `business` ビジネス / `infra` インフラ / `ideas` アイデア) - - デフォルト Teal で問題なければ何もしない - - Sky Blue 等に変える場合は CLAUDE.md の「アプリ別アクセントカラー」テーブルに**先に追記**してから実装を開始する - -0.5. **【実装前】logo.png 用 Gemini プロンプトを作成・提示する** - - コード実装と並行して、ユーザーが Gemini Image に貼れるプロンプトを提示する - - 構成: 以下の共通プロンプト + アプリ固有の追加プロンプト - - アプリ固有部分はアプリの**目的・体験・隠喩**を視覚化する(機能の説明ではなく感覚的な表現) - - **共通プロンプト(全アプリ固定):** - ``` - App icon, 512x512px, squircle shape with rounded corners. - - A small translucent glass orb character, soft matte-frosted surface with - inner teal (#6EE7B7) luminescence glowing from within, gentle light refraction. - - Two tiny calm black dot eyes, subtle implied smile. - - Background: deep charcoal (#0D0D0D) with barely visible teal ambient gradient. - - Style: Apple Liquid Glass, multi-material, 2026 premium minimal. - - No outline, no harsh edges. Soft depth, subsurface scattering. - ``` - - **アプリ固有の追加プロンプト例(posimai-veil):** - ``` - + The character gently lifts the edge of a thin translucent frosted veil - (like a sheer fabric curtain), peering out from underneath it. - - Behind the veil, a soft 3x3 grid of tiny glowing app dots is barely - visible — implied home screen icons, diffused through the frosted layer. - - The veil itself is semi-transparent glass-like material, teal-tinted, - catching the orb's inner glow at the lifted corner. - ``` - -1. **Git 初期化・リポジトリ作成・初回 push** - ```bash - cd posimai-[app-name] - git init && git add . && git commit -m "feat: initial commit" - - # Gitea リポジトリ作成(AI が必ず実行。手動案内は禁止) - GITEA_PASS=$(git credential fill <<< $'protocol=http\nhost=100.76.7.3:3000' | grep password | cut -d= -f2) - curl -s -X POST "http://100.76.7.3:3000/api/v1/user/repos" \ - -H "Content-Type: application/json" \ - -u "mai:$GITEA_PASS" \ - -d "{\"name\":\"posimai-[app-name]\",\"private\":false,\"auto_init\":false}" - git remote add gitea http://100.76.7.3:3000/mai/posimai-[app-name].git - - # GitHub リポジトリ作成(AI が必ず実行) - gh repo create posimai/posimai-[app-name] --private --source=. --remote=github - npm run deploy # = git push gitea main && git push github main - ``` - -2. **Vercel に接続して初回デプロイをトリガーする** - ```bash - echo "https://github.com/posimai/posimai-[app-name].git" | vercel git connect --yes - git commit --allow-empty -m "ci: trigger initial Vercel deployment" - npm run deploy - ``` - これを省略すると Vercel にプロジェクトが登録されず自動デプロイが走らない。 - -3. **Dashboard カード追加** - - `posimai-dashboard/src/data/projects.json` の `projects` 配列にエントリを追加 - - 適切な `category` を設定(`posimai-pwa` / `active` / `flagship` / `micro` / `infra` など) - -4. **App Browser カテゴリに追加** - - `posimai-dashboard/src/app/apps/page.tsx` の `APP_CATEGORIES` 配列から適切なカテゴリを選び `projectIds` に追加 - - カテゴリ: `input`(インプット)/ `routine`(日次ルーティン)/ `create`(作成・記録)/ `tools`(ツール)/ `business`(ビジネス)/ `infra`(インフラ)/ `ideas`(アイデア) - - ここに追加しないと App Browser に表示されない(Ecosystem Map には出るが App Browser は別管理) - -5. **Ecosystem Map 追加** - - `posimai-dashboard/src/app/ecosystem/page.tsx` の `NODES` 配列にノードを追加 - - 関連する `EDGES`(依存関係)も追加 - -6. **Development Timeline に追記** - - `posimai-dashboard/src/app/timeline/page.tsx` の `EVENTS` 配列に今日の日付でエントリを追加 - - type: `launch`(新規公開)/ `feature`(機能追加)/ `fix`(修正)/ `infra`(インフラ) - -7. **Access Guide に追記** - - `posimai-dashboard/src/app/access/page.tsx` の `APPS` 配列にエントリを追加 - - `accessLevel` / `codevAccess` / `authDetail` / `codevNote` を正確に記入する - -8. **Roadmap サイドバーに追加** - - `posimai-roadmap/roadmap.json` の `apps` 配列に空エントリを追加する - ```json - { "id": "posimai-[app-name]", "tasks": [] } - ``` - - 追加後にデプロイする(既存ユーザーの localStorage には自動マージされる) - ```bash - cd posimai-roadmap - git add roadmap.json && git commit -m "feat: add posimai-[app-name] to roadmap" && npm run deploy - ``` - -9. **Dashboard をデプロイ** - ```bash - cd posimai-dashboard - git add src/data/projects.json src/app/apps/page.tsx src/app/ecosystem/page.tsx src/app/timeline/page.tsx src/app/access/page.tsx - git commit -m "feat: add [app-name] to dashboard" - npm run deploy - ``` - -10. **プロジェクト構成テーブルを CLAUDE.md に追記**(このファイル) - -11. **logo.png をデプロイする**(ユーザーが logo.png を配置した後) - ```bash - cd posimai-[app-name] - git add logo.png && git commit -m "chore: add logo" && npm run deploy - ``` - -> ⚠️ ダッシュボード更新(カード・App Browser・Ecosystem・Timeline)と Roadmap への追加を忘れると、アプリがエコシステムから孤立する。 - -## 既存アプリを変更した場合の必須チェックリスト - -**コードを変更してデプロイしたら、規模を問わず必ず実行すること**(「大きな変更のみ」「気づくレベルのみ」は判断基準として使わない): - -1. `posimai-dashboard/src/app/timeline/page.tsx` の `EVENTS` 配列に今日の日付でエントリを追加 - - 複数アプリを変更した場合は1エントリにまとめてよい - - type: `fix`(バグ修正)/ `feature`(機能追加)/ `infra`(インフラ・設定) -2. Dashboard をデプロイ - -## Git リモート(全アプリ共通) -- `gitea` → `http://100.76.7.3:3000/mai/[app-name].git` -- `github` → `https://github.com/posimai/[app-name].git` +> **注意**: `CLAUDE.md` を変更した場合は必ず `AGENTS.md` の更新も確認すること。 diff --git a/docs/design-system.md b/docs/design-system.md new file mode 100644 index 00000000..40b7eff7 --- /dev/null +++ b/docs/design-system.md @@ -0,0 +1,56 @@ +# Posimai Design System + +**このドキュメントは `posimai-project` の全アプリで共有される UI コンポーネントおよびデザインルールのリファレンスです。** + +## 共有デザインシステム(posimai-ui) + +- URL: `https://posimai-ui.vercel.app/v1/base.css` / `https://posimai-ui.vercel.app/v1/base.js` +- リポジトリ: `posimai-ui/`(GitHub: `posimai/posimai-ui` private) +- **全静的アプリが `` と ` +``` + +## デザインカラートークン + +```css +--bg: #0D0D0D /* 背景 */ +--surface: #1A1A1A /* カード面 */ +--surface2: #252525 /* ネスト面 */ +--border: #2D2D2D /* ボーダー */ +--text: #F3F4F6 /* 主テキスト */ +--text2: #9CA3AF /* 副テキスト */ +--text3: #6B7280 /* 弱テキスト */ +--accent: #6EE7B7 /* アクセント(Posimai Teal)← デフォルト */ +--radius: 12px /* 角丸 */ +``` + +## デザイン・実装ルール +- **フォント**: Inter(300/400/500/600) +- **アイコン**: Lucide(stroke 1.5〜2.0、`@0.344.0` 固定) +- **トランジション**: `0.12s〜0.3s` の範囲、標準イージング `cubic-bezier(0.2, 0.9, 0.2, 1)` +- **空状態 (Empty State)**: 必ずアイコン + 説明テキストを実装する(空コンテナ禁止) +- **絵文字 (Emoji)**: **使用禁止**(コード・UI・コメントすべて) +- **ボトムパディング**: `padding-bottom: max(Xpx, env(safe-area-inset-bottom))` で iPhone ホームインジケーター対応 +- **外部リンク**: `target="_blank" rel="noopener"` を必ずセットで付ける + +## アプリ別アクセントカラー(特例) + +原則はデフォルトの Teal (`#6EE7B7`) を使用しますが、カテゴリや意味合いに応じて以下の特例が存在します。(意図的に変える場合は実装前にここに追記すること) + +| アプリ | ダーク accent | ライト accent | 理由 | +|--------|-------------|-------------|------| +| 全般(デフォルト) | `#6EE7B7` Teal | `#059669` | Posimai ブランドカラー | +| posimai-journal | `#80CAEE` Sky-Blue | `#0284C7` | CMS 系・静かで知的な印象 | +| posimai-site | `#80CAEE` Sky-Blue | `#0284C7` | journal と同系統の公開サイト | +| posimai-atlas | `#22D3EE` Cyan | `#0891B2` | インフラ/ネットワーク管理 — ターミナル・サイバー感。背景も `#0C1221` navy に変更 | +| ponshu-room | `#D4A574` 琥珀(Amber) | `#D4A574` | **Posimai デザインシステム適用外**。独自テーマ(和紙×墨×琥珀)を使用 | diff --git a/docs/new-app-guide.md b/docs/new-app-guide.md new file mode 100644 index 00000000..b41fa46e --- /dev/null +++ b/docs/new-app-guide.md @@ -0,0 +1,94 @@ +# 新アプリ作成ガイド + +**このドキュメントは `posimai-project` で新しい PWA アプリを作成し、エコシステム(ダッシュボード等)に統合するための完全な手順書です。** + +## 1. テンプレート選択 + +| テンプレート | 使うべきアプリ | +|------------|--------------| +| `_template/` | 複数ビュー・i18n・Magic Link 認証・サイドバーナビが必要なアプリ(brain, daily, together, journal 相当) | +| `_template-minimal/` | 単機能ツール・サイドバー不要なアプリ(diff, clean, timer, lens, ambient 相当) | + +迷ったら `_template-minimal/` を選ぶ(後からフル機能に移行する方が簡単)。 + +`create-app.sh` で新規アプリを一括セットアップ可能(Git 初期化 + Gitea/GitHub リポジトリ作成 + Vercel 連携まで自動): + +```bash +bash create-app.sh posimai-myapp "My App Name" "アプリの説明" +``` + +## 2. 新アプリ作成後の必須チェックリスト(抜け漏れ禁止) + +新しいアプリを作ったら、**必ずこの順番で実行する**こと(0番台は実装開始前、1番以降は実装完了後): + +0. **【実装前】アクセントカラーを宣言する** + - このアプリのカテゴリを確認(`input` / `routine` / `create` / `tools` / `business` / `infra` / `ideas`) + - デフォルト Teal (`#6EE7B7`) で問題なければ何もしない + - 変更する場合は `docs/design-system.md` の「アプリ別アクセントカラー」テーブルに**先に追記**してから実装を開始する + +0.5. **【実装前】logo.png 用 Gemini プロンプトを作成・提示する** + - 構成: 以下の共通プロンプト + アプリ固有の追加プロンプト(感覚的な表現) + + **共通プロンプト(全アプリ固定):** + ``` + App icon, 512x512px, squircle shape with rounded corners. + A small translucent glass orb character, soft matte-frosted surface with + inner teal (#6EE7B7) luminescence glowing from within, gentle light refraction. + Two tiny calm black dot eyes, subtle implied smile. + Background: deep charcoal (#0D0D0D) with barely visible teal ambient gradient. + Style: Apple Liquid Glass, multi-material, 2026 premium minimal. + No outline, no harsh edges. Soft depth, subsurface scattering. + ``` + +1. **Git 初期化・リポジトリ作成・初回 push** + ```bash + cd posimai-[app-name] + git init && git add . && git commit -m "feat: initial commit" + + # Gitea リポジトリ作成 + GITEA_PASS=$(git credential fill <<< $'protocol=http\nhost=100.76.7.3:3000' | grep password | cut -d= -f2) + curl -s -X POST "http://100.76.7.3:3000/api/v1/user/repos" \ + -H "Content-Type: application/json" -u "mai:$GITEA_PASS" \ + -d "{\"name\":\"posimai-[app-name]\",\"private\":false,\"auto_init\":false}" + git remote add gitea http://100.76.7.3:3000/mai/posimai-[app-name].git + + # GitHub リポジトリ作成 + gh repo create posimai/posimai-[app-name] --private --source=. --remote=github + npm run deploy + ``` + +2. **Vercel に接続して初回デプロイをトリガーする** + ```bash + echo "https://github.com/posimai/posimai-[app-name].git" | vercel git connect --yes + git commit --allow-empty -m "ci: trigger initial Vercel deployment" + npm run deploy + ``` + +3. **Dashboard カード追加** + - `posimai-dashboard/src/data/projects.json` に追加 + +4. **App Browser カテゴリに追加** + - `posimai-dashboard/src/app/apps/page.tsx` に追加 + +5. **Ecosystem Map 追加** + - `posimai-dashboard/src/app/ecosystem/page.tsx` に追加 + +6. **Development Timeline に追記** + - `posimai-dashboard/src/app/timeline/page.tsx` の `EVENTS` に `launch` エントリ追加 + +7. **Access Guide に追記** + - `posimai-dashboard/src/app/access/page.tsx` に追記 + +8. **Roadmap サイドバーに追加** + - `posimai-roadmap/roadmap.json` に `{ "id": "posimai-[app-name]", "tasks": [] }` を追加して `npm run deploy` + +9. **Dashboard をデプロイ** + ```bash + npm run deploy + ``` + +10. **プロジェクト構成テーブルを更新** + - `docs/master-architecture.md` のアプリ一覧に追加 + +11. **logo.png デプロイ** + - ユーザーが `logo.png` を配置した後、コミット&デプロイ