Communityコーディング&開発github.com

charlie947/show-me

説明する代わりに答えを表示するClaudeスキル。計画、比較、オプションをページとしてレンダリングし、ブラウザで開きます。

show-me とは?

このスキルは、Claude AIエージェントがテキストで説明する代わりに、視覚的に情報を表示するためのものです。計画、比較、オプションなどの複雑な情報を、整理されたHTMLページとしてレンダリングし、ブラウザで直接開くことができます。これにより、開発者は設計案やアーキテクチャの比較、デプロイオプションなどを直感的に理解しやすくなります。Cursor、Codex、Claude Codeなどの主要なAIエージェントプラットフォームで動作するよう設計されており、`mcp`サーバーを介してファイルを生成し、ブラウザで表示します。SKILL.mdには、スキルの設定方法と使用例が記載されており、特に**Plan**(計画)、**Compare**(比較)、**Options**(オプション)の3つの主要なユースケースに焦点を当てています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add charlie947/show-me

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

show-me は何をしますか?

説明する代わりに答えを表示するClaudeスキル。計画、比較、オプションをページとしてレンダリングし、ブラウザで開きます。

概要

このスキルは、Claudeがテキストで説明する代わりに、視覚的に情報を表示できるようにします。以下のような場合に特に便利です:

  • 計画:複数ステップの計画をインタラクティブなチェックリストとして表示
  • 比較:2つ以上のオプションをサイドバイサイドで比較
  • オプション:選択肢を明確に提示

セットアップ

  1. スキルを有効にします。
  2. mcpサーバーが設定されていることを確認します。
  3. 以下のコマンドでテストします:
claude show-me "Plan: 新しい機能の実装手順を表示"

使用方法

計画の表示

リリース計画をPlanとして表示してください。

比較の表示

ReactとVueをCompareとして表示してください。

オプションの表示

デプロイオプションをOptionsとして表示してください。

仕組み

このスキルは、mcpサーバーを使用してHTMLファイルを生成し、それをブラウザで開きます。生成されるページは、情報を整理して視覚的に表示するように設計されています。

対応プラットフォーム

  • Claude Code
  • Cursor
  • Codex
  • その他のmcp対応AIエージェント

関連スキル