コンテンツにスキップ
Vantage
English
Esc
navigateopen⌘Jpreview
このページの内容

Agents and Skills

The Claude Code agent skills bundled with Vantage. Place them into your app with vantage add skill (the project root by default, or anywhere via --dir, e.g. .claude/skills) to teach agents step-by-step workflows.

Vantage bundles Claude Code agent skills. A skill packages a step-by-step workflow so an agent can pull it in exactly when it’s needed. Unlike static reference material (these docs), a skill hands the agent a reproducible procedure.

What’s bundled

All of these target an agent that is building a Vantage app.

skill Workflow it covers
vantage-app Creating an app, and growing a single-file index.tsx SPA into a fullstack app with server/api, nested layouts, dynamic routes, and 404/error pages
vantage-add-feature Adding a page / API / UI / block (vantage add through to check / routes)
vantage-pitfalls A pitfalls reference (Base UI ≠ Radix, SelectValue behavior, never importing server/ from the client, and more)
project-storage Working with Squadbase Project Storage (uploaded files) from the browser — listing, embedding images / video / PDFs, uploading. For apps running on Squadbase

Placing them

The skills ship inside the @squadbase/vantage package. vantage add skill copies them into your app. They land directly under the project root by default; --dir puts them elsewhere.

vantage add skill                             # list the skills and where they sit (writes nothing)
vantage add skill --all                       # every skill that isn't placed yet, under the root
vantage add skill vantage-app                 # a single skill by name
vantage add skill --all --dir .claude/skills  # where Claude Code looks for them
vantage add skill --all --force               # refresh the placed copies in place

The destination is scanned for, not assumed. add skill walks the project first (skipping node_modules and friends) and skips any skill that is already placed, reporting where it is — under the root, under .claude/skills/, under .squadbase/skills/, it doesn’t matter, so re-running never creates a second copy. Drop the name to get just the list:

$ vantage add skill
Bundled skills:
  project-storage      .claude/skills/project-storage/
  vantage-add-feature  .claude/skills/vantage-add-feature/
  vantage-app          .claude/skills/vantage-app/
  vantage-pitfalls     not placed

With --force, the copies that were found are rewritten where they are (an explicit --dir still wins as the destination).

A --dir path resolves from the project root (absolute paths work too). To have Claude Code pick them up automatically, place them in .claude/skills/:

your-app/
├── index.tsx
├── package.json
└── .claude/
    └── skills/
        ├── vantage-app/SKILL.md
        ├── vantage-add-feature/SKILL.md
        ├── vantage-pitfalls/SKILL.md
        └── project-storage/SKILL.md

Claude Code discovers .claude/skills/ automatically. The agent loads and follows the matching skill based on the task at hand. For other agents, pass whatever directory that tool expects to --dir.

Distribution and updates

  • The source of truth lives in the package. Skills are distributed and updated together with the framework version, so bumping @squadbase/vantage gets you the latest procedures. To refresh copies you’ve already placed, run vantage add skill --all --force — the destination is scanned for, so you don’t have to remember the --dir you used originally.
  • The Squadbase template ships them pre-placed. Apps created from the template already contain .claude/skills/. For a hand-made app, add them with vantage add skill.

AGENTS.md (the app map)

If a skill is a procedure, AGENTS.md is the map an agent reads first. It gathers Vantage’s invariants, the import-subpath map, routing conventions, and the minimal data-fetching / API / env recipes onto a single page — enough to build a minimal app from that page alone. Deeper procedures are delegated to the skills above by name, so nothing is duplicated.

Like the skills, its source of truth lives in the package, and vantage add agents places it into the app root.

vantage add agents           # place AGENTS.md into the app root
vantage add agents --force    # overwrite an existing copy

A placed AGENTS.md is kept in sync by vantage upgrade (it rewrites only when the content differs, and never creates the file in an app that hasn’t opted in). When a framework convention changes, a single source-of-truth edit reaches apps through upgrade. The Squadbase template ships it pre-placed.

Separation of concerns

Skills own step-by-step workflows only. They stay distinct from — and avoid duplicating — the following:

  • These docs (spec and reference) — a static explanation of what exists and how it behaves. An agent without a browser reads the same content through vantage docs (vantage docs button for the prop table, vantage docs --json for machine-readable output, vantage search <what you want> when the name is unknown).
  • AGENTS.md (a static map) — where things live and how the project is laid out; placed with vantage add agents.
  • Each other — shared material like pitfalls is not copied into every skill; skills cross-reference by name instead (e.g. vantage-app’s procedure points at vantage-pitfalls).

このページは役に立ちましたか?