Skills

skills.sh ↗

Source ↗

Docs guidelines ↗

An agent skill is a small, versionable package of instructions your AI assistant loads when you work on Niko Table. Installed once, it steers the model toward the right composition, direct imports (no barrels), and the examples on this site — for both tables and the Data Grid.

Install

pnpmnpmyarnbun

pnpm dlx skills add Semkoo/niko-table-registry

The CLI discovers niko-table-best-practices in this repo and installs it into your agent’s skills directory (Cursor, Claude Code, Windsurf, and others supported by skills.sh). After that, a new chat that mentions data tables / Niko Table / editable grids should pick it up automatically.

Learn more about the skills format at skills.sh.

Verify

1. Confirm install

   npx skills list

   You should see niko-table-best-practices.

2. Smoke-test in chat

   Open a new agent session in a React + shadcn project and ask something concrete, e.g. “Add a Niko Table with search and pagination” or “Scaffold a minimal Data Grid with text cells.”

3. Optional — manual install

   Copy .cursor/skills/niko-table-best-practices (or the matching copy under .agents/skills/) into your agent’s skills directory. The folder must include SKILL.md.

   Agent	Project path	Global (all projects)
   Cursor	.cursor/skills/	~/.cursor/skills/
   Claude Code	.claude/skills/	~/.claude/skills/
   Windsurf	.windsurf/skills/	—
   Other / agents	.agents/skills/ or .agent/skills/	per tool docs

What to ask

Tables

• “Add a data table with search and pagination.”
• “Build a table with faceted filters for category and brand.”
• “Add the advanced filter menu and sort menu.”
• “Implement row drag-and-drop for reordering.”
• “Wire up server-side pagination with totalCount.”
• “Sync filters, sort, and pagination to the URL with nuqs.”

Data Grid

• “Turn this table into an editable Data Grid with text cells.”
• “Add clipboard and fill handle as opt-in children of <DataGrid>.”
• “Use useGridChanges for a save-button CRUD change-set.”
• “Add date and select cell editors with resolve validation.”

What the skill teaches

Topic	Guidance
Composition	DataTableRoot → toolbar → DataTable → header/body → pagination; virtualized body for large lists
Imports	Direct file paths only (@/components/niko-table/core/...) — no barrel index exports
Layers	DataTable* (context) vs Table* (direct table prop)
Filters / DnD	Toolbar + column menus; row DnD needs getRowId and must not mix with sort/filter
Server / URL	manualPagination / pageCount / totalCount; nuqs for shareable state
Data Grid	useDataGrid + <DataGrid> + typed cells; opt-in children; id-addressed edits; link to Basic Grid

Most DataTableRoot config is auto-detected from the components you mount — pass config mainly to override or for manual/server-side modes.

Tip

For deep API and runnable demos, the skill should point at this site — not invent a parallel API. Prefer Examples and Data Grid Examples.

How it works

1. Trigger — Activates on talk of data tables, Niko Table, faceted/advanced filters, DnD, server-side paging, nuqs, selection/expansion/tree tables, or editable spreadsheet grids.
2. Enforce patterns — Same structure and import rules as the docs and registry examples.
3. Right level of help — Minimal scaffold vs filter deep-dive vs grid composition, depending on the ask.
4. Reference out — Links to Installation, Examples, and overview pages for full props tables.

Next

• Installation — Configure @niko-table and install core
• Components — Full registry catalog
• Simple Table · Basic Grid — Reference examples
• Documentation Guidelines — How we structure docs/examples
• skills.sh — niko-table-best-practices — Skill listing