К основному содержанию
скилл CX Codex

ag-dev — скилл для Claude Code: что делает и как установить

Скилл заставляет ИИ сверять версии AG Grid, AG Charts и AG Studio с документацией проекта, чтобы не писать код под устаревшие или выдуманные API.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add ag-grid/skills --skill ag-dev -a claude-code
Открыть на GitHub

Что делает ag-dev

Скилл подключается перед редактированием кода с компонентами AG Grid, AG Charts или AG Studio. Он определяет установленный продукт по именам пакетов вроде @ag-grid- или ag-charts-, а точную версию вычитывает напрямую из package.json проекта или каталога node_modules. Если проект написан на Svelte или Solid, скилл переключается на правила для Vanilla JavaScript.

Главное правило скилла — запрет на угадывание API. Агент обязан искать готовые механизмы в references/{product}/documentation-index.md вместо создания костылей через valueGetter или самодельные ячейки. Встроенные функции сетки сразу поддерживают сортировку, фильтрацию и экспорт, тогда как самописный код ломает эти цепочки. Для обновления самих библиотек этот скилл не годится: автор требует переключаться на соседний ag-update.

Какие задачи решает

  • настроить колонки и тему оформления в AG Grid
  • подобрать встроенную функцию сетки вместо самодельного рендерера
  • привязать данные и графики в AG Charts под конкретную версию пакета
  • проверить совместимость кода с версией из package.json

Примеры запросов агенту

  • Добавь группировку колонок в таблицу AG Grid в файле src/Grid.tsx
  • Настрой тему оформления для AG Charts по документации нашей версии
  • Проверь конфигурацию таблицы на совместимость с текущей версией AG Grid

Как установить ag-dev

1Через Skills CLI (Vercel)

npx skills add ag-grid/skills --skill ag-dev -a claude-code

2Вручную: положить файлы

~/.claude/skills/ag-dev/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/ag-dev/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о ag-dev

Как установить ag-dev в Claude Code?

Выполните команду npx skills add ag-grid/skills --skill ag-dev -a claude-code в терминале.

Что делает скилл ag-dev?

Он заставляет модель проверять версию AG Grid, AG Charts или AG Studio в package.json и сверяться с документацией перед правкой кода, предотвращая вызов удалённых или несуществующих методов.

Можно ли с помощью ag-dev обновить версии пакетов AG Grid?

Нет, для обновления зависимостей предназначен отдельный родственный скилл ag-update.

Исходный текст

SKILL.md · MIT
---
name: ag-dev
description: Use BEFORE writing or changing any code that touches AG Grid, AG Charts or AG Studio - including adding or configuring columns, themes, styling, cell rendering, data or any grid/chart feature, and when planning such work. Grounds the code in the APIs that exist in the version in use, instead of recalled ones.
---

## Be aware of the AG products in use, and their versions and wrapper framework

Products in use may be obvious from the context, if not it can be determined from the package that features are imported from:

- `grid` packages start @ag-grid- or ag-grid-
- `charts` packages start ag-charts-
- `studio` package is ag-studio or starts ag-studio-

{product} below refers to grid, charts or studio.

Versions can be determined from project's package.json or by reading the installed library's package.json inside node_modules

Framework is `react`, `vue`, `angular` if using those frameworks, `javascript` for Vanilla JS apps or for apps on any other framework (e.g. Svelte, Solid).

## For package version updates, use the ag-update skill

This skill ships with a sibling skill, "ag-update". Delegate to it when asked to update grid, charts or studio packages.

## Don't guess

Whenever writing code, you must have a clear source for the APIs you use, whether that's following existing patterns, instructions from the user or consulting our docs. If you're unsure, do research to ground your actions.

## Prefer the purpose-built feature over a general-purpose primitive

Where the product ships a dedicated feature for what you are building, use it — not a `valueGetter`, a custom cell renderer, hand-rolled state or your own event wiring that produces the same visible result. Sorting, filtering, aggregation, export and the UI all understand the built-in feature; a primitive is opaque application code that has to re-implement that behaviour and keep it in step by hand.

"The primitive renders the right value" is not a reason to reject the built-in feature. Neither is the feature being unfamiliar to you: your training data lags the current version, so unfamiliar is not evidence of unsupported.

**Check before you implement, not after.** Before building a requested capability out of a primitive, scan `references/{product}/documentation-index.md` for a slug describing that capability and read the page if one plausibly matches. For Enterprise features, follow the module-registration guidance in the product recommendations.

## By default consult the docs

When writing code you will encounter two problems:

1. Your training data contains many deprecated and removed APIs and package names and may not have newer APIs.
2. APIs have non-obvious edge cases and interactions with other features.

The solution to both of these is to consult the documentation.

If it is clear exactly what API to use, eg you are following a detailed plan that names specific APIs, or there are other examples in the codebase to copy, you may write code directly.

Otherwise if there is uncertainty, check the docs. To find the correct docs URL for the version in use, load `references/{product}/documentation-index.md` and follow the instructions in that file.

Locate the feature you are working with in the docs and read surrounding paragraphs to get information on edge cases and interactions.

## Load product-specific recommendations

`references/{product}/recommendations.md` contains specific advice for each product including known LLM failure modes and key APIs that have changed between versions. Load it and take it into account when developing.

© ag-grid · MIT · ag-grid/skills

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →
xss-scan Seth Hobson Ищет уязвимости межсайтового скриптинга в коде на React, Vue и JavaScript. Показывает проблемную строку, уровень риска и готовый безопасный паттерн. CX Codex ★ 41 823звёзд репо stitch::code-to-design официальный google-labs-code Переносит существующий фронтенд в Stitch: извлекает HTML и дизайн-систему, затем загружает их в проект. Пригодится для работы с уже готовыми страницами и компонентами. CX Codex +1 10 200установок mapbox-web-integration-patterns mapbox Официальные паттерны встраивания Mapbox GL JS в React, Vue, Svelte, Angular и на чистом JavaScript. Пригодится, когда карта течёт по памяти или не инициализируется в нужном хуке. CX Codex +1 2 600установок frontend-developer VoltAgent Community Субагент для разработки полных фронтенд-приложений на React 18+, Vue 3+ и Angular 15+. Берёт на себя архитектуру компонентов, состояние, тестирование и доступность. 40 905установок ionic-expert capawesome-team Скилл даёт агенту справочник по Ionic Framework: компоненты, CLI, темы, навигация и паттерны Angular, React и Vue. CX Codex +1 1 300установок ionic-app-upgrades capawesome-team Ведёт агента через мажорный апгрейд Ionic: пошаговые миграции для Angular, React и Vue, ломающие изменения компонентов и CSS-переменных. CX Codex +1 834установок

Из того же набора2

Спонсоры проекта

Компании, которые помогают держать аналитику открытой