# adaptable-dev Canonical page: https://www.adaptabletools.com/docs/getting-started-ai-skills-dev - The day-to-day Skill for a project that already has AdapTable - Designs from the docs for the installed version, then checks what it wrote The `adaptable-dev` AI Skill helps you to add and change AdapTable features in your project. The AI Skill covers and can help you with all elements in AdapTable including: - Adaptable Options - Initial State - AdapTable Modules (e.g. Layouts, Format Columns, Alerts etc.) - AdapTableQL Expressions - AdapTable API calls - Custom UI components (e.g. toolbars, menus, tool panels, Settings panels etc.) - Do not use this to add AdapTable for first time (use `adaptable-setup`) or for pure AG Grid work (use `ag-dev`) - Nor for a Grid that is misbehaving (use `adaptable-debug`) or to upgrade versions (use `adaptable-upgrade`) Add a Calculated Column called `notionalUsd` — notional times fxRate, shown in USD with no decimals — and put it after `notional` in the Trading Layout
Add an Alert that warns when `pnl` drops below zero
Add a Calculated Column that doubles the rating, and put it first in the current Layout
Add a custom toolbar to the Dashboard with a button that clears all Column Filters ## How it Works The agent finds the installed version, then designs from the docs for that version. The workflow is as follows: - It confirms the feature exists, reads how it behaves, reads the exact shape, and copies one demo - It decides where the change belongs - Before it writes, it applies the known mistakes for that feature: Expression kinds, State shapes, and the traps for your framework - After it writes, it checks the Expression, the State and setup, and fixes what checks name (up to 3 rounds) - It reports what changed, which docs page each shape came from, and the checks that ran ### Where AdapTable functionality belongs, and the Rules the Skill uses One of the key things the Skill does is teach where each piece of functionality in AdapTable belongs: | The thing is… | It belongs in… | | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | a persistable, user-facing object (Layout, Alert, Filter, Calculated Column, Report etc.) | | | a design-time callback, permission, Action Column or custom function | | | a runtime change | | | column visibility, order, width, pinning, sorting, grouping, aggregation | | | conditional styling, formats, sparklines, badges | | | column typing | | The Skill has a set of important rules which it always works by: - **Declarative first** — if a user can see, toggle, edit or save it, it's Initial State; code is what State cannot express. Action Columns are the exception: their controls are functions, so they live in Adaptable Options - **Saved State merges over `initialState`** — editing `initialState` does not reset what users already saved; runtime changes go through the State API, and a deliberate replacement uses [Revision](https://www.adaptabletools.com/docs/dev-guide-adaptable-state-updating-initial-state/index.md), not a changed state key - **Expressions are AdapTableQL, checked per Module** — the Module decides which kinds and functions are legal; functions are looked up with `aql functions`, not recalled - **Column references are ids from the project**, taken from the `columnDefs` source — never invented header names ### React In React, Adaptable Options, Grid options and row data must keep the same reference across renders, or the Grid remounts and loses State. AdapTable work happens in `onAdaptableReady`. ### Angular In Angular the Grid is wired with `adaptable-provider`, `adaptable-ui` and `ag-grid-angular`. It is not created directly beside the provider. Styles belong in the global stylesheet. ### Vue In Vue, pass options as stable objects. A deep reactive proxy around Grid options fights the Grid's own changes. The wrapper owns the Grid instance. | | | | --- | --- | | What the agent asks | | | What it writes | | | What it runs | | | When it is finished | | ### Taking a look inside the Skill After you install the Skill, `adaptable-dev` looks like this: ```text adaptable-dev/ ├── SKILL.md # description + procedure ├── VERSION.md # the version checked against /.well-known/skills/VERSION └── references/ ├── recommendations.md # the mistakes agents keep making, per feature area └── _shared/ # the same in every Skill ├── grounding.md ├── docs-protocol.md ├── validation-loop.md ├── conversation.md ├── guards.md ├── capabilities.md └── agents-snippet.md ``` ## Examples ### Create a Calculated Column Add a Calculated Column called `notionalUsd` — notional times fxRate, shown in USD with no decimals — and put it after `notional` in the Trading Layout 1. Finds the installed AdapTable version and reads the Calculated Column, Format Column and Layout pages of the docs **for that version**, instead of recalling an older shape 2. Decides where it belongs: a column users can see, move and save is part of **Initial State** — not Adaptable Options, not an API call 3. Writes the Calculated Column with the AdapTableQL Expression `[notional] * [fxRate]`, a Format Column for the USD display, and the Layout change 4. Checks the Expression, then the whole Initial State against your column definitions; fixes and re-checks anything that fails, up to three rounds A diff of the Initial State, with the docs page behind each change. For example: - Added the Calculated Column `notionalUsd` with Expression `[notional] * [fxRate]` to Initial State (shape from the Calculated Column technical reference) - Added the Format Column "Notional USD", scoped to `notionalUsd`, with a USD display format and no decimals (from the Format Columns page) - Placed `notionalUsd` after `notional` in the Trading Layout - Checks: the Expression is valid for a Calculated Column; `check state` against `src/columnDefs.ts` found no issues; the project type-checks - Not verified: the app was not running, so the column was not checked in the browser `check expression` and `check state` run with the AdapTable installed in the project, then the project's own type-check. ### Create an Alert Add an Alert that warns when `pnl` drops below zero 1. Finds the installed AdapTable version and framework; every lookup below is for that version 2. `docs search "data change alert"` ranks the Alerts pages; `docs get handbook-alerting-data-change` explains the behaviour and `docs get technical-reference-alerting` gives the exact Alert Definition shape 3. It decides this is Initial State — users can see, edit and save Alerts — and writes an Alert Definition scoped to `pnl` with the Rule `[pnl] < 0` 4. `check expression "[pnl] < 0" --module Alert --columns src/columnDefs.ts` reports it valid as a boolean in the Alert Module; `check state src/adaptableOptions.ts --columns src/columnDefs.ts` reports no issues A diff of the Alert section of Initial State, the two docs pages it used, and the two checks that ran clean. ### Edit an Alert Edit the Alert to now fire when `status` changes to `Failed` Finds the Alert in Initial State. It is scoped to `pnl` with the Rule `[pnl] < 0`. To fire when `status` changes to `Failed`, it moves the Scope to `status` and sets the Rule to `[status] = "Failed"`, then checks the Rule. A diff of that Alert: Scope `status`, Rule `[status] = "Failed"`. Leaving the Scope on `pnl` would fire when `pnl` is edited while `status` is already `Failed`. ### Create a Format Column Add a Format Column that shows negative `pnl` cells in red, scoped to the `pnl` column Writes the Format Column into Initial State and checks its rule. A diff, and the docs page it followed. ### Build a Scheduled Export Export the filtered rows to Excel every weekday at 8am Looks for a built-in AdapTable feature before writing any timer code, then configures it in Initial State. A scheduled export, rather than hand-written plumbing. ### Answer a Code Question Which Adaptable Option controls the date format the Grid displays? Searches the docs for your version and finds that the date format is not an Option. A Format Column `DateFormatter`, and the page it came from. Nothing is changed. ### Check the Initial State Check our Initial State for problems 1. Finds the Initial State in your source and the column definitions it refers to 2. Runs the State check for your AdapTable version: the shape against that version's types, plus rules TypeScript cannot see 3. Explains each finding and proposes the fix the check gives Findings with the file and line, for example: - `CurrentLayout` is "Trading", but the only Layout is called "Trades" - the Trades Layout lists a `trader` column that is not in the column definitions - a Format Column rule is written `[pnl] < 0 && [status] == "Open"` — JavaScript operators, not AdapTableQL; the fix is `[pnl] < 0 AND [status] = "Open"` All three compile without complaint: to TypeScript they are just strings. `check state` reads them the way AdapTable will at run time, so they are caught before anyone loads the Grid. ### Audit the Setup Audit our AdapTable setup Runs the setup check — stylesheet, AG Grid modules, licence key not in source, package versions, how the Grid is created — and fixes what it names. A list of what was wrong and what changed. ### Column Defs vs Layout Are any of our column definitions fighting the AdapTable Layout? Looks for column settings AdapTable's Layout owns (hidden, pinned, width, sort, grouping) and proposes moving them into the Layout. A diff that removes the conflict.