What is opt-datagrid-install?

An installer, upgrader, verifier, and migration guide for @reopt-ai/opt-datagrid, a package for displaying and working with data in grid form. It can also help replace several listed grid libraries.

Use it to install, update, verify, or pin opt-datagrid, migrate from Glide Data Grid, AG Grid, React Data Grid, or MUI DataGrid, and convert one file or a wider project.

It reduces the manual work of setting up the package or converting existing grid usage. It supports checking the current installation and previewing migrations before applying them.

opt-datagrid-install — Skill for Claude Code and Codex by reopt-ai

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add reopt-ai/reopt-skills --skill opt-datagrid-install

Clone the repo

git clone --depth 1 https://github.com/reopt-ai/reopt-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/reopt-ai/reopt-skills/opt-datagrid-install/github.svg)](https://agentmods.dev/skills/reopt-ai/reopt-skills/opt-datagrid-install)

Your own site

<a href="https://agentmods.dev/skills/reopt-ai/reopt-skills/opt-datagrid-install"><img src="https://agentmods.dev/badge/skills/reopt-ai/reopt-skills/opt-datagrid-install/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/reopt-ai/reopt-skills/opt-datagrid-install"><img src="https://agentmods.dev/badge/skills/reopt-ai/reopt-skills/opt-datagrid-install.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 160 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,540 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00160	$0.01540
Opus 5	$0.00080	$0.00770
Sonnet 5	$0.00032	$0.00308
Haiku 4.5	$0.00016	$0.00154

Measured 5d ago against content hash fa1db4f1a78d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

opt-datagrid-install scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/opt-datagrid-install/SKILL.md · 96 lines

How it starts

The opening of the file, as written. The whole thing — 96 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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)

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.
Prereqs — Node 20+, React 19+, bun or npm.
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.
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.
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.
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).

Read the full file on GitHub · 96 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

5d ago Changed · +3 lines fa1db4f1a78d
10d ago First seen · 93 lines · 160 tokens per session scan A cd02a33debf4

Subscribe to this mod's changes

opt-datagrid-install is a skill published in the GitHub repository reopt-ai/reopt-skills (1 stars, last pushed 6d ago), licensed MIT. It adds 160 tokens to every session and 1,540 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Claude Code Frontend agent-skills ai-agents codex cursor skills

frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

addyosmani/agent-skills · 58 tokens

skillshare-ui-website-style

Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard…

runkids/skillshare · 147 tokens

opt-datagrid-install