# Visualize Repo

Open or create a repo-native visual documentation workspace backed by local Plan MDX...

- Repository: https://github.com/BuilderIO/agent-native (7579 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add BuilderIO/agent-native --skill visualize-repo -g -a claude-code -y`
Codex: `npx skills add BuilderIO/agent-native --skill visualize-repo -g -a codex -y`
Cursor: `npx skills add BuilderIO/agent-native --skill visualize-repo -g -a cursor -y`
Gemini CLI: `npx skills add BuilderIO/agent-native --skill visualize-repo -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add BuilderIO/agent-native`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

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

Useful variants:

```bash
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:

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

## Agent Workflow

The rest: https://github.com/BuilderIO/agent-native/blob/HEAD/.agents/plugins/agent-native-visual-plans/skills/visualize-repo/SKILL.md