本文へ移動
cccskills
無料GitHub で公開日本語紹介

visualize-repo

リポジトリ内のAPIや画面構成を図や仕様書で整理し、レビューコメントをコード変更につなげるための視覚的なドキュメント環境を整えます。

原文原文の説明を見る

Open or create a repo-native visual documentation workspace backed by local Plan MDX files. Use when the user asks to visualize a repository, create durable visual docs for APIs/components/models/flows, launch a visual repo viewer, review repo docs like a visual IDE, or collect Plan comments that should become coding-agent changes.

BuilderIO/agent-nativeスター 7,525(GitHub 7,525 + cccskills 0)

実行スコア 未検証

インストール方法を見る

こんなときに便利

  • API仕様を図で整理したいとき
  • 画面や処理フローを可視化したいとき
  • レビューコメントをコード変更につなげたいとき

日本語での紹介

できること

リポジトリ内に、ソース管理できる視覚的なドキュメント環境を用意します。APIには仕様、データモデルにはスキーマの表示、画面やフローにはワイヤーフレーム、構成には図を追加できます。Planのローカルブリッジを通じてドキュメントを表示し、レビューコメントを comments.json に集められます。コメントを受けて作業するときは、対応するコードとMDXの両方を更新し、実装と説明をそろえます。

こんなときに便利

リポジトリの構造や重要な仕組みを、文章だけでなく図や画面イメージで共有したいときに向いています。API、コンポーネント、モデル、処理フローなど、後から参照・更新する資料を残したいチームにも使えます。対象を絞って始め、必要な部分から整備できます。

使い方の例

  • 「このリポジトリの主要なAPIとデータモデルを図で整理して」
  • 「この画面フローのワイヤーフレームを作って、レビューできるようにして」
  • 「Planのコメントを確認して、該当するコードとドキュメントを更新して」

注意点

CLIの実行には npx @agent-native/core@latest を使います。verify はMDXをPlanアプリの公開検証アクションへ送る場合があります。ローカル外への送信を避けるには、ローカルのPlanアプリを --app-url に指定するか、verify を省略します。

この紹介文は、公開されている SKILL.md をもとに AI(OpenAI Codex)が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル(1)

  • SKILL.md3.7 KB

SKILL.md(原文)

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

Visualize Repo

/visualize-repo opens a local, source-controlled visual documentation layer for a repository. It is for durable repo understanding, not a one-off plan: components can have wireframes, APIs can have specs, models can have schema views, and reviewers can comment on those docs before sending work to a coding agent.

Default Command

Run the Agent-Native CLI from the repo root:

npx @agent-native/core@latest visualize-repo --open

Useful variants:

npx @agent-native/core@latest visualize-repo init
npx @agent-native/core@latest visualize-repo --target actions --target server/db/schema.ts
npx @agent-native/core@latest visualize-repo check
npx @agent-native/core@latest visualize-repo verify
npx @agent-native/core@latest visualize-repo --no-open

The command writes or updates agent-native.json with an apps.visualize-repo local-files section, creates a starter MDX folder at .agent-native/visual-docs/repo-overview, then serves it through the Plan local bridge. The hosted Plan UI can render the review surface, but the plan source stays in local files and bridge comments stay in comments.json.

When There Is No Manifest

If agent-native.json does not exist, let the CLI bootstrap one. It scans for high-value starting points such as actions/, app/components/, app/pages/, server/db/schema.ts, src/, packages/, templates/, docs/, and content/. Keep the first run targeted. Prefer 5-20 visualized nodes over a generated wall of repo prose.

Use explicit targets when the user already knows the important surface:

npx @agent-native/core@latest visualize-repo \
  --target actions/webhooks.ts \
  --target server/db/schema.ts \
  --target app/components/PromptComposer.tsx

Agent Workflow

  1. Inspect agent-native.json and the generated plan.mdx.
  2. Read the source anchors listed for each target before changing the visual docs.
  3. Add only the visual blocks that earn their keep: api-endpoint for stable APIs, data-model for durable schema, wireframe for user-facing components/flows, diagram for architecture, and annotated-code for load-bearing implementation.
  4. Run npx @agent-native/core@latest visualize-repo check after editing MDX.
  5. Use verify before handoff when renderer correctness matters.

When acting on comments, treat local comments.json as the feedback inbox. Agent-targeted comments should become code changes plus matching MDX updates so the visual docs and executable code stay in sync.

Privacy Boundary

visualize-repo check is local/offline lint. visualize-repo --open starts a localhost bridge and opens the Plan UI against local files; it does not publish the plan to hosted storage and performs no hosted Plan database writes. visualize-repo verify may send the MDX folder to the Plan app's public validation action so the real renderer schema can check it. For no hosted content egress, pass --app-url pointing at a local Plan app or skip verify and rely on check.

Do not call hosted Plan write tools for this workflow unless the user explicitly asks to publish or share the docs. Avoid create-visual-plan, update-visual-plan, import-visual-plan-source, patch-visual-plan-source, and get-plan-feedback for local repo docs; edit the MDX files directly and use the local bridge.

レビュー

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

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

a2a-assets

無料概要あり

複数のアプリやMCPホストからブランド画像・動画を生成、調整、書き出し、挿入する作業を支援します。ライブラリ選択や修正依頼も扱います。

  • スライド用のブランド画像を作りたいとき
  • 既存素材をフィードバックに合わせて直したいとき
  • 動画素材を生成して書き出したいとき
BuilderIO/agent-native7,5252026年10月26日 更新

account-health

無料概要あり

特定の顧客企業について、契約と製品利用の数値を照らし合わせ、根拠や不足情報を明記した健全性レポートをまとめます。

  • 顧客の健全性を確認したいとき
  • 契約席数と実利用を比べたいとき
  • 更新前に利用状況を整理したいとき
BuilderIO/agent-native7,5252026年10月26日 更新

actions

無料概要あり

アプリの操作をエージェントと画面の両方から呼び出せるアクションとして実装し、API連携や画面のデータ取得を一貫した形で追加するスキルです。

  • 新しいアプリ操作を追加したいとき
  • 外部APIと連携したいとき
  • 画面からデータを取得したいとき
BuilderIO/agent-native7,5252026年10月26日 更新

adding-a-feature

無料概要あり

新機能をUI・エージェント用アクション・説明資料・画面状態の4領域でそろえ、利用者とエージェントのどちらからも一貫して使えるようにするチェックリストです。

  • 新機能追加の作業範囲を整理したいとき
  • UIとエージェント操作をそろえたいとき
  • 画面状態の同期漏れを防ぎたいとき
BuilderIO/agent-native7,5252026年10月26日 更新

adhoc-analysis

無料概要あり

複数のデータソースを照合して、傾向や指標、根拠をまとめた分析結果を作成します。必要に応じて、再実行できるダッシュボードとして保存できます。

  • 商談と通話記録を照合したいとき
  • 顧客の利用状況を横断して調べたいとき
  • 繰り返し更新できる分析を保存したいとき
BuilderIO/agent-native7,5252026年10月26日 更新

admin-surfaces

無料概要あり

Analyticsの管理画面で、機能フラグの状態確認と切り替え、ダッシュボード利用状況の調査、接続先アプリのデータベース管理を行います。

  • アプリごとの機能フラグを確認・変更したいとき
  • ダッシュボードの所有者や利用状況を調べたいとき
  • 接続済みアプリのテーブルを管理したいとき
BuilderIO/agent-native7,5252026年10月26日 更新

BuilderIO のスキルをすべて見る

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