Skills

A skill is a packaged set of instructions an agent loads automatically when it recognises a relevant task. Bryntum skills teach your agent the Bryntum-specific rules it would otherwise guess wrong — correct packages, the Bryntum 7+ CSS pattern, framework wrappers, sizing, and backend gotchas.

The core bryntum skill triggers on any Bryntum work — phrases like "add a scheduler", "set up a gantt chart", or any mention of @bryntum/* packages — even when you don't say "Bryntum" by name.

Available skills

Skill	What it covers
bryntum (required)	Product identification, CSS setup, docs lookup via MCP, component defaults, sizing, dark mode, data loading
bryntum-react	<BryntumXxx> wrapper, JSX config props, useRef instance access, StrictMode handling
bryntum-angular	<bryntum-xxx> selector, [prop]="..." template binding, standalone component setup
bryntum-vue	<bryntum-xxx> component, v-bind config spreading, BryntumXxxProps typing
bryntum-vanilla	Direct class import from @bryntum/{product}, instantiation with appendTo
bryntum-crud	CrudManager, AjaxStore, phantom ID handling, partial sync, data gotchas

Always install bryntum plus the skill for your framework.

Install

Claude Code

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

Or install only what you need (e.g. React):

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

Skills live in ~/.claude/skills/. Claude Code discovers them automatically — you don't need to mention them in your prompts.

Other agents

Most agents support some form of reusable instruction file. If yours doesn't support skills natively, you can:

• Paste the contents of the relevant SKILL.md files from github.com/bryntum/skills into your project's agent rules file (e.g. AGENTS.md, .cursor/rules, or .github/copilot-instructions.md).
• See Set up your agent for client-specific instructions.

What the skills enforce

The skills encode rules that are easy for an agent to get wrong:

• Packages — the right @bryntum/* package per product, the trial alias pattern, and exact versions (no ^).
• CSS (Bryntum 7+) — plain CSS only, never SASS/SCSS. FontAwesome imports, structural {product}.css before the theme, default svalbard-light.
• Fonts — default to Poppins via body { font-family: 'Poppins', ... } if the app has no specific font.
• Frameworks — the correct wrapper and binding pattern for React, Angular, Vue, and vanilla JS, plus quick-start guide URLs per framework.
• Sizing — set an explicit height on parent containers.
• Widgets — use official Bryntum widgets instead of hand-rolling HTML/CSS equivalents.
• CSS simplicity — prefer CSS-only solutions; avoid JS-based positioning and unexplained z-index values.
• Backend / CrudManager — loadUrl is GET, syncUrl is POST; handle phantom IDs; partial sync updates; and more.

Keep them updated

Skills are version-independent guidance, but they do evolve. Re-pull occasionally:

npx degit bryntum/skills/bryntum ~/.claude/skills/bryntum
npx degit bryntum/skills/bryntum-react ~/.claude/skills/bryntum-react
# repeat for any other skills you have installed

Pair them with the MCP server

Skills tell the agent how to work with Bryntum; the MCP server gives it the current, version-correct API details. Install both — the skills even instruct the agent to use the MCP server (or fall back to WebFetch on bryntum.com) whenever it's unsure.