Skip to content
cccskills
FreePublished on GitHub

visualize-repo

Create a visual documentation workspace inside a repository for APIs, data models, components, and flows. Reviewers can inspect the docs and leave comments that guide matching code changes.

OriginalShow the original 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.

BuilderIO/agent-native7,527 stars(GitHub 7,527 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Documenting repository APIs and data models
  • Mapping a component or user flow
  • Reviewing visual docs before code changes

Files included (1)

  • SKILL.md3.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

a2a-assets

FreeSummary

Generate, refine, export, and place brand images or videos from an Assets library into another app. The skill covers choosing a library, handling image batches and video runs, and updating selected assets after feedback.

  • Generate brand images for slides or another app
  • Refine an existing asset after feedback
  • Create and export a video asset
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

account-health

FreeSummary

Prepare a customer account health, renewal, or contract usage readout. Verify the account identity, use approved metric definitions, compare contracted capacity with actual usage, and trace findings to sources, time windows, and known gaps.

  • Preparing a named customer's account health review
  • Comparing contracted seats or capacity with usage
  • Gathering adoption signals before a renewal or QBR
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

actions

FreeSummary

Create focused app actions that agents can call as tools and frontend code can use through client hooks. Use them to add provider integrations or fetch UI data, with validated inputs and structured results.

  • Adding a new app operation
  • Connecting an external provider API
  • Fetching data for a frontend view
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adding-a-feature

FreeSummary

Use this checklist when adding a feature or integration to an agent-native app. It covers the user interface, agent-callable actions, instructions, and app-state sync so both the user and agent can work with the capability consistently.

  • Planning a new feature across UI and agent actions
  • Checking that agent changes appear in the UI
  • Documenting actions and feature state for the agent
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adhoc-analysis

FreeSummary

Investigate complex questions by combining data from multiple sources, then summarize patterns, metrics, and evidence in a clear report. Save requested analyses as dashboards with instructions for future refreshes.

  • Comparing CRM deals with call records
  • Investigating customer health across systems
  • Saving a repeatable performance analysis
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

admin-surfaces

FreeSummary

Use the Analytics admin surfaces to inspect and change workspace feature flags, review dashboard ownership and usage activity, or browse and edit databases connected from other agent-native apps. The skill guides administrators to the relevant view and actions.

  • Review dashboard owners, views, and edits
  • Change a workspace feature flag for an app
  • Browse or edit a connected app database
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

See all skills by BuilderIO

Report a problem with this skill