mcpField
G
grilling-viz

grilling-viz

github.com/mathbulletProductivity174104 installsUpdated 2w ago
Repository

About grilling-viz

Grilling Viz is a skill for turning grilling questions into a standalone, interactive HTML visualization. It uses a defined design system and Node.js scripts to validate question data, render the page, and preserve answers across updates.

Key features

  1. 01Render questions as standalone HTML
  2. 02Validate question data
  3. 03Use shared design-system components
  4. 04Restore answers after reload
  5. 05Safeguard answer data during updates

Use cases

  1. 01Create an offline interactive question form
  2. 02Share answers by copying them into a conversation
  3. 03Update questions while retaining saved responses

Install

Copy the command and run it in a terminal.

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

After installing, type/grilling-vizin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project 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単体・オフラインで、入力・コピー・再読み込み後の回答復元を確認する。 ブラウザーを利用できなければ、未確認の操作を報告する。

Comments

Markdown supported