🧠 Onboard your LLM

Install the official gp-grid agent skill for your coding agent that integrates the grid into a React, Vue, or Angular app without paraphrasing the docs.

gp-grid ships with an official agent skill — a structured set of instructions, references, and worked examples that teaches a coding agent how to integrate the library correctly. Install it once and your editor's agent stops guessing at imports, renderer signatures, and data-source shapes.

What the skill does for you

Once installed, the skill activates whenever you ask your agent to work with gp-grid. It triggers on @gp-grid/* imports, identifiers like useGridData, createServerDataSource, or GpGridComponent, and natural-language requests such as "wire up a gp-grid in this Vue app". It gives the agent:

The correct per-framework imports, component name, and renderer signature for React, Vue 3, Angular, or vanilla @gp-grid/core.
The ColumnDefinition shape, including the right cellDataType for every value type — Date vs ISO string is the most common source of subtle bugs.
The data-source decision tree: when to pass rowData directly, when to use createClientDataSource, when to reach for useGridData (React) / createGridData (Vue) / provideGridData (Angular), and when to go server-side with createServerDataSource.
The current DataSourceRequest shape — range: { startRow, endRow } (not pagination) — and a reminder that endRow is exclusive.
Common pitfalls — missing container height, forgotten CSS import, mixing framework adapters — flagged before the agent writes code instead of after.

Install via skills.sh

The fastest path is the skills.sh installer, which copies the skill into your repository's agent configuration:

npx skills add https://github.com/GioPat/gp-grid

Run it from the root of the project where you want gp-grid integrated. The installer detects which agents you have configured locally and writes the skill into each of them.

skills.sh is the central registry for agent skills — see skills.sh for the full catalog and how the install command picks targets.

Multi-agent support

The same skill is installed for every supported coding agent — pick whichever fits your workflow

The installer writes the skill to each agent's expected configuration directory. No further setup is required — open your editor, ask the agent to use gp-grid, and the skill is consulted automatically.

What's inside

The skill is a single SKILL.md plus per-framework reference files (references/react.md, references/vue.md, references/angular.md, references/core.md). The agent reads the framework reference that matches your project before generating any code, which keeps the integration faithful to the wrapper you're using.

Browse the source on GitHub: gp-grid/.claude/skills/gp-grid-integration.

Updating the skill

Re-run the installer to pull the latest version:

npx skills add GioPat/gp-grid

The skill is versioned alongside the library, so re-installing after a gp-grid release keeps your agent in sync with API changes.