render-icon-pipeline
关于
This skill runs the visualization pipeline to render icons from existing glyphs, handling palette generation, data construction, manifest creation, and icon rendering for skills/agents/teams. Developers should always use `build.sh` as the entry point rather than calling Rscript directly. Use it after creating or modifying glyph functions, or when adding new skills/agents/teams to the registry.
快速安装
Claude Code
推荐npx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/render-icon-pipeline在 Claude Code 中复制并粘贴此命令以安装该技能
技能文档
アイコンパイプラインレンダリング
既存のグリフからアイコンをレンダリングするためにvizパイプラインをエンドツーエンドで実行する。パレット生成、データ構築、マニフェスト作成、スキル・エージェント・チームのアイコンレンダリングをカバーする。
正規のエントリポイント: プロジェクトルートから bash viz/build.sh [flags]、または viz/ から bash build.sh [flags]。このスクリプトはプラットフォーム検出(WSL、Docker、ネイティブ)、Rバイナリの選択、ステップの順序付けを処理する。ビルドスクリプトに対して Rscript を直接呼び出してはならない — そのパスは MCP サーバー構成専用である。
使用する場面
- グリフ関数を作成または変更した後
- レジストリに新しいスキル、エージェント、またはチームを追加した後
- 新しいパレットまたは更新されたパレットのためにアイコンの再レンダリングが必要な場合
- フルパイプラインの再構築(例: インフラ変更後)
- viz環境を初めてセットアップする場合
入力
- 任意: エンティティタイプ —
skill、agent、team、またはall(デフォルト:all) - 任意: パレット — 特定のパレット名または
all(デフォルト:all) - 任意: ドメインフィルタ — スキルアイコン用の特定ドメイン(例:
git、design) - 任意: レンダリングモード —
full、incremental、またはdry-run(デフォルト:incremental)
手順
ステップ 1: 前提条件の確認
レンダリングのための環境が整っていることを確認する。
viz/build.shの存在を確認する:ls -la viz/build.sh- Node.jsが利用可能であることを確認する:
node --version viz/config.ymlが存在することを確認する(プラットフォーム固有のRパスプロファイル):ls viz/config.yml
build.sh はRバイナリの解決を自動的に処理する — Rパスを手動で検証する必要はない。WSL では /usr/local/bin/Rscript(WSL ネイティブ R)を使用し、Docker ではコンテナの R を使用し、ネイティブの Linux/macOS では PATH から Rscript を使用する。
期待される結果: build.sh、Node.js、config.yml が存在する。
失敗時: config.yml が不足している場合、パイプラインはシステムデフォルトにフォールバックする。Node.jsが不足している場合はnvm経由でインストールする。
ステップ 2: パイプラインの実行
build.sh は 5 つのステップを順番に実行する:
- パレットカラーの生成(R) →
palette-colors.json+colors-generated.js - データの構築(Node) →
skills.json - マニフェストの構築(Node) →
icon-manifest.json、agent-icon-manifest.json、team-icon-manifest.json - アイコンのレンダリング(R) →
icons/およびicons-hd/の WebP ファイル - ターミナルグリフの生成(Node) →
cli/lib/glyph-data.json
フルパイプライン(全タイプ、全パレット、標準 + HD):
bash viz/build.sh
インクリメンタル(ディスク上に既に存在するアイコンをスキップ):
bash viz/build.sh --skip-existing
単一ドメイン(スキルのみ):
bash viz/build.sh --only design
単一エンティティタイプ:
bash viz/build.sh --type skill
bash viz/build.sh --type agent
bash viz/build.sh --type team
ドライラン(レンダリングなしのプレビュー):
bash viz/build.sh --dry-run
標準サイズのみ(HDをスキップ):
bash viz/build.sh --no-hd
build.sh の後のすべてのフラグは build-all-icons.R にパススルーされる。
期待される結果: アイコンが viz/public/icons/<palette>/ と viz/public/icons-hd/<palette>/ にレンダリングされる。
失敗時:
- NTFS 上の renv ハング: viz の
.Rprofileはrenv/activate.Rをバイパスし、.libPaths()を直接設定する。viz/から実行することを確認する(build.sh はcd "$(dirname "$0")"により自動的にこれを行う) - Rパッケージ不足:
build.shが選択する R 環境からRscript -e "install.packages(c('ggplot2', 'ggforce', 'ggfx', 'ragg', 'magick', 'future', 'furrr', 'digest'))"を実行する - No glyph mapped: エンティティにグリフ関数が必要 — レンダリング前に
create-glyphスキルを使用する
ステップ 3: 出力の確認
レンダリングが正常に完了したことを確認する。
- ファイル数が期待値と一致することを確認する:
find viz/public/icons/cyberpunk -name "*.webp" | wc -l find viz/public/icons-hd/cyberpunk -name "*.webp" | wc -l - 適切なファイルサイズを確認する(アイコンあたり2〜80 KB)
- 包括的なチェックのために
audit-icon-pipelineスキルを実行する
期待される結果: ファイル数がマニフェストのエントリ数と一致する。ファイルサイズが想定範囲内。
失敗時: カウントが一致しない場合、レンダリング中に一部のグリフがエラーになった可能性がある。ビルドログの [ERROR] 行を確認する。
CLIフラグリファレンス
すべてのフラグは build.sh を通じて build-all-icons.R にパススルーされる:
| Flag | Default | 説明 |
|---|---|---|
--type <types> | all | カンマ区切り: skill, agent, team |
--palette <name> | all | 単一パレットまたは all(9パレット) |
--only <filter> | なし | ドメイン(スキル)またはエンティティID(エージェント/チーム) |
--skip-existing | オフ | 既存のWebPファイルがあるアイコンをスキップ |
--dry-run | オフ | 生成されるものを一覧表示 |
--size <n> | 512 | 出力寸法(ピクセル) |
--glow-sigma <n> | 4 | グローぼかし半径 |
--workers <n> | 自動 | 並列ワーカー数(detectCores()-1) |
--no-cache | オフ | コンテンツハッシュキャッシュを無視 |
--hd | オン | HDバリアント(1024px)を有効化 |
--no-hd | オフ | HDバリアントをスキップ |
--strict | オフ | 最初のサブスクリプト失敗時に終了 |
build.sh の内部動作
参照のみ — これらのステップを手動で実行しないこと:
cd viz/
# 1. Platform detection: sets R_CONFIG_ACTIVE (wsl, docker, or unset)
# 2. R binary selection: WSL → /usr/local/bin/Rscript, Docker → same, native → Rscript
# 3. $RSCRIPT generate-palette-colors.R
# 4. node build-data.js
# 5. node build-icon-manifest.js --type all
# 6. $RSCRIPT build-all-icons.R "$@" (flags passed through)
# 7. node build-terminal-glyphs.js
Docker代替手段
パイプラインはDocker内でも実行可能:
cd viz
docker compose up --build
これは分離されたLinux環境でフルパイプラインを実行し、ポート8080で結果を提供する。
検証チェックリスト
-
bash viz/build.shを実行した(裸のRscriptではない) - パレットカラーが生成されている(JSON + JS)
- レジストリからデータファイルが構築されている
- データからマニフェストが生成されている
- 対象タイプとパレットのアイコンがレンダリングされている
- ファイル数が期待値と一致している
- ファイルサイズが想定範囲内(2〜80 KB)
よくある落とし穴
- Rscript を直接呼び出す:
Rscript build-icons.RやRscript generate-palette-colors.Rを手動で実行してはならない。常にbash build.sh [flags]を使用する。Rscript を直接呼び出すと、プラットフォーム検出がバイパスされ、誤ったRバイナリが使用される可能性がある(/usr/local/bin/Rscriptの WSL ネイティブ R ではなく、~/bin/Rscriptラッパー経由の Windows R が使用される)。注意: CLAUDE.md およびガイド内の Windows R パスはMCP サーバー構成専用であり、ビルドスクリプト用ではない。 - 間違った作業ディレクトリ:
build.shは自動的に自身のディレクトリに cd する(cd "$(dirname "$0")")ため、どこからでも呼び出せる: プロジェクトルートからのbash viz/build.shは正しく動作する。 - 古いマニフェスト:
build.shはステップ 1-5 を順番に実行するため、マニフェストはレンダリング前に常に再生成される。レンダリングなしでマニフェストだけが必要な場合は、node viz/build-data.js && node viz/build-icon-manifest.jsを使用する(Node のステップには R は不要)。 - renvが有効化されていない:
.Rprofileの回避策はviz/からの実行を必要とする —build.shがこれを処理する。--vanillaフラグの使用や別のディレクトリからの R の実行はスキップされる。 - Windows上の並列処理: Windowsはフォークベースの並列処理をサポートしない — パイプラインは
config.ymlを通じてmultisessionを自動選択する。
関連スキル
- audit-icon-pipeline — レンダリング前に欠落グリフとアイコンを検出する
- create-glyph — アイコンが欠落しているエンティティ用の新しいグリフ関数を作成する
- enhance-glyph — 再レンダリング前に既存グリフを改善する
GitHub 仓库
相关推荐技能
content-collections
元Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。
polymarket
元这个Claude Skill为开发者提供完整的Polymarket预测市场开发支持,涵盖API调用、交易执行和市场数据分析。关键特性包括实时WebSocket数据流,可监控实时交易、订单和市场动态。开发者可用它构建预测市场应用、实施交易策略并集成实时市场预测功能。
creating-opencode-plugins
元该Skill帮助开发者创建OpenCode插件,用于接入命令、文件、LSP等25+种事件。它提供了插件结构、事件API规范和JavaScript/TypeScript实现模式,适合需要拦截操作、扩展功能或自定义事件处理的场景。开发者可通过它快速构建响应式模块来增强OpenCode AI助手的能力。
sglang
元SGLang是一个专为LLM设计的高性能推理框架,特别适用于需要结构化输出的场景。它通过RadixAttention前缀缓存技术,在处理JSON、正则表达式、工具调用等具有重复前缀的复杂工作流时,能实现极速生成。如果你正在构建智能体或多轮对话系统,并追求远超vLLM的推理性能,SGLang是理想选择。
