andyed/muriel

muriel は何をしますか？

Claudeに、ラスター、SVG、Web、動画、ターミナル、インタラクティブ、視線プロット、ヒートマップ、科学図表など、12種類の可視化構築ツールの使い方を教えます。ブランドトークンと8:1コントラスト監査が組み込まれています。

概要

このスキルは、AIエージェントが多様な可視化フォーマットを生成・操作できるように設計されています。各ツールは特定のユースケースに最適化されており、ブランド一貫性とアクセシビリティを確保するための機能が組み込まれています。

サポートされる可視化ツール

• ラスター画像: PNG、JPEG、GIFなどのピクセルベース画像の生成と編集
• SVG: スケーラブルベクターグラフィックスの作成と操作
• Web: HTML/CSS/JSを使用したインタラクティブWeb可視化
• 動画: アニメーションや動画コンテンツの生成
• ターミナル: ターミナル上で動作するASCIIアートやチャート
• インタラクティブ: ユーザー操作に応答する可視化
• 視線プロット: 視線追跡データの可視化
• ヒートマップ: データ密度や相関を色で表現
• 科学図表: 論文やプレゼンテーション向け科学図

ブランドトークン

ブランドトークンは、組織のブランドガイドラインを定義する一連の変数です。代表的なトークン:

• primaryColor: プライマリカラー
• secondaryColor: セカンダリカラー
• fontFamily: 使用フォント
• backgroundColor: 背景色
• textColor: テキスト色

コントラスト監査

すべての可視化は、WCAG 2.1 AA基準に従い、8:1のコントラスト比を満たしているか自動的に監査されます。違反がある場合は警告が表示され、修正提案が行われます。

使用例

# ブランドトークンの設定例
brand_tokens = {
    "primaryColor": "#0055A4",
    "secondaryColor": "#FF6600",
    "fontFamily": "Arial, sans-serif"
}

# コントラスト監査の実行
audit_result = check_contrast_ratio(foreground="#0055A4", background="#FFFFFF")
print(audit_result)  # コントラスト比と適合/不適合を出力

インストール

# スキルのインストール方法（例）
muriel install

貢献

バグ報告や機能リクエストは、GitHub Issues にてお願いします。