Communitygithub.com

HomenShum/NodeKit

大規模なコード変更、アーキテクチャ移行、ベンチマーク、リリース、または完了したハッカソンアプリケーションを、編集可能でエビデンスに基づいたプレゼンテーションとして記録します。Codexが変更内容を説明したり、審査員向けのデッキを作成したり、開発中のプレゼンテーション資料を最新に保ったり、NodeSlideをパッケージ、CLI、MCP、ホストアダプター経由で駆動する場合に使用します。

NodeKit とは?

NodeKit Presentは、開発成果物をライブなプレゼンテーションデッキに変換するためのスキルです。このスキルは、Claude Code、Cursor、CodexなどのAIエージェントや開発者が、コード変更の証拠をキャプチャし、それを構造化されたプレゼンテーション資料に自動的に反映させることを可能にします。NodeKitは、変更の階層を分類し(軽微な修正、主要機能、リリースごとに適切なデッキサイズを選択)、変更記録(change.yaml)の作成、スクリーンショットやコミットなどの証拠の収集、証拠インデックスの構築、スライド計画、そしてNodeSlide(リポジトリネイティブアダプター、CLI、MCP、またはパッケージAPIの順で試行)を用いたレンダリングというワークフローを提供します。さらに、デモクリップの作成(FeatureClipStudioを使用)、ビデオの品質評価(judge-video.mjsによるCRAFTとCOMPREHENSIONのスコアリング)、およびリリース向けのローンチフィルム制作(launch-video契約に基づく段階的なプロセス)といった高度な機能も含まれています。このスキルは、プレゼンテーションを変更記録の投影として扱い、独立した情報源としないという原則に基づいており、すべての実質的な主張が現在のコミットまたはデプロイメントによって検証されることを保証します。

対応~Claude Code✓Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/HomenShum/NodeKit/tree/HEAD/plugins/nodekit/skills/nodekit-present

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

NodeKit Present

検証された開発成果物を、生きたプレゼンテーションに変換します。デッキは変更記録の投影として扱い、独立した主張の情報源としては決して扱わないでください。

プレゼンテーションアーティファクトを作成または更新する前に、変更ストーリー契約を読んでください。

ワークフロー

  1. 変更の階層を分類します。些細な作業にはデッキを作成せず、限定的な修正には変更カード、主要機能には3~5スライドのミニデッキ、リリースやハッカソンには完全なデッキと付録を使用します。
  2. changes/<change-id>/change.yaml を作成または更新します。対象者、問題、以前の状態、決定、代替案、影響を受けるシステム、ユーザーワークフロー、証明要件、制限事項、プレゼンテーション階層を記録します。
  3. 作業中に証拠をキャプチャします:ベースラインとその後のスクリーンショット、正確なコミット、デプロイメントID、テスト、ベンチマーク、トレース、アーティファクト、エクスポート、既知の障害。生のレシートを保持します。
  4. 証拠インデックスを構築します。すべての実質的な主張にステータスと証拠IDを割り当てます。計画済み、推測、ユーザー主張、測定済みの主張は明確に区別してラベル付けします。
  5. レンダリング前に各スライドを計画します。その役割、対象者の質問、要点、ナラティブ上の位置づけ、主要なビジュアル、証拠ID、密度の予算、スピーカーノートの目標を記載します。
  6. インストールされているNodeSlideトランスポートをこの順序で使用します:リポジトリネイティブアダプター、NodeSlide CLI、NodeSlide MCP、パッケージAPI。最初に機能を検査し、ホストされた書き込み、エクスポート、承認が利用可能であると決して仮定しないでください。
  7. 固定されたデッキバージョンに対してデッキの変更を提案します。ホストポリシーを通じて検証、比較、適用を行い;利便性のためにNodeSlideのガバナンスを回避しないでください。
  8. すべての実質的な主張を現在のコミットまたはデプロイメントに対して検証します。古いスクリーンショットとメトリクスを更新します。制限事項を可視化したままにします。
  9. 要求された編集可能なフォーマットをエクスポートし、再度開きます。レンダリングされたデッキ、スピーカーノート、ソースバインディング、およびPPTXラウンドトリップを検証します。
  10. 同じ変更ストーリーと証と証拠インデックスから、デモスクリプト、READMEセクション、リリースノート、提出用コピーを導出します。

デモクリップはレンダリングされたウォークスルーであり、画面収録ではありません

このセクションは、測定された失敗が存在するためにあります。本番デプロイは録画されたクリップで11/11に検証されましたが、そのクリップは生のPlaywrightキャプチャでした:フォーカスフレーミング、キャプション、可視のストリーミングやツールコール、スライドは一切ありませんでした。これらすべてのツールは既に存在しており、このスキルはそれらのいずれも指定していなかったため、うまく駆動される代わりに手作業で拙速に作成されました。

FeatureClipStudio (feature-walkthrough-gif/) は、キャプチャからレンダリングへのパイプラインであり、生のキャプチャには決してない4つの要素をカバーします:

生のキャプチャに欠けているものパイプラインが行うこと
重要なものへのフォーカスズームインするカメラ、各クリックへ優雅に移動するアニメーションカーソルと波紋
説明状態ごとのステップキャプション
作業の可視化ロード中およびストリーミング中のキャプチャをLIVEで表示 — スピナーが回転、結果が到着
主張が依存する内部情報生のJSON/状態の証拠パネル
npm run capture   # Playwrightがライブフローを駆動し、すべてのUI状態を記録
npm run studio    # キャプチャされた状態をストーリーボード化
npm run render    # Remotionがウォークスルーをレンダリング
npm run judge     # Geminiがレンダリングを監視し、採点

judge-video.mjs がゲートであり、クリップが完了したと呼ぶ前に実行すべきものです。レンダリングされたMP4をアンチヒーローショットルーブリックに対して監視し、P0/P1/P2のタイムスタンプ付き欠陥を返します — P0は公開をブロックします。独自のヘッダーにそのポイントが述べられています:最終カットは、人間の目だけがチェックする段階ではなくなります。MP4を判定し、GIFは判定しないでください;GIFはサポートされているビデオMIMEではありません。

判定官が既に合格したP2をめぐって、再レンダリングのポリッシュループに入らないでください。

二つの軸、そして失敗するのは二つ目

judge-video.mjs はCRAFT(カーソルの真実、ペーシング、可読性、動き)を採点し、別個にCOMPREHENSION(視聴者が実際に持ち帰るべき10の要素)を採点します:

ペルソナ · 目的 · ユースケース · 機能の明確さ · 完全なインタラクション
応答性 · フロー · 結果 · 非専門家の理解 · 転移

これらは直交しており、カットは良く作られていても理解不能であり得ます。実際のレンダリングで測定された例:クラフトは publish の評決で合格し、理解度は10項目すべてで1点 — 欠落はないが明示もなく、すべてが単に暗示されている — で、判定官は0:06を非専門家が迷子になる瞬間と名指ししました(「レイヤーアーキテクチャの概念とターミナルログ出力」)。

non_expert_sense(非専門家の理解)はママテストであり、合計に関係なく単独でブロックします。その判定官が「この分野以外の誰も理解できない」と言うビデオを通してしまうゲートは、ゲートではありません。10項目すべてで均一なスコアは平均化されるのではなくフラグが立てられます。「すべて1」はすべてが暗示されていて何も明示されていないことを意味し、これは発見事項であり、中途半端な合格ではありません。

ループがデフォルトであり、最終チェックではありません:レンダリング、判定、欠けているものの読み取り、再カット、再判定。あるフィルムで3回のカットにより10/20から13/20に向上し、さらに有用なことに、製作者にストーリーが間違った瞬間を中心に構築されていたことを伝えました — これは自己レビューでは決して表面化しなかったものです。理解度がクリアになり、残りの欠陥がP2になった時点で停止します。

デッキには NodeSlide、フレームレベルの証拠には NodeVideo — 実行中の製品として提示されるフレームは、それが由来するデプロイメントにバインドされなければならず、presentedAs がそれをチェック可能にします。

リファレンスビデオの入手元

MobbinがUIに有効なのは、観察して引用するコーパスであり、決してコピーしないからです。ビデオにも同じ規律が必要であり、互換性のない2種類に分類されます:

フローリファレンス — 実際の製品が何を、どのように、ステップバイステップで行うか。 Page Flows は直接の類似物です:スクリーンショットではなく記録されたユーザージャーニー、20,000以上のアプリ、タスク別に整理 — サインアップ、アップグレード、キャンセル — 同意ダイアログ、フィールドバリデーション、空の状態、成功画面を含みます。そのフレーミング自体が、反対側から述べられたアンチヒーローショットルールです:Mobbinは目的地を示し、Page Flowsは旅を示します。ScreensDesign は、収益シグナルが添付されたオンボーディングとペイウォールをカバーしています。これらを使用して、「この種の実際のフローにはどのような状態が含まれ、どれをスキップしているか?」という質問に答えます。

クラフトリファレンス — ローンチフィルムがどのように構築されるか。YouTubeから始めます。 判定官はYouTube URLを直接読み取ります — 検証済み:Geminiが1つを監視し、URLだけからその冒頭の秒数と実行時間を説明しました。ダウンロードはありません。したがって、リファレンスは引用され、決してコピーされません。これによりライセンスの問題は完全に解消され、ロケーターはURLとタイムスタンプになります:

エージェントは、渡されるのを待つのではなく、独自のコーパスを構築します。yt-dlp はYouTubeを検索し、メタデータを読み取ります;何もダウンロードされず、GeminiはURLを監視します:

node find-references.mjs "Raycast product demo" "Linear product demo"   # 検索、トリアージ、観察
node judge-video.mjs out/demo.mp4                                        # コーパスが自動的に使用される
node judge-video.mjs out/demo.mp4 --no-reference                         # オプトアウト

find-references.mjs はトークンを消費する前にトリアージします:180秒を超えるものは、短いウォークスルーとして間違った形状と間違ったコストであるとしてデフォルトで拒否され、理由が表示されます。実際の実行での測定 — 39秒のファーストパーティデモは3.9kプロンプトトークン、18分のものは102kでした。その後、references/video/<id>.json に書き込みます:タイムスタンプ付きの原子的な事実(0:07 motion — keycaps turn green on keypress)、hookSeconds、statesShown、whatToSteal、whatNotToSteal、および判定できなかったものの notRun リスト。事実であり、形容詞ではありません — 事実は候補を評価可能にし、形容詞はできません。

評決は reference ブロック(singleMoment、statePacing、motionPurpose、whatToSteal、whatNotToSteal)を獲得し、リファレンスに関するすべての主張にタイムスタンプが必要です。研究する価値のある製品ローンチフィルムはすべてすでにYouTubeにあり、それが一次ソースです;以下のキュレーションされたライブラリは、その上のディスカバリーレイヤーであり、視聴そのものよりも候補の発見に役立ちます。

コストは現実的です:1つの18分のリファレンスが102kプロンプトトークンを消費しました。30~90秒のカットを優先し、最大でも2~3つのリファレンスを渡すようにしてください。

FlowJam は手動キュレーションされたSaaSおよび製品ローンチビデオです; Tellaのライブラリ と Vidicoのブレイクダウン は、推論が添付された例を公開しています。ペーシング、単一の瞬間、および動きが装飾ではなく仕事をしている場所にこれらを使用してください。

どちらの種類もルーブリックに散文として貼り付けないでください。Mobbinの観察が記録されるのと同じ方法で記録します:原子的な事実であり、ビデオの場合は locatorDescription がタイムスタンプであり、ソースURLに引用されます。主張は「0:12でローディング状態が結果の前に1.4秒間保持される」であり、「彼らのペーシングは良い」ではありません。タイムスタンプ付きの観察から導出されたルールは採点可能ですが、形容詞はできません。

ライセンス:観察して帰属表示し、再ホストしないでください。観察スキーマ内の licenceMode は、意図的に列挙された単一の値です — それを新しいソースクラスに拡張することは、ライセンスレビューと意図的なスキーマ編集であり、型指定された文字列ではありません。

ローンチフィルムは監督され、その後レンダリングされる — ローンチビデオ契約

上記のすべては、既に存在するカットを評価します。ローンチフィルムはそれよりも早い段階で失敗します:それは間違った瞬間を中心に構築されているか、ローンチ後に納品され、いずれも判定官のループでは回復できません。Motion Studio(YCクラスのスタートアップ向けローンチフィルム)でライブで研究されたもの:彼らのプロセスは ディレクション → 初稿 → 改訂 → 納品 であり、「人間のディレクターがすべてのテイスト判断を行う」というものです。この順序が製品です。nodekit launch-video はそれを拒否可能な契約として運び、駆動されるコーディングエージェントは npm run render に飛びつく代わりに段階を進みます:

nodekit launch-video declare --application <slug> --out launch-video.json
# 1  BRIEF      製品、ストーリー(ステークホルダーの言葉で)、対象者、launchDate、チャネルを記入
# 2  DIRECTION  単一の瞬間、順序付けられたビート、find-references.mjs 経由のリファレンス(タイムスタンプ付き事実、形容詞ではない)、durationTargetSeconds ≤ 180 — その後、人間が承認
# 3  DRAFTS     キャプチャ → studio → レンダリング(FeatureClipStudio または NodeVideo)、MP4に対して judge-video.mjs、サイクルを記録:カット、判定スコア、人間のメモ、処分
# 4  DELIVERY   最終カット + judgeReceipt + 人間の承認、deliveredAt は launchDate より前
nodekit launch-video check --contract launch-video.json   # すべてのステージ出口で拒否

チェックが拒否するもの、および各拒否が存在する理由:

  • 承認されたディレクションの前のドラフト — 最初のカットはディレクションに沿って整列するものであり、発見するものではありません;ディレクションが戻ってくる前に行われたレンダリングは改訂の請求書です。
  • タイムスタンプのないリファレンスクレーム — 「彼らのペーシングは良い」は採点できません;「0:12でローディング状態が1.4秒保持される」は採点できます。
  • non_expert_sense に失敗した最終サイクル — ママテストは単独で納品をブロックします。上記の判定官ループと同じルールです;契約により、それはアドバイスではなくステージ出口になります。
  • deliveredAt が launchDate より後 — ローンチ後に納品されたローンチフィルムは回顧録です。
  • 人間の承認なしの納品 — 判定官は助言役です;テイスト判断は人間が行います。

判定官ループは、上記で説明したとおりステージ3の内部ループのままです。契約は、ループだけでは決して保持しなかったものを追加します:順序付けられたステージ、2つのテイストゲートにおける人間、および日付です。

並行レーン

大規模な実装では、プレゼンテーション作業をビルドとQAの横で読み取り専用のレーンとして実行します。問題とアーキテクチャを早期にドラフトし;後のゲートからの検証済み証拠でのみプレースホルダーを置き換えます。サポートされていない主張、必要な証明の欠落、古い証拠、または壊れたエクスポートの場合にのみリリースをブロックします。

完了を示す言葉

  • スライド計画が存在する場合、drafted(ドラフト済み)と言います。
  • すべての実質的な主張が現在の証拠に解決される場合、evidence-bound(証拠にバインド済み)と言います。
  • 要求された出力が正常に再オープンされた場合にのみ、export-verified(エクスポート検証済み)と言います。
  • アプリケーションの証明とプレゼンテーションの証明の両方が合格した場合にのみ、release-ready(リリース準備完了)と言います。

緑色の単体テストを本番環境の主張に、HTTP 200をブラウザの証明に、または助言的なモデル判断を権威ある評決に変えないでください。

関連スキル