kongyo2@portfolio: ~online

kongyo2

kongyo2

D E V E L O P E R

> Building tools where AI meets the web.

featured work
> ~/projects/featured

Better Niconico

ニコニコ動画のレイアウトと細部を、自分好みに整える Chrome 拡張機能。 機能ごとにオン/オフできるトグルとして設計し、設定はその場で即反映されます。

  • TypeScript
  • Vite
  • Manifest V3
  • Anime4K · WebGPU
  • FFmpeg.wasm
  • Zod
  • neverthrow
  • Vitest
  • AI アップスケーリングAnime4K (WebGPU) で低画質の動画をリアルタイムに高精細化。
  • Picture-in-Pictureコメント付きの小窓で“ながら見”。作業中も弾幕を逃さない。
  • コメント付きスクショ流れるコメントごと、いまの 1 フレームを画像として保存。
  • シネマティックライティング映像の色をプレイヤー周囲へ滲ませるアンビエントモード。
  • クラシックレイアウト復元動画情報を上部へ戻す、見慣れた旧レイアウトに。
  • 大百科リンク復元タグの隣に、ニコニコ大百科への導線をふたたび。
> ~/projects/featured

アンサイクロペディア カードガチャ

日本語アンサイクロペディアの実在記事を“カード”として封入したコレクションガチャ。 記事に付いた称号がそのままレア度になり、3D のホロカードを引いて図鑑を埋めていく。

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Three.js
  • Zustand
  • Dexie · IndexedDB
  • Framer Motion
称号 = レアリティ秀逸な記事コンテスト優勝流行記事大賞利用者カード秀逸志望
  • 実在記事をカード化日本語アンサイクロペディアの 25,000 本超の記事を MediaWiki API から引き、一枚ずつカードに封入。
  • 称号がレア度になる「秀逸な記事」「コンテスト優勝」など実在の称号が、そのままカードのレアリティに直結する。
  • 3D ホロカードThree.js 製の傾く箔押しカード。光沢とパララックスでレアを引いた瞬間の高揚を演出。
  • 15 のテーマポータル歴史・軍事・鉄道・サブカルなど、ジャンル別パックから狙ったカードを収集できる。
  • オフライン・コレクションDexie (IndexedDB) に保存。一度同期すれば、自分だけの図鑑をオフラインでも開ける。
  • 育成メタ要素スタミナ・ポイント・ショップ・スキン・トロフィーまで、やり込みを支える設計。
> ~/projects/open-source

similarity-ts

TypeScript 専用のコード類似度アナライザ。テキスト差分ではなく AST を 木構造の編集距離 (APTED / TSED) で照合し、名前が違うだけの“意味的な重複”まで あぶり出す。エンジンは Rust を WebAssembly にコンパイルして同梱。

~/project · similarity-tsv0.3.0

Analyzed 0 files · 0 similar pairs · 0 ms

src/user.tsformatUserLabel
function formatUserLabel(user: User): string {
if (!user.name) {
return "Guest";
}
const role = user.role ?? "member";
return `${user.name} · ${role}`;
}
0.00similarity
src/account.tsbuildAccountTitle
function buildAccountTitle(acct: Account): string {
if (!acct.title) {
return "Anonymous";
}
const tier = acct.tier ?? "free";
return `${acct.title} · ${tier}`;
}
functionsformatUserLabelbuildAccountTitle0.94 ≥ 0.80 threshold
  • TypeScript
  • Rust → WASM
  • APTED · TSED
  • AST fingerprint
  • Commander
  • Zod
  • Vitest
  • Function Similarityリネームされただけの“意味的な重複”を、AST の構造そのものから検出。
  • Type Similarityinterface と type の壁を越えて、構造が一致する型定義を発見。
  • Class Similarityメソッド構成やフィールドの形を比べ、近縁なクラスを抽出。
  • Overlap Detection関数をまたいでコピペされた断片を、トークン窓で捕捉。
AI のリファクタリングに直結$ npx @kongyo2/similarity-ts .検出結果をそのまま AI コーディングアシスタントに渡し、重複の解消プランを生成。
> ~/projects/desktop

tame-pad

LLM CLI エージェント向けの、画面端に常駐するフローティング型クリップボードパッド。右端の細い ストリップにマウスを近づけると展開し、書いたメモはワンクリックでコピー。「改行をスペースに変換」を ONにすれば、複数行の指示も1行に整えて貼り付けられる。

tame-pad
clipboard3 行 → 1 行

この関数にユニットテストを追加して。 エッジケースも網羅して。 日本語のコメント付きで。

コピーしました
  • Electron
  • electron-vite
  • TypeScript
  • Zod
  • electron-builder
  • Windows 11
  • 画面端ドッキングフレームレス・常時最前面・タスクバー非表示。画面の右端に細く貼り付き、作業の邪魔をしない。
  • ホバー展開・自動折りたたみマウスを近づけると展開し、離れると細いストリップへ。遅延はどちらも設定で調整可能。
  • 存在を見失わない工夫端に「つまみ」を表示し、長時間操作がないと数回だけ軽く明滅。prefers-reduced-motion も尊重。
  • 下書き自動保存テキストエリアの内容はデバウンス付きで保存され、再起動後もそのまま復元される。
  • マルチモニター & トレイ常駐表示先モニターを設定で切り替え。トレイから設定ファイルを開く・終了するなどの操作も。
  • IME 対応・シングルインスタンス日本語変換の確定前は折りたたみをブロック。二重起動は防ぎ、既存ウィンドウを呼び戻す。
CLI エージェントのための1行コピー改行 スペース複数行で書いたメモも、コピー時に1行へ整形。ターミナルやチャット欄へそのまま貼り付けられる。
> ~/projects/featured

memlens

Claude Code が書きためる auto memory を、3 ペインの GUI で一望するデスクトップアプリ。ファイルシステムを直接触らずに、記憶の確認・編集・整理ができる。

memlens
検索 (name / description / 本文)
index

MEMORY.md

今日

プロジェクトの memory インデックス(entrypoint)

148 行 / 6.2 KB — ロード上限 200 行 / 25 KB 以内

Claude Code がセッション開始時に読み込む索引。各 memory の name と description を一行ずつ束ねている。

user-go-deep-experience — Go と分散システムの実務経験

project-q2-launch — Q2 ローンチの締切と決定ログ

reference-linear-dashboard — Linear / Slack へのポインタ

memory typeuserfeedbackprojectreference
  • Electron
  • electron-vite
  • React 19
  • TypeScript
  • Zod
  • gray-matter
  • react-markdown
  • Vitest
  • Windows 11
  • プロジェクトブラウザ~/.claude/projects/ 配下の memory を持つプロジェクトを最終更新順に一覧。作業中のフォルダには cwd バッジ。
  • 全文検索name・description だけでなく本文まで横断検索(debounce 付き)。一致した行番号と前後の抜粋を表示する。
  • ライブリロード選択中ディレクトリを fs.watch で監視。Claude Code 本体が memory を書いた瞬間に UI が追従する。
  • MEMORY.md インスペクタ索引ファイルを表示し、Claude Code のロード上限(200 行 / 25 KB)を超えた時にはっきり警告する。
  • 安全な作成・編集・削除タイプ別ヒント付きの新規作成、インライン編集、安全な削除。entrypoint の MEMORY.md は消せないよう保護。
  • 設定インスペクタauto memory の有効・無効や保存先を、env / managed policy / settings.json のどの層が決めたかまで可視化。
> ~/projects/desktop

mcp-kanri

MCP (Model Context Protocol) サーバ設定の管理デスクトップアプリ。1 つの登録から Claude Code / Codex / Gemini / Qwen の CLI コマンドや、Claude Desktop / Cursor / VS Code / Antigravity / Cline 用の JSON、Codex の config.toml までワンクリックで生成・コピーできる。

MCP サーバ登録1 件
name
github
scope
user
command
npx -y @modelcontextprotocol/server-github
env
GITHUB_PERSONAL_ACCESS_TOKEN

ローカル stdio プロセス + 環境変数シークレット

Claude Code (CLI)bash

claude mcp add コマンド形式

claude mcp add --transport stdio --scope user --env 'GITHUB_PERSONAL_ACCESS_TOKEN=${GITHUB_TOKEN}' github -- npx -y @modelcontextprotocol/server-github
クリップボードにコピーしました
  • Electron
  • electron-vite
  • React
  • TypeScript
  • Zod
  • Vitest
  • Windows 11
  • 1 登録 → 10 フォーマット1つの MCP サーバ登録から、各 CLI コマンドとクライアント別の JSON / TOML をまとめて生成。タブを切り替えるだけ。
  • クライアント差分の自動吸収Claude Desktop は uvx mcp-proxy、SSE は npx mcp-remote で stdio に橋渡し。serverUrl・streamableHttp の違いも自動で補正。
  • 3 トランスポート対応stdio / Streamable HTTP / SSE。command + args + env、または url + headers をフォームで編集して登録。
  • Bearer トークンを賢く変換Authorization: Bearer ${ENV} を検出し、Codex の bearer_token_env_var / --bearer-token-env-var へ自動で振り分け。
  • 安全なシェルクオート空白や特殊文字を含む値だけを '…' でくるみ、POSIX シェルにそのまま貼って動く形で出力する。
  • 日本語 / English UIサイドバー下部で言語を切替。生成結果はワンクリックでコピーでき、登録はローカルに永続化される。
同じ登録が、クライアントごとに別物になる"url""serverUrl"Antigravity"type": "http""streamableHttp"ClineBearer ${KEY}bearer_token_env_varCodex10 クライアント分の「正解」を覚えておく必要はない。mcp-kanri が肩代わりする。
> ~/projects/image-to-pure-css

image → pure CSS

画像を CSS の linear-gradient だけで再現する変換ツール。<img> <canvas> も使わず、各行を 1px のグラデーションにして 1 枚の <div> に積み上げる。 ――下のプレビューは実際にこのパッケージが吐いた CSS を、そのまま描画しています。

pure CSS <div>

冒頭のターミナルにいた雫ちゃん。これも実は <img> ではなく、たった 1 枚の <div> に積み重ねたグラデーションです。

1× <div>0× <img>0× <canvas>
123.6KB出力サイズ
8,364色ストップ
109グラデーション層
0%tolerance 0 比
tolerance = 0ハードストップ — 完全再現
pure-css-image.csscss
.pure-css-image {
width: 80px;
height: 109px;
background-color: #fdfdfd;
background-image:
linear-gradient(90deg, #6f7583 1px, #6d7482 0 3px, #6d7481 0 4px, #6c7381 0 5px, #6c7481 0 6px, #6f7581 0 7px, #717783 0 8px, #707782 0 9px, #707882 0 10px, #717982 0 11px, #747b83 0 12px, #757c85 0 14px,),
linear-gradient(90deg, #6c7380 1px, #6b717e 0 2px, #6d7380 0 3px, #6b727f 0 4px, #6d727f 0 5px, #6e7480 0 6px, #6e7581 0 7px, #6e7681 0 8px, #6f7581 0 9px, #6d7580 0 10px, #717982 0 11px, #747c84 0 12px,),
linear-gradient(90deg, #616673 1px, #636875 0 2px, #626874 0 3px, #656a76 0 4px, #686d79 0 5px, #676d78 0 6px, #666c77 0 7px, #656b78 0 8px, #666c79 0 10px, #666d79 0 11px, #686f7a 0 12px, #676e79 0 13px,),
linear-gradient(90deg, #5c616d 1px, #5e636f 0 2px, #5d626e 0 3px, #5f6470 0 4px, #606471 0 5px, #606470 0 6px, #606471 0 7px, #606472 0 8px, #5f6572 0 9px, #5e6470 0 11px, #5f6471 0 12px, #5e6370 0 13px,),
linear-gradient(90deg, #5e6370 1px, #5d626f 0 2px, #606572 0 3px, #606573 0 4px, #5f6371 0 5px, #606471 0 6px, #616572 0 7px, #5e6471 0 8px, #5e6370 0 9px, #5f6471 0 10px, #5f6470 0 11px, #5f6471 0 12px,),
linear-gradient(90deg, #6d6f80 1px, #6c6f7e 0 2px, #696d7c 0 3px, #5f6573 0 4px, #5e6370 0 5px, #616573 0 6px, #5f6471 0 7px, #5e626f 0 8px, #5f636f 0 9px, #626672 0 11px, #626774 0 12px, #636774 0 13px,),
/* … 残り 103 行のグラデーション */;
background-size: 100% 1px;
background-position: 0 0, 0 1px, 0 2px, 0 3px, 0 4px,;
background-repeat: no-repeat;
}
クリップボードにコピーしました

実際の出力は 126,520 バイト・全 109 行。プレビューは先頭 6 行の抜粋です。

  • TypeScript
  • sharp
  • linear-gradient
  • Node.js
  • CLI / npx
  • Biome
  • <img> も <canvas> も使わない出力は 1 つの <div> と background-image のグラデーションだけ。DOM に増えるノードはたった 1 個。
  • 1 行 = 1 グラデーション画像の各行を高さ 1px の linear-gradient に変換し、background-position で縦に積み重ねて 1 枚の絵にする。
  • tolerance で画質とサイズを調整0 はピクセル完全再現。上げるほど色差を許容し、貪欲な線形近似でストップ数を間引いて軽量化する。
  • 細部まで圧縮最頻色を background-color に寄せ、背景色だけの行はスキップ。色コードも #fff のような最短表記へ。
  • 解像度から自由グラデーションはベクター。拡大してもにじまない――このデモも実寸の数倍に引き伸ばして表示している。
  • CLI でもライブラリでもnpx 一発でファイルを変換。convertImageToCSS() を呼べば Buffer から直接 CSS 文字列も得られる。
すぐ試す
$ npm install @kongyo2/image-to-pure-css
$ npx @kongyo2/image-to-pure-css photo.png --width 100
> ~/projects/kongyo-kenshi-tool

Kenshi → Markdown

ゲーム Kenshi.mod はバイナリ。 これを解析し、レコード・参照・会話を LLM が読める Markdown に変換する Electron 製デスクトップツール。 数値 enum は SKILL_SABRES のような名前まで解決する。 ――下のウィンドウは、サンプル mod をこのツールの変換器に通した出力です。実在の mod ではなく、デモ用に作ったサンプルです。

Forsaken Caravans.mod解析中…
11 レコード · 12.7 KB · 440

Forsaken Caravans.mod を解析中…

レコードを読み出し、参照を解決し、Markdown を生成しています。

0 / 11 レコード

  • Electron
  • React 19
  • Vite
  • TypeScript
  • zod
  • react-virtual
  • oxlint
  • electron-builder
  • .mod バイナリを構造解析選択でもドラッグ&ドロップでも読み込み、レコード・文字列・参照・ベクトルまで型付きで展開する。
  • LLM 向け Markdown に一括ダンプヘッダ・依存・カテゴリ集計から本文・会話まで、プロンプトに貼れる 1 枚の .md にまとめる。
  • enum を人間可読に解決FCS の数値地獄を翻訳。attack type=1 を SKILL_SABRES まで展開し、意味の分かる値にする。
  • 参照を名前で解決leader・weapons などの参照先を、対象の名前・型・ラベル付きで表示。参照フォルダ越しでも辿る。
  • ダイアログをツリーで抽出会話パッケージ・行・返答・条件・効果を辿り直し、空セリフを省いて読める形に再構成する。
  • インスペクタで全レコード横断仮想スクロールで数千レコードを検索・展開。型やカテゴリで絞り込み、置換まで一気に行える。
配布は Windows 用ポータブル実行ファイル。開発は Node.js 20.19+ / 22.12+。
> ~/projects/mcp

npm-info

AI エージェントのための MCP サーバ。Claude Code や Codex が TypeScript 開発中に、npm レジストリの検索・パッケージ詳細・バージョン・依存関係・README・型定義の有無・品質スコアを、その場で引けるようにする。

@kongyo2/npm-info-mcp-serverstdio7 tools

zod 系のライブラリを一覧したい。何が公開されてる?

callnpm_search{ "query": "zod" }
npm_searchmarkdown

名前・説明・キーワード・スコアで候補をまとめて返す。

# npm Search Results: "zod"
Found 14853 packages (showing 6)
## zod (v4.4.3)
TypeScript-first schema declaration and validation library with static type inference
**Keywords:** typescript, schema, validation, type, inference
**Homepage:** https://zod.dev
**Repository:** git+https://github.com/colinhacks/zod.git
**Score:** overall=2288.9 quality=100% popularity=100% maintenance=100%
**Published:** 2026-05-04T07:06:40.819Z
## zod-to-json-schema (v3.25.2)
Converts Zod schemas to Json Schemas
**Keywords:** zod, json, schema, open, api, conversion
**Homepage:** https://github.com/StefanTerdell/zod-to-json-schema#readme
**Repository:** git+https://github.com/StefanTerdell/zod-to-json-schema.git
**Score:** overall=533.2 quality=100% popularity=100% maintenance=100%
**Published:** 2026-03-27T07:09:39.645Z
## zod-validation-error (v5.0.0)
Wrap zod validation errors in user-friendly readable messages
**Keywords:** zod, error, validation
**Homepage:** https://github.com/causaly/zod-validation-error#readme
**Repository:** git://github.com/causaly/zod-validation-error.git
**Score:** overall=494.7 quality=100% popularity=100% maintenance=100%
**Published:** 2025-11-03T11:11:53.484Z
## @hono/zod-validator (v0.8.0)
Validator middleware using Zod
**Homepage:** https://github.com/honojs/middleware
**Repository:** git+https://github.com/honojs/middleware.git
**Score:** overall=470.0 quality=100% popularity=100% maintenance=100%
**Published:** 2026-05-09T10:30:02.234Z
## drizzle-zod (v0.8.3)
Generate Zod schemas from Drizzle ORM schemas
**Keywords:** zod, validate, validation, schema, drizzle, orm, pg, mysql, postgresql, postgres, sqlite, database, sql, typescript, ts
**Homepage:** https://github.com/drizzle-team/drizzle-orm#readme
**Repository:** git+https://github.com/drizzle-team/drizzle-orm.git
**Score:** overall=445.7 quality=100% popularity=100% maintenance=100%
**Published:** 2025-08-06T08:03:58.355Z
## @remotion/zod-types (v4.0.469)
Zod types for Remotion
**Keywords:** zod, color, remotion
**Homepage:** https://www.remotion.dev/docs/zod-types
**Repository:** https://github.com/remotion-dev/remotion/tree/main/packages/zod-types
**Score:** overall=445.0 quality=100% popularity=100% maintenance=100%
**Published:** 2026-05-29T07:11:05.852Z
クリップボードにコピーしました
  • TypeScript
  • MCP SDK
  • Zod
  • npm registry API
  • npms.io
  • stdio
  • エージェント向けの 7 ツール検索・詳細・バージョン・依存・README・型・スコア。AI が TypeScript 開発中に npm レジストリを直接参照できる。
  • 本物のレジストリを直叩きregistry.npmjs.org と npms.io から実データを取得する。下のデモも、実際のレジストリ応答を npm-info の変換ロジックに通した、そのままの出力。
  • TypeScript 開発に最適化types / typings / exports の types 条件を順に判定し、無ければ DefinitelyTyped の @types を提案する。
  • 品質スコアを内訳付きでnpms.io の quality / popularity / maintenance を、ダウンロード数や GitHub スター込みで一覧にする。
  • npx 一発で接続stdio トランスポート。Claude Code でも Codex でも 1 行で追加でき、ローカルにインストール不要。
  • 出力はクライアントへ忠実Markdown テキストをそのまま返す。各ツールの応答は CHARACTER_LIMIT で安全に切り詰められる。
エージェントに 1 行で渡すインストール不要。npx が stdio でサーバを起動し、エージェントに 7 つのツールが生える。
> ~/contact

Get in touch

相談、ツールの感想、バグ報告など、なんでも気軽にどうぞ。 送信されたメッセージは、そのまま僕のもとに届きます。

kongyo2@portfolio: ~/contact