mcpField
G
grilling-viz

grilling-viz

github.com/mathbullet生産性174104 回インストール2 週間前に更新
リポジトリ

grilling-viz について

Grilling Vizは、grillingの質問を単体で動作するインタラクティブなHTMLにするスキルです。指定のデザインシステムとNode.jsスクリプトで質問データを検証してページを生成し、更新時も回答を保持します。

主な機能

  1. 01質問を単体HTMLにレンダリング
  2. 02質問データの検証
  3. 03共通デザインシステムの部品利用
  4. 04再読み込み後の回答復元
  5. 05更新時の回答データ保護

活用シーン

  1. 01オフラインで使える質問フォームの作成
  2. 02回答をコピーして会話に貼り付け
  3. 03保存済み回答を残して質問を更新

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mathbullet/skills --skill grilling-viz

インストール後、Claude Code で/grilling-vizを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

design-system/
component-samples.html
components.css
tokens.css
scripts/
answer.js
components.js
render.mjs

詳細

プロジェクトの README より

Grilling Viz

grilling に従って質問を構成し、下記に従って可視化する。

可視化

部品見本と利用規範 を確認し、次を生成時の正本として使う。

  • design-system/tokens.css：デザイン値と用途ラベル
  • design-system/components.css：見た目
  • scripts/components.js：部品構造
  • scripts/answer.js：データ形式・回答処理

以下の scripts/ は、このスキルのディレクトリからの相対パス。 生成スクリプトは Node.js の標準機能だけで動く。

node scripts/render.mjs questions.json output.html
node scripts/render.mjs --catalog component-samples.html

生成処理は質問データを検証し、JavaScript・CSSのコードテキストをHTML内に埋め込む。 部品見本も上記コマンドで生成してブラウザーで確認する。テンプレート自体を出力先にしない。 生成スクリプトを実行できない場合は、同じ正本を使ってエージェントが埋め込む。 保存先の指定がなければ作業ディレクトリに、日付と内容を表す名前で置く。

  • 完成HTMLは、スキルの移動・削除後も単独で動くものにする。
  • 回答用HTMLに部品見本や設計説明を混在させない。
  • 回答の受渡しは、コピーと元の会話への貼り付けで行う。

回答を保持するための更新規則

  • 新規生成では生成スクリプトがランダムな識別子をHTML内の documentId に書き込む。更新ではファイル名と既存のIDを保つ。
  • 質問や選択肢の意味が変わる場合は質問IDを新しくし、旧回答を流用しない。
  • 再生成だけを理由に、HTMLから外した質問の保存データを消さない。

更新前に既存データとハッシュを取得し、質問データを編集して同じファイルに生成する。 ハッシュが一致しなければ読み直して統合する。

node scripts/render.mjs --inspect output.html
node scripts/render.mjs questions.json output.html --if-match SHA256

確認

HTML単体・オフラインで、入力・コピー・再読み込み後の回答復元を確認する。 ブラウザーを利用できなければ、未確認の操作を報告する。

コメント

Markdown 対応