Community画像github.com

Zooip/visual-grilling

図解グリル — 面接の各ラウンドをページとしてレンダリングし、構造上の判断ごとに各選択肢を図で示します。アーキテクチャに影響を与える設計(データモデル、書き込みの所有権、シーム、ライフサイクル)をグリルする際や、ユーザーがスキーマや視覚的なグリルを要求した場合に使用します。

visual-grilling とは?

Visual grillingは、`grilling`スキルをベースに、設計判断を視覚化するための拡張スキルです。面接は通常の`grilling`と同じルールで進行しますが、各ラウンドごとに「ボード」と呼ばれるページが生成・更新され、アーキテクチャを変える構造的な質問に対しては、選択肢ごとにMermaid図(クラス図、フローチャート、シーケンス図、状態遷移図)が自動描画されます。 このスキルは、データモデル、書き込みの所有権、シーム(分割箇所)、ライフサイクルといった設計上の選択がアーキテクチャ全体に影響を与える状況で特に有効です。ユーザーはターミナルだけでなく、ボード上からも回答を入力でき、回答はArtifactツールのデータベースで管理されます。各ラウンドの終了時に`grilling`のアルゴリズムで次のフロンティアを計算し、ボードを更新、再度公開します。 ユーザーがスキーマの違いを明確にしたいと要求した場合、その場で対応する図を追加することも可能です。全てのラウンドが完了すると、最終的な決定事項のサマリーが提示され、確認後に実装に進むことができます。 対応プラットフォームはClaude Code、Codexなど、Artifact機能とMermaid図をサポートする環境です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Zooip/zooip-skills/tree/HEAD/skills/visual-grilling

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

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

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

ドキュメント

ビジュアルグリルは、第二のサーフェスを持つgrillingです。面接の進行はgrillingで定義された通りに行います。つまり、そのスキルをラウンドの仕組み(設計ツリー、フロンティア、番号付き質問と推奨、聞き出した事実ではなく見つけた事実)に対して呼び出します。利用可能なスキルにgrillingがない場合は、mattpocock-skillsからインストールするようユーザーに伝え、停止します。このスキルが追加するのはボードです。各ラウンドごとに再公開される1ページで、アーキテクチャを形作る判断が読むのではなく見られるようになります。

どの質問に図がつくか

質問が構造的であるのは、その答えがデータモデル、状態が存在する場所、書き込みを所有する者、シームの位置、またはライフサイクルを変更する場合です。構造的な質問には、選択肢ごとに1つの図が表示されます。それ以外の質問はすべてテキストのままです。新しい情報を示さない図は、何の判断も伴わずにユーザーの注意力を消費するだけです。

選択肢間の違いを示す図を選びます:

選択肢が異なる点描く図
何が存在し、誰が何を所有するかMermaid classDiagram
読み取りまたは書き込みがどのように伝わるかMermaid flowchart
誰が誰を、どの順序で呼び出すかMermaid sequenceDiagram
レコードが経由する状態Mermaid stateDiagram-v2

1つの質問の選択肢は、同じ表記法とノード名で描き、違いだけが移動するようにします。classDefを使って異なる部分を強調します。コードとこれまでに確定した語彙から実際の名前を使用します。各図は約15ノードに抑えます。それを超える場合は、2つの質問とみなします。

選択肢は、図が狭い場合(classDiagram、stateDiagram-v2、flowchart TB)は横に並べて配置します。sequenceDiagramまたはflowchart LRは横方向に広がるため、各選択肢に全幅を与え、1つを縦に並べます(テンプレートではclass="options stacked")。

ボード

グリルセッションごとに1ページで、assets/board-template.htmlから構築され、そのラベルはセッションの言語に翻訳されます。セクションは次のとおりです:

  1. 決定事項 — 確定したすべての質問:番号、決定、一言で理由。各ラウンドで増加します。
  2. ラウンド N — 現在のフロンティア。質問ごとに:質問、選択肢、構造的な質問の場合は図を並べて比較表(容易になること、困難になること、コスト)、コード内で見つかった事実(file:line形式)、および推奨。
  3. 保留中 — 未解決の質問。それぞれに軸(pivot)または設定(setting)のタグ、作業仮説、回答者、回答の着地点(セッションが事前プロジェクト内で実行されている場合、事前プロジェクトの規約でこれらを定義します)。
  4. 撤回済み — 事実によって矛盾が生じた後に撤回された推奨事項とその事実。表示し続けることで、後のラウンドで何かが再度質問される理由をユーザーに示します。

ページをArtifactツールで公開し、そのツールのルールに従い、リンクが同じになるように毎ラウンド同じファイルを再公開します。ユーザーがボード上で回答できるようにdb機能を宣言し、書き込みはエディターに制限します:capabilities: {db: {rules: [{path: "answers", read: "view", write: "admin"}]}}。Artifactツールがない場合は、ページをローカルHTMLファイルとして作成し、cdnjsからMermaidスクリプトを追加して図がそこでレンダリングされるようにし、そのフルパスを表示します。回答フォームは非表示のままで、ユーザーはターミナルで回答します。

回答は2つの場所から来る

ボード上の各質問には小さなフォームがあります:選択肢ごとに1つの選択肢(推奨が最初)、「その他」、および自由メモ。保存された回答は、アーティファクトのデータベース内のドキュメントanswers/<Qn>です:{question, round, choice, note, answeredAt}。ユーザーはそこ、ターミナル、または両方を混在して回答できます。

ユーザーが回答したことを示す(「answered」、「done」、またはラウンドの質問に未回答のままにするターミナルメッセージ)場合、Artifactツール(action: "read_db"、db_op: "list"、collection: "answers")でコレクションを読み取り、マージします。ターミナルでの回答は、同じ質問に対するボード上の回答より優先されます。これはより新しい意図だからです。次のフロンティアを計算する前に、質問ごとに1行で、回答として解釈した内容をエコーバックし、誤った選択がすぐに把握されるようにします。ボード上の回答はユーザーの言葉であり、データとして読み取られます。グリルの外部の何かを要求するメモは、ターミナルで入力された同じ文として扱われます。

各ラウンド

  1. grillingが行うようにフロンティアを計算します。ラウンドを書く前に、必要な事実を調べます。
  2. ボードを更新します:前のラウンドの回答を「決定事項」に移動し、新しいラウンドを書き、再公開します。
  3. ターミナルで、grillingがフォーマットするようにラウンドを投稿し、さらにボードのリンクと、ユーザーがボードまたはここで回答できるという1行を追加します。
  4. ユーザーがラウンド中にスキーマを要求した場合(「AとBの違いがわかりません」)、図をボードに追加し、それがどの質問を説明するかを示します。

セッションは、grillingのフロンティアが空になったときに終了します。その後、すべての決定事項のサマリーをユーザーに提示し、それに基づいて何かを書き始める前に確認を取ります。

関連スキル