Skills
AI agent(Claude Code / Cursor / Codex / OpenCode / Gemini CLI など)に追加できる 実装 skill 集。 各 skill は単独で完結する「ライブラリの最小サンプル + 詰まりどころ + 推奨パターン」を SKILL.md にまとめたもので、 agent が該当ライブラリを触る時に自動で参照される。
インストール
skills.sh 互換 ↗skills.sh の公式 CLI で Claude Code / Cursor / Codex / OpenCode 等 51 以上の AI agent に対して、自動で正しい場所へ symlink される。
全 skill をプロジェクトに追加
npx skills add tech-book-net/skillsその他のパターン(global install / 個別 skill / 一覧表示)
user-global に install(全プロジェクトで使える)
npx skills add tech-book-net/skills -g特定の skill だけ
npx skills add tech-book-net/skills --skill zod-v4-schema-patterns一覧だけ確認
npx skills add tech-book-net/skills --list特定 agent にだけ install(claude-code / cursor / codex / opencode 等)
npx skills add tech-book-net/skills -a claude-codeCLI を使わず git clone する場合
git clone https://github.com/tech-book-net/skills.git tech-book-net-skills
cd tech-book-net-skills
bash install.sh # 英語版を Claude + Gemini に symlink(デフォルト)
bash install.sh --lang=ja # 日本語版に切り替え
bash install.sh --lang=both # 両方Libraries(ライブラリ別の実装 skill)
個別ライブラリの最小設定 + 実装パターン + よく詰まる落とし穴。コーディング中に AI agent から呼び出して使う。
- beautiful-mermaid-render-recipes**サーバーサイドで Mermaid 図を SVG 文字列として生成して静的サイトに埋め込みたい** 時に呼び出すべき skill(公式 `mermaid` は重く DOM 依存があるためサーバーレス / SSR / build 時生成で詰まる場面の解決策)。beautiful-mermaid(ゼロ依存・DOM 非依存の SVG レンダラ)を Astro / Next.js / Node スクリプトに組み込むパターンを実装ベースで解説:静的 SVG 埋め込み、ブラウザでの interactive editor、図の向き / サイズ / subgraph 等の表示調整、対応図種(flowchart / sequence / state / class / ER)、CDN 配信せず inline で完結する設計、よく詰まる落とし穴(styling / fontFamily / theming)。次のいずれかに該当する時に invoke する: (1) `mermaid` / `beautiful-mermaid` の import を含む、(2) Astro / Next.js / docusaurus 等の **静的サイトに図を埋めたい**、(3) build 時に Mermaid を SVG に焼きたい、(4) `<Mermaid code={...} />` のような component を実装したい。検証バージョン: 1.1.3、検証日: 2026-05-09。
- react-flow-v12-setupワークフローエディタ / ER 図 / マインドマップ / DAG ビジュアライザ等の **ノードベース UI** を React で実装する時に呼び出すべき skill。React Flow v12(`@xyflow/react`)で最小コードで立ち上げ、カスタムノード追加、プログラマティックなノード/エッジ追加削除、localStorage 永続化、TypeScript 型(`Node<T>` / `Edge`)、よく詰まる落とし穴(`React.memo` / `useNodesState` 等)までを実装ベースで解説。次のいずれかに該当する時に invoke する: (1) ノード/エッジ/ハンドルが出てくる UI 要件、(2) `@xyflow/react` や `reactflow` の import を含むファイルを編集中、(3) ユーザーが 'flow chart' / 'node editor' / 'graph editor' を作りたいと言及、(4) `<ReactFlow />` の使い方 / 型 / 落とし穴に関する質問。検証バージョン: 12.10.1、検証日: 2026-05-09。
- zod-v4-schema-patternsTypeScript プロジェクトで **「外部から来る値を信用する境界」**(API レスポンス / フォーム入力 / 環境変数 / LLM 構造化出力 / DB 行)に実行時バリデーションを入れる時に呼び出すべき skill。Zod v4 系の基本スキーマ、`parse` vs `safeParse` の選び分け、`refine` / `superRefine` で複数フィールド検証、`transform` + `pipe` で正規化チェーン、discriminated union、型推論(`z.infer`)、エラーハンドリング、エコシステム連携(react-hook-form / tRPC / Astro Content / next-safe-action)、よく詰まる落とし穴をすべて含む。次のいずれかに該当する時に invoke する: (1) `import { z } from 'zod'` を含むファイルを編集中、(2) ユーザーが 'schema' / 'validation' / 'parse' を実装したい、(3) API endpoint や form の入力検証を組む場面、(4) LLM の構造化出力を型安全に受ける場面。検証バージョン: zod@4.3.x、検証日: 2026-05-09。
Techniques(ツール固有レシピ)
MDX / Astro / Tailwind 等のツール固有レシピ。横断的に再利用できる実装パターン。