本文へ移動
cccskills
無料GitHub で公開

visual-flow-gif

Create animated flow diagrams from articles, workflow notes, architecture sketches, or process descriptions using a JSON specification and a local Python/Pillow renderer. Use when the user wants to turn source material into a static PNG + animated GIF diagram.

AI-Builder-Club/skills
インストール方法を見る

含まれるファイル（6）

  • SKILL.md3.3 KB
  • assets/dark-spec.json6.8 KB
  • assets/default-spec.json6.8 KB
  • references/spec-format.md3.7 KB
  • requirements.txt15 B
  • scripts/render_animated_gif.py25.6 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Visual Flow GIF

Use this skill when a user wants to turn source material into a clear animated flow diagram.

The output should include:

  • A static PNG diagram.
  • An animated GIF with visible motion.
  • The JSON spec used to render the diagram when useful for later edits.

Workflow

  1. Read the source material and identify the system.

    • Inputs, outputs, actors, modules, tools, stores, and feedback loops.
    • Main steps, decision points, shared artifacts, and arrow direction.
    • Any visual constraints from a reference image.

  2. Create a JSON spec.

    • Start from ${CLAUDE_PLUGIN_ROOT}/skills/visual-flow-gif/assets/default-spec.json for the default light theme.
    • Start from ${CLAUDE_PLUGIN_ROOT}/skills/visual-flow-gif/assets/dark-spec.json only when the user asks for a dark version.
    • Use short English labels unless the user asks for another language.
    • Use explicit x, y, w, and h values for predictable layout.
    • Use custom multi-point paths for routed arrows. Corners are rounded by default.
    • Add important modules to animation.pulses; pulse highlights are strong by default.
    • See ${CLAUDE_PLUGIN_ROOT}/skills/visual-flow-gif/references/spec-format.md for field details.

  3. Render the diagram.

    Requires Python 3.10+ and Pillow 10+. If Pillow is missing, install it first: python3 -m pip install -r ${CLAUDE_PLUGIN_ROOT}/skills/visual-flow-gif/requirements.txt

python3 ${CLAUDE_PLUGIN_ROOT}/skills/visual-flow-gif/scripts/render_animated_gif.py \
  --spec /path/to/spec.json \
  --outdir /path/to/output \
  --basename diagram \
  --verify \
  --check
  1. Inspect the PNG and GIF before delivery.
    • Text is readable and not clipped.
    • Labels and arrows do not overlap important content.
    • Arrow directions match the source material.
    • The GIF has visible motion.
    • Pulse highlights are clearly visible in both light and dark modes.
    • The full system fits inside the frame.

Style Guide

  • Prefer a clean technical diagram with a lightweight editorial feel.
  • Use the light theme by default.
  • Use the dark theme only when the user asks for a dark version.
  • Prefer Excalifont when available; the renderer falls back automatically.
  • Keep important labels bold enough to scan quickly.
  • Use rounded routed arrows instead of hard right-angle turns.
  • Use color to separate roles:
    • Blue for core process areas.
    • Green for active loops, tools, memory, or operational panels.
    • Purple for shared layers, archives, or internal systems.
    • Red for friction, risk, warnings, or signals.
  • Keep node labels short and concrete.
  • Do not invent structure, metrics, claims, or arrow direction that is not present in the source.

Quality Bar

Always run with --verify --check before delivery.

--verify prints sampled frame differences so the GIF animation can be confirmed.

--check validates that:

  • PNG and GIF files exist.
  • Output dimensions match the spec.
  • GIF frame count matches the spec.
  • Sampled frames contain visible motion.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

agent-context-audit

無料

Audit a repo's agent context — CLAUDE.md files, codebase docs, skills, and tool/MCP designs — against Anthropic's Claude 5 context-engineering guidance ("unhobbling": Anthropic cut ~80% of Claude Code's system prompt with no eval loss). Finds overconstraint, conflicting instructions, redundancy, stale facts, and missing "unknown knowns"; produces a scored findings report with concrete rewrites, then applies approved fixes. Use when someone says "audit my CLAUDE.md", "context audit", "unhobble this repo", "review our agent docs/skills/tools", or after upgrading to Claude 5-generation models.

日本語の概要は準備中です。原文の説明を表示しています。

AI-Builder-Club/skills1,2912026年9月16日 更新

crabbox-setup

無料

Scaffold an isolated CLOUD dev box per agent (via crabbox + Daytona) for any codebase — the parallel-safe counterpart to dev-local-setup. Each agent gets its own full stack (own DB + dev server) and an in-box browser for e2e, so concurrent loops never collide on ports/state. Sets up the snapshot image, .crabbox.yaml, an idempotent setup.sh (also boots the stack locally), and a cbx.sh wrapper. Use when the user says "set up crabbox", "give each agent its own box", "add cloud testing", "make this repo testable in the cloud / on Daytona", "parallel-test this", or when setup-codebase-harness needs true per-agent isolation.

日本語の概要は準備中です。原文の説明を表示しています。

AI-Builder-Club/skills1,2912026年9月16日 更新

dev-local-setup

無料

Scaffold a one-command `dev-local` launcher for ANY codebase. Investigates the repo to find its services, ports, and infra dependencies, then generates a single `scripts/dev-local.sh` (up/down/status/logs/restart) that runs every dev server in one tmux session, plus a short skill doc describing it. Use when someone says "set up dev-local", "make a one-command dev launcher", "I want one script to start this repo", "scaffold dev-local for this project".

日本語の概要は準備中です。原文の説明を表示しています。

AI-Builder-Club/skills1,2912026年9月16日 更新

e2e-setup

無料

Set up an end-to-end test suite in any repo, following practices that make e2e a reliable per-PR gate: real flows over bypass, layered assertions, a reusable auth/session helper, video+trace evidence, and a compounding suite. Use when a repo has no e2e (or weak e2e) and you want system-level tests — "set up e2e", "add end-to-end tests", "scaffold a test gate".

日本語の概要は準備中です。原文の説明を表示しています。

AI-Builder-Club/skills1,2912026年9月16日 更新

karaoke-captions

無料

Generate TikTok/Shorts-style karaoke captions using MLX Whisper, ASS subtitles, and FFmpeg libass. Use when burning word-level highlight captions into a video, matching caption style from a screenshot, rendering ASS karaoke subtitles, or when the user runs /karaoke-captions.

日本語の概要は準備中です。原文の説明を表示しています。

AI-Builder-Club/skills1,2912026年9月16日 更新

new-loop

無料

Spin up a new loop (domain) in a file-based knowledge base — bootstrap the substrate if it's missing, gather the loop's charter, scaffold domains/<loop>/README.md, then do ONE real test run and record it in the loop's Timeline and LOG.md. Use when the user says "set up a new loop", "create a domain", "start a new beat/workstream", or names a recurring job they want the agent to own.

日本語の概要は準備中です。原文の説明を表示しています。

AI-Builder-Club/skills1,2912026年9月16日 更新

AI-Builder-Club のスキルをすべて見る

このスキルの問題を報告する