UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Build virtualized data tables with @virtuoso.dev/data-table.
Install Data Table
$ npx skills add petyosi/react-virtuoso --skill data-table -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install petyosi/react-virtuoso data-table --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/petyosi/react-virtuoso.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/data-table .claude/skills/data-table && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "data-table" agent skill from https://github.com/petyosi/react-virtuoso/tree/main/skills/data-table into .claude/skills/data-table/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-table", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/petyosi/react-virtuoso/tree/main/skills/data-tableType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add petyosi/react-virtuoso --skill data-table -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install petyosi/react-virtuoso data-table --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/petyosi/react-virtuoso.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/data-table .agents/skills/data-table && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "data-table" agent skill from https://github.com/petyosi/react-virtuoso/tree/main/skills/data-table into .agents/skills/data-table/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-table", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add petyosi/react-virtuoso --skill data-table -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install petyosi/react-virtuoso data-table --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/petyosi/react-virtuoso.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/data-table .cursor/skills/data-table && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "data-table" agent skill from https://github.com/petyosi/react-virtuoso/tree/main/skills/data-table into .cursor/skills/data-table/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-table", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/petyosi/react-virtuoso.git --path skills/data-table--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add petyosi/react-virtuoso --skill data-table -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install petyosi/react-virtuoso data-table --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/petyosi/react-virtuoso.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/data-table .gemini/skills/data-table && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "data-table" agent skill from https://github.com/petyosi/react-virtuoso/tree/main/skills/data-table into .gemini/skills/data-table/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-table", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install petyosi/react-virtuoso data-tableInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add petyosi/react-virtuoso --skill data-table -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/petyosi/react-virtuoso.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/data-table .github/skills/data-table && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "data-table" agent skill from https://github.com/petyosi/react-virtuoso/tree/main/skills/data-table into .github/skills/data-table/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-table", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add petyosi/react-virtuoso --skill data-table -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install petyosi/react-virtuoso data-table --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/petyosi/react-virtuoso.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/data-table .opencode/skills/data-table && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "data-table" agent skill from https://github.com/petyosi/react-virtuoso/tree/main/skills/data-table into .opencode/skills/data-table/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "data-table", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
data-table- GitHub stars
- 6.5k
- Token cost
- ~5.3k tokens
- SKILL.md length
- 1,643 words
- Files
- 51 (incl. references)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- None found
At a glance
Build virtualized data tables with @virtuoso.dev/data-table.
- Building a data grid with sorting
- SKILL.md covers Installation: two paths, Minimal example (shadcn wrapper), Choosing a data model and Column features, plus 5 more sections
- Calls npx, npm and rg
- Installing the shadcn-styled
What it does
Data Table is an agent skill from petyosi/react-virtuoso. Build virtualized data tables with @virtuoso.dev/data-table. Use this skill when (1) building a data grid with sorting, filtering, or grouped rows, (2) installing the shadcn-styled or headless table, (3) connecting remote/paginated data sources, (4) adding sticky, resizable, reorderable, or hideable columns, (5) persisting table state, (6) controlling a table from outside (scrolling, actions), (7) migrating from TableVirtuoso, or any task involving VirtuosoDataTable, DataTable, DataTableColumn, localModel…
Its SKILL.md is about 5.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 54 other files, including reference files (for example `references/1.installation/01.shadcn.md`, `references/1.installation/02.headless.md` and `references/2.data-model/01.local-data-model.md`).
It sits in Frontend & Design, covering Design systems. It works with shadcn/ui. The repository describes itself as: The most powerful virtual list component for React.
When your agent uses it
- Building a data grid with sorting
- Installing the shadcn-styled
- Connecting remote/paginated data sources
- Hideable columns
Example prompts
- “/data-table”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit b2a02d0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxnpmrg
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
virtuoso.dev
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Data Table loads about 5.3k tokens when it runs, and up to ~74k if it reads all its reference files. Until then it costs about 149 tokens; SKILL.md has 1,643 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 1,643 words (~5,254 tokens).
“A virtualized React data table (rows and columns) with grouped rows, sticky columns, column resizing/reordering/visibility, state persistence, and remote data support. It is the successor to TableVirtuoso for table-shaped problems: instead of row renderers, you pass a data source (model)…”
- name
- data-table
Files
SKILL.md and 50 other files (references) in skills/data-table of petyosi/react-virtuoso.
- SKILL.md
- references/1.installation/01.shadcn.md
- references/1.installation/02.headless.md
- references/2.data-model/01.local-data-model.md
- references/2.data-model/02.remote-data-model.md
- references/2.data-model/03.row-keys.md
- references/2.data-model/index.md
- references/3.columns/01.defining-columns.md
- references/3.columns/02.cell-and-header-renderers.md
- references/3.columns/03.column-groups.md
- references/3.columns/04.sticky-columns.md
- references/3.columns/05.column-visibility.md
- references/3.columns/06.column-resizing.md
- references/3.columns/07.column-reordering.md
- references/3.columns/08.runtime-columns.md
- references/3.columns/09.column-layout.md
- references/3.columns/index.md
- … and 34 more
Open the folder on GitHubat commit b2a02d0
Compare with similar skills
Data Table next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Data Table this skillpetyosi/react-virtuoso | 6.5k | — | ~5.3k | Automated safety check: Pass | None | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Shadcnsupabase/evals | 143 | 42 repos | ~4.5k | Automated safety check: Pass | Apache-2.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Cosscrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Activepieces Design Systemactivepieces/activepieces | 25k | — | ~3.6k | Automated safety check: Pass | Custom licence |
Similar skills
- Official
Shadcn
supabase/evals
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
Activepieces Design System
activepieces/activepieces
Design system for Activepieces (open-source AI automation platform, "open source replacement for Zapier").
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
More from petyosi/react-virtuoso
Message List
petyosi/react-virtuoso
Build chat, messaging, and AI conversation UIs with @virtuoso.dev/message-list.
React Virtuoso
petyosi/react-virtuoso
Build virtualized lists, grids, and tables with react-virtuoso.
Reactive Engine
petyosi/react-virtuoso
Manage application state with the @virtuoso.dev/reactive-engine- package family.
Docs Guidance
petyosi/react-virtuoso
Revises project documentation for human readability, conceptual flow, and example safety.
Related
Works with
Categories
Questions about Data Table
What does Data Table do?
Build virtualized data tables with @virtuoso.dev/data-table. Data Table is an agent skill from petyosi/react-virtuoso.dev/data-table.
When should I use Data Table?
Data Table fits situations like: building a data grid with sorting; installing the shadcn-styled; connecting remote/paginated data sources; hideable columns.
How do I install Data Table in Claude Code?
Run `npx skills add petyosi/react-virtuoso --skill data-table -a claude-code`. Or copy the skill folder (skills/data-table in petyosi/react-virtuoso) into .claude/skills/data-table in your project. Claude Code loads it when a task matches its description.
How do I install Data Table in Codex?
Run `npx skills add petyosi/react-virtuoso --skill data-table -a codex`. Or copy the skill folder (skills/data-table in petyosi/react-virtuoso) into .agents/skills/data-table in your project. Codex loads it when a task matches its description.
Can I use Data Table in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add petyosi/react-virtuoso --skill data-table -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/data-table, .gemini/skills/data-table, .github/skills/data-table and .opencode/skills/data-table in your project.
What does Data Table need to run?
Going by SKILL.md and its folder, Data Table needs the command-line tools its instructions call (npx, npm and rg). Our summary lists: Node.js.
Does Data Table access the network?
SKILL.md names 1 domain. As links in the text: virtuoso.dev. This is read from the text; nothing was executed.
Is Data Table safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Data Table use?
No licence was found for Data Table or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Data Table use?
About 5.3k tokens (SKILL.md is roughly 21k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 69k tokens, read only when the agent opens those files.
What are the alternatives to Data Table?
Skills that share tags, products or a category with Data Table: UI Styling (Ohh-889/skyroc, 795 stars), Shadcn (supabase/evals, 143 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Coss (crafter-station/petdex, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Data Table?
petyosi (a GitHub user) maintains it in petyosi/react-virtuoso, which has 6,465 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 1, 2026.
Source: petyosi/react-virtuoso on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.