Migrate Webapi Selectall
microsoft/power-platform-skills
Reviews and migrates deprecated wildcard () values in Power Pages Web API fields site settings to least-privilege explicit Dataverse columns.
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.
$ npx skills add tabler/tabler --skill astro-scripts -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tabler/tabler astro-scripts --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/astro-scripts .claude/skills/astro-scripts && 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 "astro-scripts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/astro-scripts into .claude/skills/astro-scripts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "astro-scripts", 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/astro-scriptsType 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 astro-scripts -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tabler/tabler astro-scripts --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/astro-scripts .agents/skills/astro-scripts && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "astro-scripts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/astro-scripts into .agents/skills/astro-scripts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "astro-scripts", 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 astro-scripts -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tabler/tabler astro-scripts --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/astro-scripts .cursor/skills/astro-scripts && 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 "astro-scripts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/astro-scripts into .cursor/skills/astro-scripts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "astro-scripts", 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/astro-scripts--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 astro-scripts -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tabler/tabler astro-scripts --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/astro-scripts .gemini/skills/astro-scripts && 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 "astro-scripts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/astro-scripts into .gemini/skills/astro-scripts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "astro-scripts", 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 astro-scriptsInstalls 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 astro-scripts -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/astro-scripts .github/skills/astro-scripts && 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 "astro-scripts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/astro-scripts into .github/skills/astro-scripts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "astro-scripts", 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 astro-scripts -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 astro-scripts --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/astro-scripts .opencode/skills/astro-scripts && 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 "astro-scripts" agent skill from https://github.com/tabler/tabler/tree/dev/.agents/skills/astro-scripts into .opencode/skills/astro-scripts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "astro-scripts", 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.
astro-scriptsRules 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.
In the Tabler project the preview HTML is the product: people copy a page from `preview/dist` and expect its scripts to be readable and self-contained. The first rule is that Astro must never bundle a script, so every script uses the `is:inline` attribute and contains plain JavaScript with no type annotations or casts. `getElementById()` with a null guard replaces a cast, and the built page should be checked to confirm the code sits between its markers rather than in an `_astro` chunk.
Scripts render at the end of the body, after their markup and after the vendor libraries in the head. They travel through `CaptureScript`, the `addPageScript()` registry and `PageScripts` in the base and docs layouts. Registration must stay synchronous, the registry does not remove duplicates so two instances of a component emit two scripts that must be harmless, and the registry is keyed by `Astro.request` so concurrent renders never share scripts. The description adds guidance on `define:vars`, the IIFE trap, init timing and per-instance registries.
10 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit dcacb65. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
pnpmFrom the folder's file list and the shell code blocks in SKILL.md.
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.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Tabler Astro Component Scripts loads about 2.1k tokens when it runs. Until then it costs about 131 tokens; SKILL.md has 979 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.
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.
The full file from tabler/tabler at commit dcacb65, republished under its MIT licence (© tabler). 979 words, ~2,066 tokens.
.claude/skills/astro-scripts/SKILL.md (or your agent's skills folder).The preview HTML is the product: users copy a page out of preview/dist and expect the scripts in it to be readable and self-contained. That single fact drives every rule below.
Always <script is:inline>. A plain <script> is bundled, hashed, and moved into a module chunk — invisible in the copied HTML — and a plain <style> makes Astro stamp data-astro-cid-* on every element of the component.
An inline script is plain JavaScript. Type annotations, as HTMLInputElement, function (this: …) — anything the browser cannot parse — is the tell that a script is still being bundled, whatever the comment markers around it say. Two modal scripts shipped that way for months: the BEGIN / END comments wrapped nothing, and the copied modal had a validator that never ran. Use getElementById() with a null guard instead of a cast, and check the built page: the code must sit between its markers, not in a _astro/*.js chunk.
Scripts render at the end of <body>, not where the component sits, so they run after their markup and after the vendor libraries in <head>. The route:
<CaptureScript> → addPageScript() → page-scripts registry → <PageScripts />shared/components/CaptureScript.astro captures its slot and registers it.shared/layouts/BaseLayout.astro and docs/layouts/DocsLayout.astro drain the registry through <PageScripts />.CaptureScript's frontmatter on purpose: Astro renders siblings concurrently, so a script registered after an await can miss the drain. Do not make CaptureScript async.Astro.request (a WeakMap, see shared/lib/page-scripts.ts). Astro renders pages concurrently in the build, the dev server and the html-diff / check-html crawlers, so a module-level array would hand one page's scripts to another. Keep it that way when touching the registry, and pass Astro.request from both the capture and the drain side.Modals take the same route: <CaptureModal> → addPageModal() → shared/lib/page-modals.ts → <PageModals /> at the end of <body>, before the settings panel. Same rules: synchronous registration, keyed by Astro.request, no dedupe — a component that wraps a modal in CaptureModal and is rendered twice emits two modals with the same id, so such a component takes an id prop like a script does.
---
import CaptureScript from '../components/CaptureScript.astro'
interface Props {
id: string
}
const { id } = Astro.props
const selector = `#wysiwyg-${id}`
---
<textarea id={`wysiwyg-${id}`}></textarea>
<CaptureScript>
<!-- BEGIN WYSIWYG -->
<script is:inline define:vars={{ selector }}>
function initWysiwyg() {
hugeRTE.init({ selector, height: 300 })
}
document.readyState !== 'loading' ? initWysiwyg() : document.addEventListener('DOMContentLoaded', initWysiwyg, { once: true })
</script>
<!-- END WYSIWYG -->
</CaptureScript>BEGIN … / END … comments mark the block in the copied HTML. Use the component name in caps.init… function plus the readyState guard, never a bare call: the script may be parsed after DOMContentLoaded has already fired.id prop and derives ids and selectors from it in the frontmatter. Never query by class or by tag — a page renders many instances.define:varsdefine:vars JSON-serialises the values and declares them as consts at the top of the script. It carries data only: no functions, no DOM nodes, no closures over frontmatter helpers. Pass config objects whole (chartOptions, markers, sortKeys) instead of interpolating them into a template string.
Two known snags:
define:vars script in an IIFE. Anything the markup calls (onclick="setPageListItems(this)") must be assigned to window explicitly — see shared/components/demo/AdvancedTable.astro. If several instances define the same global, make it stateless and resolve the instance from the clicked element.define:vars bindings used inside template literals. shared/components/marketing/hero/Side.astro carries a // @ts-nocheck for exactly that; copy the comment with its explanation rather than restructuring the script.Never accept JavaScript as a string — no raw-JS props, no expressions in data files turned into code with new Function or set:html. They are eval sinks and block a strict CSP. Instead:
<CaptureScript> and reaches the plugin instance through its window.tabler_* registry (see preview/pages/signatures.astro).x-formatter / y-formatter in shared/components/demo/Chart.astro).Plugin instances go into a namespaced global keyed by id, so demo pages, docs examples, and the browser console can reach them:
window.tabler_rating ??= {}
window.tabler_rating[ratingKey] = new StarRating(ratingSelector, { … })window.tabler_list, window.tabler_rating, … follow the same shape. Never store an instance in a bare global.
The library itself is not imported — it is a global loaded from libs.json:
core/libs.json for the plugin (npm, js, css, head); add an entry if it is missing.pageLibs={['nouislider', 'tom-select']} on DefaultLayout / BaseLayout.docs-libs: apexcharts (and css-plugins: for extra tabler-*.css).A component that silently assumes a global is a broken page whenever someone forgets the prop — say which lib it needs in a frontmatter comment and in the docs page.
prettier-plugin-astro cannot parse HTML comments or <script> tags inside a JSX expression ({cond && (<Fragment><!-- … --><script>…)}). Files that do this on purpose are listed at the bottom of .prettierignore. Prefer a plain (non-conditional) <CaptureScript> block so the file stays formattable; only add a new entry to .prettierignore when the conditional really is required, and keep it in the commented group.
An inline script that throws leaves the page looking fine but dead. Never hand one over unchecked:
astro-dev skill).read_console_messages — zero errors.window.tabler_* with javascript_tool.<script is:inline> inside <CaptureScript>, with BEGIN/END commentsid prop; selectors derived from it, no class-wide queriesdefine:vars, not string interpolationinit…() + readyState guardwindow (IIFE trap)window.tabler_* registry keyed by idcore/libs.json and declared via pageLibs / docs-libspnpm run format:prettier and pnpm run type-check clean© tabler, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/astro-scripts of tabler/tabler.
Open the folder on GitHubat commit dcacb65
Tabler Astro Component Scripts 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 Astro Component Scripts this skilltabler/tabler | 42k | — | ~2.1k | Automated safety check: Pass | MIT | |
| Migrate Webapi Selectallmicrosoft/power-platform-skills | 967 | — | ~5.3k | Automated safety check: Notes | MIT | |
| Sentry Browser SDKgetsentry/sentry-for-ai | 268 | — | ~6.5k | Automated safety check: Notes | Apache-2.0 | |
| Kill AI Slopyetone/kill-ai-slop | 1.3k | — | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Pierre Trees File Treepierrecomputer/pierre | 6.2k | — | ~473 | Automated safety check: Pass | Apache-2.0 | |
| Motion Dev Animations199-biotechnologies/motion-dev-animations-skill | 104 | 1 repos | ~2.8k | Automated safety check: Notes | MIT |
microsoft/power-platform-skills
Reviews and migrates deprecated wildcard () values in Power Pages Web API fields site settings to least-privilege explicit Dataverse columns.
getsentry/sentry-for-ai
Full Sentry SDK setup for browser JavaScript. An agent skill from getsentry/sentry-for-ai.
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
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…
199-biotechnologies/motion-dev-animations-skill
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.
TokenRhythm/opensquilla
Guides semantic, accessible HTML work: pages, forms, media and HTML5 APIs, plus how to deliver a runnable webpage project with a preview.
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/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/tabler
Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page.
tabler/tabler
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.
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/tabler
Builds or updates a Tabler component preview page under preview/pages, covering the page skeleton, header, and card grid conventions.
Works with
Categories
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. In the Tabler project the preview HTML is the product: people copy a page from `preview/dist` and expect its scripts to be readable and self-contained. The first rule is that Astro must never bundle a script, so every script uses the `is:inline` attribute and contains plain JavaScript with no type annotations or casts.
Tabler Astro Component Scripts fits situations like: adding browser behavior to a Tabler Astro component; initialising a third-party library or Bootstrap plugin inside a component; debugging an inline script that never runs in the built page; moving a script out of a page and into a reusable component.
Run `npx skills add tabler/tabler --skill astro-scripts -a claude-code`. Or copy the skill folder (.agents/skills/astro-scripts in tabler/tabler) into .claude/skills/astro-scripts in your project. Claude Code loads it when a task matches its description.
Run `npx skills add tabler/tabler --skill astro-scripts -a codex`. Or copy the skill folder (.agents/skills/astro-scripts in tabler/tabler) into .agents/skills/astro-scripts in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tabler/tabler --skill astro-scripts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/astro-scripts, .gemini/skills/astro-scripts, .github/skills/astro-scripts and .opencode/skills/astro-scripts in your project.
Going by SKILL.md and its folder, Tabler Astro Component Scripts needs the command-line tools its instructions call (pnpm). Our summary lists: A checkout of the Tabler repository.
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.
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.
Tabler Astro Component Scripts is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Tabler Astro Component Scripts: Migrate Webapi Selectall (microsoft/power-platform-skills, 967 stars), Sentry Browser SDK (getsentry/sentry-for-ai, 268 stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars) and Pierre Trees File Tree (pierrecomputer/pierre, 6.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
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.