reeschan.pink/works

ワーク

ポートフォリオサイト のアーキテクチャ図。閲覧者はブラウザで React のページと AI チャットを使い、Vercel 上の Next.js がページを描画する。/api/chat は Vercel Blob (private) から職務経歴書などの資料を読み、Moonshot API (Kimi) とストリームでやり取りし、/api/now は本人が curl で投稿した記事を Upstash Redis に保存する。投稿と質問は Slack に通知される。

このサイト自体。ブラウザのタブを模した画面で経歴・スキル・作品を見せ、職務経歴について答える AI チャットと、three.js の 3D 背景を備えている。

  • Next.js 16
  • TypeScript
  • Tailwind CSS v4
  • three.js
  • Upstash Redis
  • Vercel
  • Vitest
  • Playwright
tokiline のアーキテクチャ図。GitHub のリポジトリで、CSS と HTML の決まり・TypeScript のヘルパ・React の部品を tsdown と Lightning CSS でビルドする。GitHub Actions が push のたびに CI を回し、npm に公開し、デモのサイトを公開する。利用する側のアプリ (素の HTML・Next.js・Tailwind CSS v4・Vue や Svelte や Astro) がそれを入れ、ブラウザは実行時の JavaScript なしでタイムラインを描く。

フレームワークに依存しないタイムライン UI。CSS と HTML の決まりが中心で、React 版は任意。実行時の JavaScript はゼロ。

  • CSS
  • HTML
  • TypeScript
  • React
  • Lightning CSS
  • tsdown
  • GitHub Actions
  • npm
pbi-orchestration-jev のアーキテクチャ図。Claude Code のオーケストレーターが Jev に短い文章で判断を聞き、select_model.py で実行先の順番を決めて、Codex・Antigravity・Agent ツールに PBI を渡し、対象リポジトリの docs/pbi/ に状態を記録する。

複数ファイルにまたがる実装を、PBI に分けてサブエージェントに渡す Claude Code のスキル。担当モデルは決定表で決め、合否は検証コマンドで決める。

  • Claude Code
  • Python
  • Node.js
  • Codex CLI
  • Antigravity CLI
  • Jev API
  • D2
shared-memory のアーキテクチャ図。Claude Code・Codex・Kimi Code が 127.0.0.1 の MCP サーバーに search / get / write を送り、MCP サーバーと CLI が共有する core が Markdown (正)・SQLite (アクセス統計)・Ollama (埋め込み)・Docker 上の OpenSearch + Sudachi (派生インデックス) を使う。タスクスケジューラが CLI の decay / gc を定期実行し、開発者は Markdown の差分を見てコミットして GitHub に push する。

複数の AI エージェントと自分が共通で参照する知識ベース。ローカル PC の中で完結する RAG で、Markdown を唯一の正とする。

  • TypeScript
  • MCP
  • OpenSearch
  • Sudachi
  • Ollama
  • SQLite
  • Docker
  • pnpm
management-self-pieces のアーキテクチャ図。持ち主はブラウザの 3D ダッシュボードから Vercel 上の Next.js アプリを使い、アプリは Neon に表示用データを保存する。GitHub の node.yaml と Asana のチケットが正で、push とタスク更新は Webhook で受け、1 日 1 回の Cron でも取り込み直す。ログインは Better Auth 経由の Google / GitHub OAuth。

自分の成果物を Node として 3D のグラフで眺め、Asana でチケット管理する個人用 Web アプリ。Node の正は各リポジトリの node.yaml。

  • Next.js
  • TypeScript
  • Drizzle
  • Neon
  • Better Auth
  • Asana
  • Vercel
  • Vitest
TrackingHealth のアーキテクチャ図。本人はスマホのブラウザ (PWA) で記録し、Vercel 上の Next.js が Better Auth と Google OAuth でログインを確かめる。記録 API は Upstash Redis に保存し、Health Planet から体重を取り込む。AI の API は Anthropic の Claude で画像解析やチャットを行い、YouTube の動画からレシピを作る。起動時の移行バッチが Redis のデータを移す。

体重・食事・運動を記録し、目標の達成を支える個人用の PWA。食事の写真からの栄養推定や、記録をもとにした AI の分析を備えている。

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Better Auth
  • Upstash Redis
  • Vercel AI SDK
  • Vitest