Opt Datagrid Install

opt-datagrid Install

This is NOT the opt-datagrid you know. Read node_modules/@reopt-ai/opt-datagrid/dist/docs/ before writing code.

When to apply

Consumer project depends on @reopt-ai/opt-datagrid, or is migrating away from another grid library. Triggers: "install", "init", "setup", "upgrade", "update", "migrate", "replace glide-data-grid", "replace ag-grid".

Invocation

/opt-datagrid-install                  # Auto-branch (missing → init, installed → upgrade)
/opt-datagrid-install install          # Explicit install only
/opt-datagrid-install verify           # Verify existing installation
/opt-datagrid-install --upgrade        # Explicit upgrade
/opt-datagrid-install --check          # Analyze only
/opt-datagrid-install --target=1.3.0   # Pin a specific version
/opt-datagrid-install migrate          # Convert existing grid usage
/opt-datagrid-install migrate <file>   # Convert a single file
/opt-datagrid-install migrate --dry-run
/opt-datagrid-install example <pattern>

Step 1 — Pin agent rules into AGENTS.md / CLAUDE.md

Source: the module's own agent-rules file once it ships one (@reopt-ai/opt-datagrid does not, as of 1.6.1). Fallback: agent-rules.md bundled with this skill. Wrap content between:

<!-- BEGIN:reopt/opt-datagrid-agent-rules -->
…content from source…
<!-- END:reopt/opt-datagrid-agent-rules -->

Idempotent: replace only between markers.

Step 2 — Consumer-side setup (this skill owns; docs cannot)

1. Public npm registry — no token or scoped .npmrc entry is required. Inspect the project .npmrc and npm config get @reopt-ai:registry; if the scope still resolves to GitHub Packages, remove only the legacy project entry @reopt-ai:registry=https://npm.pkg.github.com. Preserve unrelated registry/auth settings, and ask before changing user/global npm config.
2. Prereqs — Node 20+, React 19+, bun or npm.
3. Import path — use the published package entry points; an npm install needs no tsconfig.json path alias. Remove aliases into monorepo packages/opt-datagrid/src paths.
4. Theme — opt-datagrid reads opt-ui CSS tokens when present and has standalone fallbacks. Run /opt-ui-install only when the project wants the shared design-system theme; do not make opt-ui a requirement for a standalone grid.
5. Chrome (1.6+) — column visibility, row density, and fullscreen ship as DataGridToolbar / useDataGridToolbar from the dedicated @reopt-ai/opt-datagrid/toolbar entry point (controlled or uncontrolled, with locked identity columns). Wire it instead of hand-building toolbar state; column hooks cover resize / reorder / visibility chrome.
6. Sizing — height defaults to 420 and the grid does not fill its container when it is omitted; pass an explicit height or a measured container size. Row backgrounds from getRowThemeOverride are plain CSS applied through the --opt-surface custom property, not DataGridTheme keys (docs corrected in 1.6.1 — older getting-started text said the opposite).

Step 3 — Route to module docs

Pipeline (auto-branch)

Safety

• Never upgrade without an impact scan (run --check first).
• Migrate processes files one at a time — convert one, wait for approval, then continue.
• Apply breaking-change edits in logical groups, never bulk.
• Do not finish until tsc --noEmit passes.
• Never commit — do not commit or push without an explicit request.

Verify

1. npx tsc --noEmit passes.
2. Grid renders with either opt-ui tokens or the supported standalone fallbacks (no raw-color overrides of grid internals).
3. (Migrate) the converted file renders the same rows + columns as the source; spot-check sorting / selection / editing.