Agent skills for working with Bryntum components — Scheduler, Scheduler Pro, Gantt, Calendar, Grid, and TaskBoard. Compatible with Claude Code and Codex.

The core skill. Covers product identification, CSS setup, official demo mirroring, docs lookup via MCP, product-specific component defaults, sizing, dark mode, and data loading rules. Always install this one — the framework and CRUD skills build on it.

React-specific patterns: <BryntumXxx> component, JSX config props, useRef for instance access, and StrictMode double-mount handling.

Angular-specific patterns: <bryntum-xxx> selector, [prop]="..." template binding, standalone component setup, and how to separate Bryntum config from Angular's own app.config.ts.

Vue 3-specific patterns: <bryntum-xxx> component, v-bind config spreading, and typing config objects as BryntumXxxProps for type-safe binding.

Vanilla JS patterns: direct class import from @bryntum/{product} and instantiation with appendTo.

Backend persistence patterns: CrudManager (Scheduler, Scheduler Pro, Gantt, Calendar, TaskBoard) and AjaxStore (Grid), phantom ID handling, partial sync, and common data gotchas.

How to implement drag and drop from a grid onto a Scheduler or Gantt.

Theme catalog, choosing a theme to match the host app (Material / Fluent), and dynamic light/dark switching via DomHelper.setTheme().

Customizing the built-in event/task editor — adding/removing fields and tabs via eventEdit/taskEdit, and the supported way to swap in a fully custom dialog.

Copy the skills you need into your agent's skills folder. At minimum, install bryntum plus the skill for your framework.

Skills live in .claude/skills/ (project-local). Use ~/.claude/skills/ instead to install them globally for all projects.

Install all skills at once:

npx degit bryntum/skills/bryntum .claude/skills/bryntum
npx degit bryntum/skills/bryntum-react .claude/skills/bryntum-react
npx degit bryntum/skills/bryntum-angular .claude/skills/bryntum-angular
npx degit bryntum/skills/bryntum-vue .claude/skills/bryntum-vue
npx degit bryntum/skills/bryntum-vanilla .claude/skills/bryntum-vanilla
npx degit bryntum/skills/bryntum-crud .claude/skills/bryntum-crud
npx degit bryntum/skills/bryntum-drag-and-drop .claude/skills/bryntum-drag-and-drop
npx degit bryntum/skills/bryntum-theming .claude/skills/bryntum-theming
npx degit bryntum/skills/bryntum-editor .claude/skills/bryntum-editor

Install individually (e.g. React only):

npx degit bryntum/skills/bryntum .claude/skills/bryntum
npx degit bryntum/skills/bryntum-react .claude/skills/bryntum-react

Skills live in .agents/skills/ (project-local). Use ~/.agents/skills/ instead to install them globally for all projects.

Install all skills at once:

npx degit bryntum/skills/bryntum .agents/skills/bryntum
npx degit bryntum/skills/bryntum-react .agents/skills/bryntum-react
npx degit bryntum/skills/bryntum-angular .agents/skills/bryntum-angular
npx degit bryntum/skills/bryntum-vue .agents/skills/bryntum-vue
npx degit bryntum/skills/bryntum-vanilla .agents/skills/bryntum-vanilla
npx degit bryntum/skills/bryntum-crud .agents/skills/bryntum-crud
npx degit bryntum/skills/bryntum-drag-and-drop .agents/skills/bryntum-drag-and-drop
npx degit bryntum/skills/bryntum-theming .agents/skills/bryntum-theming
npx degit bryntum/skills/bryntum-editor .agents/skills/bryntum-editor

Install individually (e.g. React only):

npx degit bryntum/skills/bryntum .agents/skills/bryntum
npx degit bryntum/skills/bryntum-react .agents/skills/bryntum-react

• Claude Code or Codex