Pierre Trees File Tree
pierrecomputer/pierre
Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag…
Guidance for changing the Tabler framework's own JavaScript in core/js: the tabler.js and tabler-theme.js bundles, the Bootstrap port and their tests.
Install Tabler Core JavaScript
$ npx skills add tabler/tabler --skill core-js -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tabler/tabler core-js --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/core-js .claude/skills/core-js && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "core-js" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/core-js into .claude/skills/core-js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "core-js", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/tabler/tabler/tree/dev/.agents/skills/core-jsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add tabler/tabler --skill core-js -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tabler/tabler core-js --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/core-js .agents/skills/core-js && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "core-js" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/core-js into .agents/skills/core-js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "core-js", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tabler/tabler --skill core-js -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tabler/tabler core-js --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/core-js .cursor/skills/core-js && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "core-js" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/core-js into .cursor/skills/core-js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "core-js", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/tabler/tabler.git --path .agents/skills/core-js--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add tabler/tabler --skill core-js -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tabler/tabler core-js --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/core-js .gemini/skills/core-js && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "core-js" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/core-js into .gemini/skills/core-js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "core-js", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install tabler/tabler core-jsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add tabler/tabler --skill core-js -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/core-js .github/skills/core-js && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "core-js" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/core-js into .github/skills/core-js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "core-js", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tabler/tabler --skill core-js -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install tabler/tabler core-js --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/core-js .opencode/skills/core-js && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "core-js" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/core-js into .opencode/skills/core-js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "core-js", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
core-js- GitHub stars
- 42k
- Token cost
- ~1.4k tokens
- SKILL.md length
- 535 words
- Files
- 1
- Skills in repo
- 21
- Repo updated
- First seen
- Licence
- MIT
At a glance
Guidance for changing the Tabler framework's own JavaScript in core/js: the tabler.js and tabler-theme.js bundles, the Bootstrap port and their tests.
- Works in 7 steps: Two entry points → js/src/bootstrap/** is a port, not our… → Tabler's own modules → …
- Fixing or adding a data-bs-toggle handler in Tabler
- SKILL.md covers 1. Two entry points, 2. js/src/bootstrap/** is a…, 3. Tabler's own modules and 4. Docs markers, plus 3 more sections
- Calls pnpm
What it does
Two bundles are built from core/js, both public API with a size budget. tabler.js holds the plugin initializers, the Bootstrap components and the tabler helper namespace. tabler-theme.js is only the color-mode switcher, loaded right after the body tag and not deferred so the theme applies before first paint, which is why it stays tiny, with a budget of 1 kB raw and 800 B minified.
The js/src/bootstrap directory is a TypeScript port of Bootstrap 5.3.8 and is treated as vendored: bugs are fixed the way upstream fixed them, the structure stays recognizable, and changes come with tests that mirror the upstream suite. Tabler's own modules, such as dropdown, tooltip, toast and input-mask, are side-effect initializers that query data-bs-toggle attributes at import time. The data-bs attribute API stays as it is, since renaming it is held for 2.0, and demo-page scripts belong to a different skill.
When your agent uses it
- Fixing or adding a data-bs-toggle handler in Tabler
- Changing the theme switcher without breaking first paint
- Fixing a misbehaving Bootstrap component in the vendored port
Example prompts
- “The Tabler tooltip initializer ignores elements added later. Fix it in core/js.”
- “Add a plugin initializer to tabler.ts for the sortable list.”
- “The theme flashes on page load. Check tabler-theme.js and fix it.”
Requirements
- A checkout of the Tabler repository
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit dcacb65. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Tabler Core JavaScript loads about 1.4k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 535 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from tabler/tabler at commit dcacb65, republished under its MIT licence (© tabler). 535 words, ~1,391 tokens.
Download SKILL.mdSave it as
.claude/skills/core-js/SKILL.md (or your agent's skills folder).- name
- core-js
- description
- Work on the framework's own JavaScript in `core/js/` — the `tabler.js` and `tabler-theme.js` bundles, the vendored Bootstrap component port, and their browser tests. Use when a Tabler behaviour needs adding or fixing (a `data-bs-toggle` handler, the theme switcher, a plugin initialiser), when a Bootstrap component's JS misbehaves, and before changing anything under `core/js/src/`. Not for demo-page scripts — that is the `astro-scripts` skill.
The framework JavaScript
core/js builds two shipped bundles. Everything here is public API and is bound by a size budget.
1. Two entry points
| Entry | Ships as | Holds |
|---|---|---|
js/tabler.ts | tabler.js / .esm.js (+ .min) | plugin initialisers, the Bootstrap components, the tabler helper namespace |
js/tabler-theme.ts | tabler-theme.js (+ variants) | the colour-mode/theme switcher only |
tabler-theme.js is loaded right after <body> and not deferred, so the chosen theme applies before the first paint. It stays tiny on purpose (bundlewatch: 1 kB raw, 800 B minified) — do not add anything to it that is not needed before paint.
2. js/src/bootstrap/** is a port, not our code
That directory is Bootstrap's JavaScript rewritten in TypeScript, MIT headers kept, VERSION = '5.3.8'. Treat it as vendored:
- Fix bugs the way upstream did, and keep the file's structure recognisable against
twbs/bootstrap. Gratuitous restructuring makes the next upstream sync expensive. js/src/bootstrap.tsis the single source of truth for what is exported and for thebootstrapnamespace object.- A new or reworked component class follows the
bootstrap-componentskill (file order, typed config, Data API). - Coverage is configured to measure exactly this directory (
js/src/bootstrap/**), andjs/tests/unit/*.spec.tsmirrors upstream's suite — a change here is expected to come with its test.
3. Tabler's own modules
Modules directly in js/src/*.ts (autosize, countup, dropdown, input-mask, popover, sortable, switch-icon, tab, toast, tooltip) are side-effect initialisers: importing them from tabler.ts wires the behaviour. The pattern is a data-bs-toggle query at import time:
// js-docs-start switch-icon-init
const switchesTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="switch-icon"]'))
switchesTriggerList.map(function (switchTriggerEl: HTMLElement) {
switchTriggerEl.addEventListener('click', (e: MouseEvent) => {
const active = switchTriggerEl.classList.toggle('active')
switchTriggerEl.setAttribute('aria-pressed', active ? 'true' : 'false')
})
})
// js-docs-end switch-icon-init- The attribute API stays
data-bs-*. Renaming it todata-tblr-*is a breaking change held for 2.0 — do not start it here. - Keep the accessible state in sync with the class (
aria-pressed,aria-expanded), as above. - A new module must be imported from
js/tabler.ts, or it never ships. - There is no shared colour helper: demo charts resolve
--tblr-*colours to hex inshared/components/demo/Chart.astro.
4. Docs markers
js-docs-start <name> / js-docs-end <name> mark the snippet a documentation page shows for that behaviour (docs/components/CodeDocs.astro, docs/lib/llms.ts). Keep the marked region self-contained and copy-pasteable, and check who references the name before renaming it.
Show full SKILL.md (208 more words)Show less
5. Tests
Tests run in a real browser — vitest browser mode with Playwright Chromium, not jsdom:
pnpm --filter @tabler/core test:js
pnpm --filter @tabler/core test:js:watch
pnpm --filter @tabler/core test:js:coveragejs/tests/unit/**/*.spec.ts— behaviour, usingjs/tests/helpers/fixture.tsto mount markup.js/tests/visual/*.html— pages for looking at a component by hand.- The first run needs Playwright's browser installed; if it fails on a missing binary, install it rather than switching the config to jsdom.
6. Build and budget
vite builds each entry as a library in es + umd (BASE_NAME selects the entry), then terser produces the .min variants with source maps. Sizes are enforced:
| File | Limit |
|---|---|
dist/js/tabler.js | 64 kB |
dist/js/tabler.min.js | 48 kB |
dist/js/tabler-theme.js | 1 kB |
pnpm --filter @tabler/core build
pnpm run bundlewatchPrefer a small dependency-free implementation over pulling a package in: every kilobyte here lands on every Tabler page.
7. Checklist
- New module imported from
js/tabler.ts(or deliberately kept out of the bundle) -
data-bs-*attribute API unchanged; accessible state updated with the class - No export, option or event removed or renamed, and no new throw on input that used to work (
backward-compat) - Bootstrap-port changes stay close to upstream and come with a
js/tests/unitspec -
js-docs-*markers intact and self-contained -
pnpm --filter @tabler/core test(js + scss) clean -
pnpm run type-checkandpnpm run lint:prettierclean -
pnpm run bundlewatchwithin budget, or the new limit justified in the PR - Docs page updated and changeset written
© tabler, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/core-js of tabler/tabler.
Open the folder on GitHubat commit dcacb65
Compare with similar skills
Tabler Core JavaScript next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tabler Core JavaScript this skilltabler/tabler | 42k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Pierre Trees File Treepierrecomputer/pierre | 6.2k | — | ~473 | Automated safety check: Pass | Apache-2.0 | |
| Creating Docs Code Exampleshandsontable/handsontable | 22k | — | ~2.2k | Automated safety check: Pass | Custom licence | |
| Frontend UIoomol-lab/open-flow | 223 | — | ~857 | Automated safety check: Pass | Apache-2.0 | |
| Frontend UI Dark TSmicrosoft/skills | 3.1k | 5 repos | ~3.6k | Automated safety check: Pass | MIT | |
| React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase | 10k | 2 repos | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
Creating Docs Code Examples
handsontable/handsontable
Sets the rules for writing Handsontable documentation examples in JavaScript, TypeScript, React, Angular and Vue, with the imports, registration and licence key each needs.
Frontend UI
oomol-lab/open-flow
Implement and review Open Flow frontend components, styling, layout, and interactions.
- Official
Frontend UI Dark TS
microsoft/skills
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
Vuetify Skilld
logue/vite-vuetify-ts-starter
Vue Material Component Framework. An agent skill from logue/vite-vuetify-ts-starter.
More from tabler/tabler
All 21 skills in this repoTabler Astro Dev Server
tabler/tabler
Starts the right Tabler dev server, keeps it from clashing with builds and verifies changes in the browser before a page or component is handed back.
Tabler Astro Component Scripts
tabler/tabler
Rules for adding or fixing client-side scripts in Tabler's Astro components so the copied preview HTML stays readable, self-contained and runs in the right order.
Tabler Bootstrap Component Rules
tabler/tabler
Sets the file structure, typing and Data API pattern for writing a new Bootstrap-style JavaScript component class in Tabler's vendored port of Bootstrap's JS.
Tabler Class Reference Tables
tabler/tabler
Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page.
Tabler Core SCSS
tabler/tabler
Rules for adding or changing styles in Tabler's core/scss framework: file placement, custom properties, dark mode, RTL, tests and build gates.
Tabler Demo Page Builder
tabler/tabler
Builds or updates a Tabler component preview page under preview/pages, covering the page skeleton, header, and card grid conventions.
Related
Works with
Categories
Questions about Tabler Core JavaScript
What does Tabler Core JavaScript do?
Guidance for changing the Tabler framework's own JavaScript in core/js: the tabler.js and tabler-theme.js bundles, the Bootstrap port and their tests. Two bundles are built from core/js, both public API with a size budget.js holds the plugin initializers, the Bootstrap components and the tabler helper namespace.
When should I use Tabler Core JavaScript?
Tabler Core JavaScript fits situations like: fixing or adding a data-bs-toggle handler in Tabler; changing the theme switcher without breaking first paint; fixing a misbehaving Bootstrap component in the vendored port.
How do I install Tabler Core JavaScript in Claude Code?
Run `npx skills add tabler/tabler --skill core-js -a claude-code`. Or copy the skill folder (.agents/skills/core-js in tabler/tabler) into .claude/skills/core-js in your project. Claude Code loads it when a task matches its description.
How do I install Tabler Core JavaScript in Codex?
Run `npx skills add tabler/tabler --skill core-js -a codex`. Or copy the skill folder (.agents/skills/core-js in tabler/tabler) into .agents/skills/core-js in your project. Codex loads it when a task matches its description.
Can I use Tabler Core JavaScript in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tabler/tabler --skill core-js -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/core-js, .gemini/skills/core-js, .github/skills/core-js and .opencode/skills/core-js in your project.
What does Tabler Core JavaScript need to run?
Going by SKILL.md and its folder, Tabler Core JavaScript needs the command-line tools its instructions call (pnpm). Our summary lists: A checkout of the Tabler repository.
Does Tabler Core JavaScript access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Tabler Core JavaScript safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Tabler Core JavaScript use?
Tabler Core JavaScript is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Tabler Core JavaScript use?
About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Tabler Core JavaScript?
Skills that share tags, products or a category with Tabler Core JavaScript: Pierre Trees File Tree (pierrecomputer/pierre, 6.2k stars), Creating Docs Code Examples (handsontable/handsontable, 22k stars), Frontend UI (oomol-lab/open-flow, 223 stars) and Frontend UI Dark TS (microsoft/skills, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Tabler Core JavaScript?
tabler (a GitHub organization) maintains it in tabler/tabler, which has 41,821 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 6, 2026.
Source: tabler/tabler on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.