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    # Convert a single file
/opt-datagrid-install migrate --dry-run
/opt-datagrid-install example 

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.4.2). Fallback: agent-rules.md bundled with this skill. Wrap content between:

…content from source…

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 18+, React 19+, bun or npm.
3. TypeScript paths — wire @reopt-ai/opt-datagrid into tsconfig.json paths if the project uses path aliases.
4. opt-ui theme — opt-datagrid consumes opt-ui CSS variable tokens. If opt-ui is not installed yet, run /opt-ui-install first.

Step 3 — Route to module docs

| Task signal | Read | |---|---| | Start here — doc index | dist/docs/index.md | | Getting started / install / upgrade | dist/docs/01-getting-started.md | | API reference (props, columns, editors, hooks, types) | dist/docs/02-api/ | | Column patterns | dist/docs/02-api/02-columns.md | | Recipes (basic / editable / remote-data) | dist/docs/03-recipes/ | | Migration (from glide-data-grid, etc.) | dist/docs/04-migration/ | | Troubleshooting | dist/docs/05-troubleshooting.md | | Theme integration (opt-ui tokens) | opt-ui dist/docs/04-theming.md |

Pipeline (auto-branch)

| # | Step | Init | Upgrade | Migrate | |---|---|---|---|---| | 1 | Detect current state | ✓ | ✓ | ✓ | | 2 | Public-registry preflight + legacy override cleanup | ✓ | ✓ | ✓ | | 3 | Install / update package | ✓ | ✓ | ✓ | | 4 | TypeScript paths | ✓ | – | ✓ | | 5 | Breaking-change edits | – | ✓ | – | | 6 | Deprecated cleanup (opt-in) | – | ✓ | – | | 7 | Grid migration | – | – | ✓ | | 8 | Generate example | ✓ | – | – | | 9 | Verify + summary | ✓ | ✓ | ✓ |

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 opt-ui theme applied (no raw colors leaking).
3. (Migrate) the converted file renders the same rows + columns as the source; spot-check sorting / selection / editing.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: reopt-ai
• Source: reopt-ai/reopt-skills
• License: MIT
• Homepage: https://skills.sh/reopt-ai/reopt-skills

Install and usage instructions live in the source repository linked above.