skills

Angular-specific patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) in an Angular project. Trigger when the project has Angular in package.json or when the user asks about Angular + Bryntum integration, template binding, standalone components, or @bryntum/*-angular packages.

Customize Bryntum's built-in event/task editor — the popup shown when you create or double-click an event/task — across any product (Scheduler, Scheduler Pro, Gantt, Calendar, TaskBoard). Use alongside the `bryntum` skill whenever the user wants to add, remove, or reorder editor fields or tabs, tweak validation, react to the editor opening/saving, or replace the popup with a fully custom dialog. Trigger on phrases like "edit event popup", "task editor", "remove the % Complete field", "add a field to the editor", "custom event editor", "eventEdit"/"taskEdit" config, or "beforeEventEdit"/"beforeTaskEdit".

React-specific patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) in a React project. Trigger when the project has React in package.json or when the user asks about React + Bryntum integration, JSX config, StrictMode issues, or @bryntum/*-react packages.

Build and integrate Bryntum components into web apps. Use this skill whenever the user is working with any Bryntum product — Scheduler, Scheduler Pro, Gantt, Calendar, Grid, or TaskBoard — regardless of whether they mention "Bryntum" by name. Trigger on phrases like "add a scheduler", "set up a gantt chart", "integrate a grid component", "calendar view", "task board", "resource scheduling", or any mention of @bryntum/* npm packages. Also trigger when the user asks about Bryntum CSS imports, themes, or framework wrappers (Angular, React, Vue). When in doubt, use this skill — it's better to consult it unnecessarily than to miss a Bryntum-specific rule and produce broken code.

Bryntum themes and dark mode. Use alongside the `bryntum` skill whenever the user picks or switches a Bryntum theme, wants light/dark mode or a runtime theme toggle, asks the component to match a design system (Material / Fluent), or customizes colors via CSS variables. Covers all products — Scheduler, Scheduler Pro, Gantt, Calendar, Grid, TaskBoard. Trigger on phrases like "dark mode", "theme switch", "toggle theme", "DomHelper.setTheme", "which theme", "match Material UI", or "Bryntum theme".

Vanilla JS patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) without a framework — plain JavaScript or TypeScript with no React/Angular/Vue. Trigger when there is no framework in package.json or when the user asks about vanilla JS Bryntum integration or direct class instantiation.

Vue 3-specific patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) in a Vue 3 project. Trigger when the project has Vue in package.json or when the user asks about Vue + Bryntum integration, v-bind, BryntumXxxProps, or @bryntum/*-vue-3 packages.

Backend, CrudManager, and AjaxStore patterns for Bryntum components. Use this alongside the `bryntum` skill when the user needs to connect a Bryntum product to a backend — loading data from an API, persisting changes, or setting up sync. Trigger on phrases like "connect to a backend", "save data", "load from server", "CrudManager", "AjaxStore", "sync", "REST API", or "database" in a Bryntum project context.

Drag-and-drop INTO a Bryntum Scheduler / Scheduler Pro / Gantt from an external, non-Bryntum source — e.g. a sidebar list of unscheduled jobs, a plain list of <div>s, a third-party grid (AG Grid), or a Bryntum Grid or other Bryntum component. Use this alongside the `bryntum` skill whenever the user wants to drag items onto the timeline. Trigger on phrases like "drag from sidebar", "drag unscheduled/unplanned tasks", "drag onto the scheduler/timeline", "external drag source", "drag from a list/grid into the scheduler", "DragHelper", or a drop being "rejected"/"not working" from a custom source.