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