Agent skill

Tabler Dashboard UI Kit

Creates admin dashboards and app pages with the Tabler UI kit on Bootstrap 5, using the published docs for real markup instead of guessed class names.

MITAuto-check passedFrontend & Design

Install Tabler Dashboard UI Kit

skills CLI

$ npx skills add tabler/tabler --skill tabler -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install tabler/tabler tabler --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .claude/skills && cp -r skills-src/docs/lib/agent-skills/tabler .claude/skills/tabler && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "tabler" agent skill from https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler into .claude/skills/tabler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tabler", 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

$skill-installer install https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler

Type 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.

skills CLI

$ npx skills add tabler/tabler --skill tabler -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install tabler/tabler tabler --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .agents/skills && cp -r skills-src/docs/lib/agent-skills/tabler .agents/skills/tabler && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "tabler" agent skill from https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler into .agents/skills/tabler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tabler", 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.

skills CLI

$ npx skills add tabler/tabler --skill tabler -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install tabler/tabler tabler --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/docs/lib/agent-skills/tabler .cursor/skills/tabler && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "tabler" agent skill from https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler into .cursor/skills/tabler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tabler", 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

$ gemini skills install https://github.com/tabler/tabler.git --path docs/lib/agent-skills/tabler

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add tabler/tabler --skill tabler -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install tabler/tabler tabler --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/docs/lib/agent-skills/tabler .gemini/skills/tabler && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "tabler" agent skill from https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler into .gemini/skills/tabler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tabler", 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.

GitHub CLI

$ gh skill install tabler/tabler tabler

Installs 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).

skills CLI

$ npx skills add tabler/tabler --skill tabler -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .github/skills && cp -r skills-src/docs/lib/agent-skills/tabler .github/skills/tabler && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "tabler" agent skill from https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler into .github/skills/tabler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tabler", 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.

skills CLI

$ npx skills add tabler/tabler --skill tabler -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install tabler/tabler tabler --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/tabler/tabler.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/docs/lib/agent-skills/tabler .opencode/skills/tabler && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "tabler" agent skill from https://github.com/tabler/tabler/tree/dev/docs/lib/agent-skills/tabler into .opencode/skills/tabler/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tabler", 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: tabler
GitHub stars: 42k
Token cost: ~1.5k tokens
SKILL.md length: 558 words
Files: 1
Skills in repo: 21
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Creates admin dashboards and app pages with the Tabler UI kit on Bootstrap 5, using the published docs for real markup instead of guessed class names.

Creating an admin dashboard or settings page styled with Tabler
SKILL.md covers Read the docs, do not guess…, Install, Page skeleton and Icons, plus 3 more sections
Calls npm; reaches tabler.io
A project already depends on @tabler/core and needs new pages

What it does

Tabler is a free MIT-licensed UI kit for admin dashboards that ships compiled CSS and JavaScript in the @tabler/core npm package, with Bootstrap 5 classes and behavior still working underneath. The skill tells the agent to read the published documentation rather than guess class names, and never to invent tabler-prefixed classes.

The docs site offers an llms.txt page index, a markdown version of any page by appending .md, and a single llms-full.txt file. Before writing markup for a component, the agent fetches that component's markdown page and copies the closest example. Installation works from a CDN, where integrity and crossorigin attributes must stay unchanged, or through npm with imports of the core CSS and JS files.

Pages follow one skeleton: a page wrapper with a header navbar, and a vertical sidebar placed before the page wrapper when needed. Content goes in cards inside row-deck row-cards so heights align, with container-xl for boxed pages and container-fluid for full width. Optional plugin stylesheets cover flags, socials, payments, vendors, marketing and themes, and framework guides exist for React, Vue, Next.js and several others.

When your agent uses it

Creating an admin dashboard or settings page styled with Tabler
A project already depends on @tabler/core and needs new pages
Building a data table or form that must match Tabler's markup

Example prompts

“Build an admin dashboard page with a sidebar, stat cards and a users table using Tabler.”
“Add a settings page with a profile form in the Tabler style to this project.”
“Set up Tabler from the CDN in index.html and add a basic page layout.”

Requirements

Network access to the Tabler docs site
The @tabler/core package or its CDN files

What it can do on your machine

Read from SKILL.md and the folder at commit b168be1. 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:
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- tabler.io
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 Dashboard UI Kit loads about 1.5k tokens when it runs. Until then it costs about 93 tokens; SKILL.md has 558 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~93
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k

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 b168be1, republished under its MIT licence (© tabler). 558 words, ~1,467 tokens.

Download SKILL.mdSave it as .claude/skills/tabler/SKILL.md (or your agent's skills folder).

name: tabler
description: Build admin dashboards and app UIs with Tabler, the open source UI kit built on Bootstrap 5. Use when a project uses Tabler or @tabler/core, or when asked for a dashboard, admin panel, settings page, data table or form styled with Tabler. Covers installation, the page layout, where to read the real component markup and the rules that keep the output consistent.

Tabler

Tabler is a free, MIT-licensed UI kit for admin dashboards built on Bootstrap 5. It ships compiled CSS and JavaScript in the @tabler/core npm package, and every Bootstrap 5 class and JavaScript behaviour keeps working underneath it.

Read the docs, do not guess class names

The documentation at ${site.docsUrl} is published for agents:

${site.docsUrl}/llms.txt lists every page with a one-line summary and a class reference for every component. Read it first to find the right page.
Append .md to any docs url to get that page as markdown, for example ${site.docsUrl}/ui/components/card.md. The file holds the prose and the exact markup of every example.
${site.docsUrl}/llms-full.txt is the whole documentation in one file.

Before writing markup for a component, fetch its .md page and copy the example that is closest to the task. Only use classes that appear in the docs or in Bootstrap 5. Do not invent tabler-* classes.

Install

Plain HTML, from the CDN:

html

${cdnPackageSnippet()}

Put the stylesheet in <head> and the script at the end of <body>. When the tags carry integrity and crossorigin attributes, keep them unchanged; the hashes belong to this exact version. In a project with a bundler install the package and import the same files:

shell

npm install @tabler/core

import '@tabler/core/dist/css/tabler.min.css'
import '@tabler/core/dist/js/tabler.min.js'

Optional plugin stylesheets live next to the core file: tabler-flags.min.css, tabler-socials.min.css, tabler-payments.min.css, tabler-vendors.min.css, tabler-marketing.min.css, tabler-themes.min.css. Framework guides for React, Vue, Next.js, Nuxt, Angular, SvelteKit, Astro, Laravel, Rails, Django and Symfony are at ${site.docsUrl}/ui/getting-started/frameworks.

Page skeleton

Every app page follows the same structure. ${site.docsUrl}/ui/layout/page-layouts.md has the complete markup for the horizontal, vertical and combined navigation variants.

html

<div class="page">
  <header class="navbar navbar-expand-md d-print-none">
    <!-- brand, navigation, user menu -->
  </header>
  <div class="page-wrapper">
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <div class="page-pretitle">Overview</div>
            <h2 class="page-title">Dashboard</h2>
          </div>
          <div class="col-auto ms-auto d-print-none">
            <!-- page actions -->
          </div>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="container-xl">
        <div class="row row-deck row-cards">
          <!-- cards -->
        </div>
      </div>
    </div>
    <footer class="footer footer-transparent d-print-none">
      <div class="container-xl"><!-- footer links --></div>
    </footer>
  </div>
</div>

A sidebar is <aside class="navbar navbar-vertical navbar-expand-lg"> placed before .page-wrapper.
Content goes in cards: .card with .card-header, .card-body, .card-footer. Put cards in .row.row-deck.row-cards so they align in height.
Use .container-xl for boxed pages and .container-fluid for full-width ones.

Icons

Icons are inline SVGs from Tabler Icons (https://tabler.io/icons, also the @tabler/icons packages). Give the <svg> the icon class, and add icon-sm, icon-md or icon-lg for size. In a button or link the icon goes before the text. Decorative icons get aria-hidden="true".

Show full SKILL.md (223 more words)Show less

Colour modes and theming

Set data-bs-theme="dark", "light" or "auto" on <html> to pick the colour mode. data-bs-theme-base, data-bs-theme-font, data-bs-theme-primary and data-bs-theme-radius adjust the gray shade, font family, primary colour and corner radius. Details are at ${site.docsUrl}/ui/getting-started/color-modes.md and ${site.docsUrl}/ui/getting-started/customize.md.

Colours are Bootstrap-style names: primary, secondary, success, warning, danger, info plus Tabler's palette (blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan). They work as bg-{color}, text-{color}, btn-{color}, badge bg-{color}, alert-{color} and so on.

Interactive components

Dropdowns, modals, offcanvas, tooltips, popovers, toasts, tabs and collapse use the Bootstrap 5 data API: data-bs-toggle, data-bs-target, data-bs-dismiss. Tooltips and popovers are initialised automatically by tabler.min.js when the element has data-bs-toggle="tooltip" or data-bs-toggle="popover". No extra JavaScript is needed for the rest.

Rules of thumb

Reach for a Tabler component before writing custom CSS. Spacing, colour and typography come from Bootstrap utilities (mb-3, text-secondary, fw-bold).
Wrap groups of buttons, badges, avatars or tags in .btn-list, .badge-list, .avatar-list or .tag-list instead of adding margins by hand.
Forms use .form-label, .form-control, .form-select, .form-check and .form-hint, the same as Bootstrap.
Tables use .table inside .table-responsive, often with .card-table when they fill a card.
Keep markup accessible: real <button> elements, labels on inputs, aria-label on icon-only buttons.
The live demo at ${site.previewUrl} shows every layout and component in use. When unsure how pieces fit together, look at the matching demo page.

Files

Just SKILL.md in docs/lib/agent-skills/tabler of tabler/tabler.

Open the folder on GitHubat commit b168be1

Compare with similar skills

Tabler Dashboard UI Kit 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.

Tabler Dashboard UI Kit compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Tabler Dashboard UI Kit this skilltabler/tabler	42k	—	~1.5k	Automated safety check: Pass	MIT	today
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago
UI UX Pro Maxsaoudi-h/solar-icons	184	18 repos	~11k	Automated safety check: Notes	Custom licence	today
DaisyUI Component Librarysaadeghi/daisyui	43k	—	~1.3k	Automated safety check: Pass	MIT	8 days ago
Design StyleCastor6/tactus	376	1 repos	~2.1k	Automated safety check: Pass	Apache-2.0	5 mo ago
Orchardcore Asset ManagerOrchardCMS/OrchardCore	8.2k	—	~1.5k	Automated safety check: Pass	BSD-3-Clause	today

Similar skills

UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
184 GitHub starsUsed in 18 repos~11k tokens
Frontend & DesignAuto-check: notes
DaisyUI Component Library
saadeghi/daisyui
Official daisyUI skill for Tailwind CSS projects, routing to install, usage, configuration, color and per-component guides before writing any HTML or JSX with its classes.
43k GitHub stars~1.3k tokensUpdated 8 days ago
Frontend & DesignAuto-check passed
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
376 GitHub starsUsed in 1 repo~2.1k tokens
Frontend & DesignAuto-check passed
Orchardcore Asset Manager
OrchardCMS/OrchardCore
Builds, watches, and manages frontend assets in OrchardCore.
8.2k GitHub stars~1.5k tokensUpdated today
Frontend & DesignAuto-check passed
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
795 GitHub starsUsed in 2 repos~1.1k tokens
Frontend & DesignAuto-check: notes

Questions about Tabler Dashboard UI Kit

What does Tabler Dashboard UI Kit do?

Creates admin dashboards and app pages with the Tabler UI kit on Bootstrap 5, using the published docs for real markup instead of guessed class names. Tabler is a free MIT-licensed UI kit for admin dashboards that ships compiled CSS and JavaScript in the @tabler/core npm package, with Bootstrap 5 classes and behavior still working underneath. The skill tells the agent to read the published documentation rather than guess class names, and never to invent tabler-prefixed classes.

When should I use Tabler Dashboard UI Kit?

Tabler Dashboard UI Kit fits situations like: creating an admin dashboard or settings page styled with Tabler; A project already depends on @tabler/core and needs new pages; building a data table or form that must match Tabler's markup.

How do I install Tabler Dashboard UI Kit in Claude Code?

Run `npx skills add tabler/tabler --skill tabler -a claude-code`. Or copy the skill folder (docs/lib/agent-skills/tabler in tabler/tabler) into .claude/skills/tabler in your project. Claude Code loads it when a task matches its description.

How do I install Tabler Dashboard UI Kit in Codex?

Run `npx skills add tabler/tabler --skill tabler -a codex`. Or copy the skill folder (docs/lib/agent-skills/tabler in tabler/tabler) into .agents/skills/tabler in your project. Codex loads it when a task matches its description.

Can I use Tabler Dashboard UI Kit 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 tabler -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tabler, .gemini/skills/tabler, .github/skills/tabler and .opencode/skills/tabler in your project.

What does Tabler Dashboard UI Kit need to run?

Going by SKILL.md and its folder, Tabler Dashboard UI Kit needs the command-line tools its instructions call (npm). Our summary lists: Network access to the Tabler docs site; The @tabler/core package or its CDN files.

Does Tabler Dashboard UI Kit access the network?

SKILL.md names 1 domain. In commands or code: tabler.io; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Tabler Dashboard UI Kit 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 Dashboard UI Kit use?

Tabler Dashboard UI Kit 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 Dashboard UI Kit use?

About 1.5k tokens (SKILL.md is roughly 5.9k 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 Dashboard UI Kit?

Skills that share tags, products or a category with Tabler Dashboard UI Kit: UI Styling (Ohh-889/skyroc, 795 stars), UI UX Pro Max (saoudi-h/solar-icons, 184 stars), DaisyUI Component Library (saadeghi/daisyui, 43k stars) and Design Style (Castor6/tactus, 376 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tabler Dashboard UI Kit?

tabler (a GitHub organization) maintains it in tabler/tabler, which has 41,830 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 7, 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.

Install Tabler Dashboard UI Kit

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Tabler

Read the docs, do not guess class names

Install

Page skeleton

Icons

Colour modes and theming

Interactive components

Rules of thumb

Files

Compare with similar skills

Similar skills

More from tabler/tabler

Related

Questions about Tabler Dashboard UI Kit