スキル一覧に戻る

enhance-glyph

pjt222
更新日 2 days ago
3 閲覧
17
2
17
GitHubで表示
メタdesign

について

このスキルは、既存のRベースのピクトグラムグリフを可視化向けに監査・改善します。不適切なプロポーション、小サイズでの可読性の問題、バランスの悪いネオングロー効果など、諸問題を診断・修正します。開発者は、パイプライン変更後やグリフの視覚的メタファーが不明確な場合に、スキル、エージェント、またはチームグリフを洗練するために使用すべきです。

クイックインストール

Claude Code

推奨
メイン
npx skills add pjt222/agent-almanac -a claude-code
プラグインコマンド代替
/plugin add https://github.com/pjt222/agent-almanac
Git クローン代替
git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/enhance-glyph

このコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします

ドキュメント

Enhance Glyph

Improve existing pictogram glyph in viz/ → audit render, diagnose issues, targeted mods, re-render, compare before/after. Works skill/agent/team.

Use When

  • Glyph renders poor small sizes (details lost, shapes merge)
  • Metaphor unclear / mismatch entity
  • Proportion issues (too big/small, off-center)
  • Neon glow overpowers or underwhelms
  • Good in 1 palette, poor others
  • Batch improve after new palettes / pipeline change

In

  • Required: Entity type — skill, agent, team
  • Required: Entity ID (e.g., commit-changes, mystic, tending)
  • Required: Specific issue (readability, proportions, glow, palette compat)
  • Optional: Reference glyph showing desired quality
  • Optional: Target palette(s) (default: all)

Do

Step 1: Audit

Examine current, identify issues.

  1. Locate glyph fn by entity type:
    • Skills: viz/R/primitives*.R (19 domain files), map viz/R/glyphs.R
    • Agents: viz/R/agent_primitives.R, map viz/R/agent_glyphs.R
    • Teams: viz/R/team_primitives.R, map viz/R/team_glyphs.R
  2. Read fn structure:
    • How many layers?
    • Which primitives?
    • Scale + position?
  3. View rendered output:
    • Skills: viz/public/icons/cyberpunk/<domain>/<skillId>.webp
    • Agents: viz/public/icons/cyberpunk/agents/<agentId>.webp
    • Teams: viz/public/icons/cyberpunk/teams/<teamId>.webp
    • Check 2-3 other palettes
    • View icon (~48px) + panel (~160px)
  4. Score on quality dimensions:
Glyph Quality Dimensions:
+----------------+------+-----------------------------------------------+
| Dimension      | 1-5  | Assessment Criteria                           |
+----------------+------+-----------------------------------------------+
| Readability    |      | Recognizable at 48px? Clear at 160px?         |
| Proportions    |      | Well-centered? Good use of the 100x100 canvas?|
| Metaphor       |      | Does the shape clearly represent the entity?   |
| Glow balance   |      | Glow enhances without overwhelming?            |
| Palette compat |      | Looks good across cyberpunk + viridis palettes?|
| Complexity     |      | Appropriate layer count (not too busy/sparse)? |
+----------------+------+-----------------------------------------------+
  1. Identify 1-2 lowest dims → enhancement targets

→ Clear diagnosis. Specific: "proportions: uses 40% canvas" not "looks bad."

If err: fn missing or entity not in *_glyphs.R → glyph not created → use create-glyph.

Step 2: Diagnose

Root cause.

  1. Readability:
    • Too many fine details merge small?
    • Low contrast between elements?
    • Lines too thin (< 1.5 size at s=1.0)?
    • Elements too close?
  2. Proportion:
    • Scale s too small/large?
    • Center offset from (50, 50)?
    • Elements beyond safe area (10-90)?
  3. Glow:
    • Stroke width + ggfx::with_outer_glow():
      • Thin lines → glow fuzzy
      • Thick fills → excessive bloom
    • Multiple overlapping → compound glow hot spots
  4. Palette compat:
    • Hardcoded colors not col/bright?
    • Low-contrast palettes (cividis, mako) make invisible?
    • Relies on color variation some palettes lack?
  5. Document specific root cause each issue

→ Root causes point to code changes. "Too small" → "s=0.6, should be 0.8." "Glow overwhelms" → "3 overlapping filled polygons each generate glow."

If err: root cause not obvious from code → render isolation w/ diff params. render_glyph() single glyph to test.

Step 3: Modify

Edit fn → targeted fixes.

  1. Open file containing fn
  2. Mods per diagnosis:
    • Scale/proportion: Adjust s multiplier or element offsets
    • Readability: Simplify, increase stroke width, spacing
    • Glow balance: Reduce overlapping fills, outlines where bloom
    • Palette compat: All colors from col/bright, alpha for depth
  3. Follow contract:
    glyph_name <- function(cx, cy, s, col, bright) {
      # cx, cy = center (50, 50)
      # s = scale (1.0 = ~70% of canvas)
      # col = domain color, bright = brightened variant
      # Returns: list() of ggplot2 layers
    }
    
  4. Preserve signature — no param change
  5. Minimal mods — fix diagnosed, no redesign

→ Modified fn addresses Step 1-2 issues. Targeted + minimal.

If err: mods make other dims worse → revert, try diff. Needs redesign → create-glyph.

Step 4: Re-render

Render + verify. Always build.sh → handles platform + R binary. See render-icon-pipeline for flags.

  1. Re-render by entity:

    # From project root — use --no-cache to force re-render of modified glyph
    bash viz/build.sh --only <domain> --no-cache          # skills
    bash viz/build.sh --type agent --only <id> --no-cache # agents
    bash viz/build.sh --type team --only <id> --no-cache  # teams
    
  2. Verify output exists each palette

  3. Check sizes — icons 2-15 KB (WebP):

    • Under 2 KB: too simple or render failed
    • Over 15 KB: too complex (too many layers)

→ Fresh icons each palette. Sizes in range.

If err: build errs → R console for specific. Common: missing paren, undefined primitives, non-list return. Renders but blank → layers outside canvas.

Step 5: Compare

Verify enhancement improved targets.

  1. Compare old/new:
    • Cyberpunk at icon (48px) + panel (160px)
    • ≥2 other palettes (light = turbo, dark = mako)
  2. Re-score dims from Step 1:
    • Target dims ↑ ≥1 pt
    • Non-target dims no ↓
  3. If in force-graph, test there:
    • HTTP server: python3 -m http.server 8080 from viz/
    • Load graph, find entity node
    • Verify renders default zoom + zoomed in
  4. Document changes + improvement

→ Measurable improvement on targets, no regression others. Better both sizes + all palettes.

If err: marginal improvement or regression → revert, reconsider diagnosis. Sometimes orig limit = inherent to metaphor → metaphor itself needs change (escalate create-glyph).

Check

  • Audited w/ specific issue diagnosis
  • Root cause each issue
  • Mods targeted to diagnosed (no over-edit)
  • Fn contract preserved (sig unchanged)
  • Re-rendered all palettes
  • Before/after shows target improvement
  • No regression non-target
  • Sizes 2-15 KB WebP
  • Renders correctly force-graph (if applicable)

Traps

  • Over-enhance: Fix 1 + tweak all. Stick to diagnosed.
  • Break contract: Sig change breaks pipeline. 5-param contract immutable.
  • Palette-specific opt: Perfect cyberpunk but poor viridis. Check 3+ palettes.
  • Ignore small-size: Beautiful 160px that blobs at 48px = fail.
  • Forget re-render: Edit fn no build → changes invisible.
  • Wrong build cmd: Skills build-icons.R, agents build-agent-icons.R, teams build-team-icons.R.

GitHub リポジトリ

pjt222/agent-almanac
パス: i18n/caveman-ultra/skills/enhance-glyph
0
agentsagentskillsai-assisted-developmentclaude-codeskillsteams

関連スキル

content-collections

メタ

このスキルは、Content Collections(Markdown/MDXファイルを型安全なデータコレクションに変換するTypeScriptファーストのツール)の本番環境でテストされた設定を提供します。Zodバリデーションによる型安全性を実現し、ブログ、ドキュメントサイト、コンテンツ重視のVite + Reactアプリケーション構築時にご利用ください。Viteプラグインの設定、MDXコンパイルから、デプロイ最適化、スキーマバリデーションまで、すべてを網羅しています。

スキルを見る

polymarket

メタ

このスキルは、開発者がPolymarket予測市場プラットフォームを活用したアプリケーション構築を可能にします。API統合による取引や市場データの取得に加え、WebSocketを介したリアルタイムデータストリーミングにより、ライブ取引や市場活動を監視できます。取引戦略の実装や、ライブ市場更新を処理するツールの作成にご利用ください。

スキルを見る

creating-opencode-plugins

メタ

このスキルは、開発者がコマンド、ファイル、LSP操作など25種類以上のイベントタイプにフックするOpenCodeプラグインを作成することを支援します。JavaScript/TypeScriptモジュール向けに、プラグイン構造、イベントAPI仕様、および実装パターンを提供します。カスタムイベント駆動ロジックでOpenCode AIアシスタントのライフサイクルをインターセプト、監視、または拡張する必要がある場合にご利用ください。

スキルを見る

sglang

メタ

SGLangは、高性能なLLMサービングフレームワークであり、RadixAttentionプレフィックスキャッシュを活用したJSON、正規表現、エージェントワークフロー向けの高速で構造化された生成を特長とします。特にプレフィックスが繰り返されるタスクにおいて、大幅に高速な推論を実現し、複雑な構造化出力やマルチターン対話に最適です。制約付きデコードが必要な場合や、広範なプレフィックス共有を伴うアプリケーションを構築する場合は、vLLMなどの代替案ではなくSGLangを選択してください。

スキルを見る