New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tabler Class Reference Tables

by tabler in tabler/tabler

Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page.

MITAuto-check passedFrontend & Design

Install Tabler Class Reference Tables

skills CLI
$ npx skills add tabler/tabler --skill class-reference -a claude-code

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

GitHub CLI
$ gh skill install tabler/tabler class-reference --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/.agents/skills/class-reference .claude/skills/class-reference && 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/

Facts

Skill name
class-reference
GitHub stars
42k
Token cost
~1.4k tokens
SKILL.md length
551 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page.

  • Works in 8 steps: Shape → The eight types → Collapse generated families → …
  • A Tabler component docs page needs its class list added
  • SKILL.md covers 1. Shape, 2. The eight types, 3. Collapse generated families and 4. Leave out, plus 4 more sections
  • Calls pnpm and python3

What it does

Every component page in the Tabler docs carries a classnames block in its front matter, which an Astro component renders as a table, a script reprints for agents, and a strict schema validates at build time. The skill has the agent edit that block rather than a markdown table, using entries with a class, a description and an optional default flag that shows a badge.

Classes are grouped into eight types: component, part, style, modifier, behavior, direction, color and size. Generated families such as button colors or breakpoints collapse into one row with a brace placeholder when the members are mechanical, while meaningful variants like sizes stay as separate rows. Classes that scripts toggle, plain Bootstrap utilities and any class that does not exist are left out, and the last one is named as the main failure to guard against.

When your agent uses it

  • A Tabler component docs page needs its class list added
  • A component gains or loses a class in core/scss and the table must follow
  • Checking that a classnames block matches classes that actually exist

Example prompts

  • “Add the classnames front matter to the new badge component page.”
  • “I added a btn-ghost variant in the SCSS, so update the button class reference.”
  • “Audit the card page's class table for classes that don't exist.”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Shape
  2. The eight types
  3. Collapse generated families
  4. Leave out
  5. Writing the description
  6. Check every class exists
  7. Also set source
  8. Finish

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:

    • pnpm
    • python3

    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 Class Reference Tables loads about 1.4k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 551 words of instructions outside code blocks.

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

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). 551 words, ~1,375 tokens.

Download SKILL.mdSave it as .claude/skills/class-reference/SKILL.md (or your agent's skills folder).
name
class-reference
description
Write or update the `classnames` front matter that renders the class reference table on a Tabler docs page. Use whenever a component page needs its class list added, a component gains or loses a class in `core/scss/**`, or the user asks for a class reference, a class table, or a `classnames` block. Also consult it proactively after adding a class to an existing component, since the table is hand-written and will not notice on its own.

Class reference front matter

Every component page carries a classnames block in its front matter. DocsClassnames.astro renders it as a table at the end of the page, docs/pages/llms.txt.ts reprints it for agents, and docs/content.config.ts validates it. Editing the table means editing the front matter — there is no markdown table to touch.

1. Shape

yaml
classnames:
  component:
    - class: alert
      desc: Container element
  part:
    - class: alert-icon
      desc: Icon slot, sized and colored with the alert
  color:
    - class: alert-{color}
      desc: Any base color, for example alert-success or alert-blue

The schema is strict (docs/content.config.ts), so a mistyped key fails the build. Each entry takes class, desc, and optionally default: true, which renders a "default" badge.

2. The eight types

Rendered in this order regardless of the order in the file, so group by meaning rather than by position:

TypeHoldsExamples
componentthe class that makes the thingalert, btn, card
partsub-elements it is built fromcard-header, alert-icon
stylesurface treatmentbtn-outline, btn-ghost, alert-minor
modifiershape or box changesbtn-pill, btn-square, accordion-flush
behaviorstate and motionbtn-loading, icon-pulse, table-hover
directionplacement and orientationoffcanvas-start, steps-vertical
colorcolor variantsalert-{color}, btn-{color}
sizesize variantsbtn-sm, avatar-{size}

The split between style, modifier and behavior follows daisyUI: how it looks, what shape it is, how it reacts.

3. Collapse generated families

Tabler generates colors, sizes, breakpoints and directions with loops. Listing each one turns a reference into a wall — btn alone compiles to 141 classes. Write one row with a brace placeholder and say what fills it:

yaml
  - class: btn-{color}
    desc: Any base or social color, for example btn-primary or btn-facebook
  - class: table-mobile-{breakpoint}
    desc: Stacks rows into blocks below the breakpoint
  - class: switch-icon-slide-{direction}
    desc: Slides the icons; up, down, left, right, start or end

Collapse when the family is mechanical and complete. Keep separate rows when the members differ in meaning — btn-sm, btn-lg and btn-xl are worth spelling out, flag-country-{code} is not (258 members).

4. Leave out

  • Classes a script toggles rather than an author writes: carousel-item-next, modal-backdrop, accordion-collapse, active, show.
  • Bootstrap utilities that are not part of the component.
  • Classes that do not exist. This is the failure mode to guard against — see section 6.

5. Writing the description

Say what the class does, from the rule, not from the name:

  • alert-minor — "Drops the tinted background, keeps a plain border", not "minor style".
  • td-truncate — "Cell whose content is cut with an ellipsis instead of stretching the table".

One line, no trailing period needed, simple English. Read the SCSS before writing:

shell
sed -n '/^\.alert-minor/,/}/p' core/scss/ui/_alerts.scss
Show full SKILL.md (205 more words)Show less

6. Check every class exists

Descriptions are hand-written, so a class can be invented or survive a rename. Three wrong entries were caught this way while the tables were first written — trending and map were never classes at all, and .map matched only a stray fragment in the compiled CSS.

Verify against the compiled stylesheet, and confirm the rule has a body rather than trusting a text match:

shell
python3 -c "
import re
css = open('core/dist/css/tabler.css').read()
for c in ['alert-minor', 'alert-icon']:
    m = re.search(r'(^|\})\s*\.' + c + r'\s*\{([^}]*)\}', css)
    print(c, '->', ' '.join(m.group(2).split())[:70] if m else 'NOT A RULE')
"

Plugin classes live in their own sheets — tabler-flags.css, tabler-socials.css, tabler-payments.css, tabler-vendors.css — so read the right one.

Components with no class of their own are real: trending is built from text-green plus an arrow icon, and the map page frames an embed with ratio. Document what the page actually uses.

7. Also set source

Pages that carry classnames should carry source too — the repo-relative file that implements the component, rendered as the "Source code" link:

yaml
source: core/scss/ui/_alerts.scss

Most map to core/scss/ui/_<name>s.scss. Exceptions worth knowing: segmented-control → _segmented.scss, step → _steps.scss, star-rating → _stars.scss, divider → _type.scss, tab → _nav.scss, tooltip → bootstrap/_tooltip.scss, trending → shared/ui/Trending.astro.

8. Finish

  • Load the page and confirm the table renders and "Class reference" reaches the "On this page" rail.
  • Run pnpm run lint and pnpm --dir docs run type-check.
  • New pages also need a menu entry in shared/data/docs.json — see the write-docs skill.

© 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/class-reference of tabler/tabler.

Open the folder on GitHubat commit b168be1

Compare with similar skills

Tabler Class Reference Tables 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 Class Reference Tables compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tabler Class Reference Tables this skilltabler/tabler42k—~1.4kAutomated safety check: PassMIT
Create ComponentEndava/BEEQ163—~1.5kAutomated safety check: PassApache-2.0
Docs LookupProgrammerAnthony/Expert-Coding-Harness235—~640Automated safety check: PassMIT
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types111—~1.1kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Chakra UI v3 Refactor and Reviewchakra-ui/chakra-ui41k—~2.8kAutomated safety check: PassMIT

Similar skills

  • Create Component

    Endava/BEEQ

    Create a new BEEQ StencilJS web component. An agent skill from Endava/BEEQ.

    163 GitHub stars~1.5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Docs Lookup

    ProgrammerAnthony/Expert-Coding-Harness

    通过 Context7 MCP 获取库和框架的实时最新文档，而非依赖训练数据，防止 API 幻觉。适用于查询任何库或框架的用法、配置、示例代码。触发词：怎么用、怎么配置、API参考、文档、示例代码、用法、接口、库文档、框架文档、documentation、docs、how to use、API…

    235 GitHub stars~640 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • 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

  • Chakra UI v3 Refactor and Review

    chakra-ui/chakra-ui

    Reviews and converts UI code to Chakra UI v3, producing a critique, rewritten code or both, from plain HTML, Tailwind, CSS Modules or styled-components.

    41k GitHub stars~2.8k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Kill AI Slop

    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.

    1.3k GitHub stars~1.4k tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed

More from tabler/tabler

All 21 skills in this repo

  • Tabler 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.

    42k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

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

    42k GitHub stars~2.1k tokensUpdated today
    Auto-check passed

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

    42k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Tabler Core JavaScript

    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.

    42k GitHub stars~1.4k tokensUpdated today
    Auto-check passed

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

    42k GitHub stars~2k tokensUpdated today
    Auto-check passed

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

    42k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Tabler Class Reference Tables

What does Tabler Class Reference Tables do?

Writes or updates the classnames front matter that renders the class table at the end of a Tabler component docs page. Every component page in the Tabler docs carries a classnames block in its front matter, which an Astro component renders as a table, a script reprints for agents, and a strict schema validates at build time. The skill has the agent edit that block rather than a markdown table, using entries with a class, a description and an optional default flag that shows a badge.

When should I use Tabler Class Reference Tables?

Tabler Class Reference Tables fits situations like: A Tabler component docs page needs its class list added; A component gains or loses a class in core/scss and the table must follow; checking that a classnames block matches classes that actually exist.

How do I install Tabler Class Reference Tables in Claude Code?

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

How do I install Tabler Class Reference Tables in Codex?

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

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

What does Tabler Class Reference Tables need to run?

Going by SKILL.md and its folder, Tabler Class Reference Tables needs the command-line tools its instructions call (pnpm and python3).

Does Tabler Class Reference Tables 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 Class Reference Tables 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 Class Reference Tables use?

Tabler Class Reference Tables 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 Class Reference Tables use?

About 1.4k tokens (SKILL.md is roughly 5.5k 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 Class Reference Tables?

Skills that share tags, products or a category with Tabler Class Reference Tables: Create Component (Endava/BEEQ, 163 stars), Docs Lookup (ProgrammerAnthony/Expert-Coding-Harness, 235 stars), React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tabler Class Reference Tables?

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.