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 Core SCSS

by tabler in 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.

MITAuto-check passedFrontend & Design

Install Tabler Core SCSS

skills CLI
$ npx skills add tabler/tabler --skill core-scss -a claude-code

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

GitHub CLI
$ gh skill install tabler/tabler core-scss --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/core-scss .claude/skills/core-scss && 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
core-scss
GitHub stars
42k
Token cost
~2k tokens
SKILL.md length
829 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Rules for adding or changing styles in Tabler's core/scss framework: file placement, custom properties, dark mode, RTL, tests and build gates.

  • Works in 9 steps: Where a style goes → The component pattern → Custom properties are authored bare → …
  • Adding a new component class, modifier or colour variant to Tabler
  • SKILL.md covers 1. Where a style goes, 2. The component pattern, 3. Custom properties are… and 4. Dark mode, plus 5 more sections
  • Calls pnpm and prettier

What it does

Tabler's `core/scss` folder is the product itself, so a class added there becomes public API for every user. The skill says where a style goes: component files under `ui/`, page chrome under `layout/`, utility classes under `utils/`, plus mixins, helpers, managed Bootstrap partials, vendor overrides and tests. A new partial is only compiled once it is `@forward`ed from `_core.scss` or its bundle, and cross-module `@extend` rules stay in `_extends.scss`, which loads last.

In the component pattern every themeable value becomes a custom property declared at the top of the component's root rule and seeded from a Sass variable, and modifiers set custom properties rather than redeclaring properties. Custom properties are authored bare, because the public `--tblr-` prefix is added at build time by a postcss pass. Sass variables go in `_variables.scss` with `!default` and dark-mode values in `_variables-dark.scss`. The skill also covers RTL, docs markers, sass-true unit tests and the lint and size gates.

When your agent uses it

  • Adding a new component class, modifier or colour variant to Tabler
  • Adding or renaming a Sass or CSS custom property
  • Making a component behave correctly in dark mode or RTL
  • Before editing `_variables.scss`, `_props.scss` or anything under `core/scss/ui/`

Example prompts

  • “Add a small size modifier to the badge component following Tabler's custom property pattern.”
  • “Add a dark mode value for the new card variant and check the lint and size gates.”
  • “Where should a new helper for sticky headers go in core/scss?”

Requirements

  • A checkout of the Tabler repository with its build and lint tooling

Workflow steps

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

  1. Where a style goes
  2. The component pattern
  3. Custom properties are authored bare
  4. Dark mode
  5. RTL
  6. Docs markers
  7. Unit tests (sass-true)
  8. Gates
  9. Checklist

What it can do on your machine

Read from SKILL.md and the folder at commit c2a7cbf. 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
    • prettier

    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 SCSS loads about 2k tokens when it runs. Until then it costs about 128 tokens; SKILL.md has 829 words of instructions outside code blocks.

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

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 c2a7cbf, republished under its MIT licence (© tabler). 829 words, ~1,988 tokens.

Download SKILL.mdSave it as .claude/skills/core-scss/SKILL.md (or your agent's skills folder).
name
core-scss
description
Write or change styles in `core/scss/` — the framework itself. Use whenever a component needs a new class, modifier, size or colour variant, when a Sass or CSS custom property is added or renamed, when dark mode or RTL behaviour is involved, and before touching `_variables.scss`, `_props.scss` or anything under `core/scss/ui/`. Covers where a style goes, the custom-property pattern and its build-time `--tblr-` prefix, dark mode, RTL, the docs markers, the SCSS unit tests and the lint/size gates.

Styles in core/scss

core/scss is the product: a class that ships here is public API for every Tabler user. Components in shared/ui only assemble the class names defined here.

1. Where a style goes

PathHolds
ui/_*.scsscomponents — .badge, .card, .steps, one file per component
layout/_*.scsspage chrome — root, core, navbar, page, footer, dark, animations, accessibility
utils/_*.scssutility classes — colors, background, text, sizing, shadow, opacity, scroll, hover
mixins/, helpers/mixins, functions, the utilities API
bootstrap/Tabler's managed copies of Bootstrap's own partials
vendor/overrides for third-party plugin CSS
tests/sass-true unit tests (see section 7)

Entry points: tabler.scss (which forwards _core.scss, then _extends.scss last), plus the standalone bundles tabler-flags, tabler-marketing, tabler-payments, tabler-props, tabler-socials, tabler-themes, tabler-vendors. A new partial is not compiled until it is @forwarded from _core.scss (or the bundle it belongs to).

The module graph uses @use / @forward: a partial starts with @use '../config' as *, which is the hub forwarding settings, variables, variables-dark, maps, mixins and utilities. Cross-module @extend rules must stay in _extends.scss, which loads last.

2. The component pattern

scss
@use '../config' as *;

.badge {
  --badge-padding-x: #{$badge-padding-x};
  --badge-font-size: #{$badge-font-size};
  --badge-line-height: 1;
  display: inline-flex;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: var(--badge-font-size);
  @include border-radius(var(--badge-border-radius));
}
  • Every themeable value becomes a custom property declared at the top of the component's root rule, seeded from a Sass variable (#{$badge-font-size}). Declarations below read var(--badge-*), never the Sass variable directly — that is what lets users retheme without recompiling.
  • A value with no reason to be overridden can be a literal (--badge-line-height: 1).
  • Modifiers set custom properties rather than redeclaring properties: .badge-sm { --badge-font-size: … }.
  • Sass variables go to _variables.scss with !default, dark-mode counterparts to _variables-dark.scss.

3. Custom properties are authored bare

Write --badge-bg, not --tblr-badge-bg. The public --tblr- prefix is added at build time by .build/css-var-prefix.ts (a postcss pass in build-css.ts).

The consequence to remember: names owned by third-party libraries must not be prefixed. cssVarIgnore lists them (--bs-, --fc-, --gl-, --plyr-, --ts-, …). Prefixing one detaches the theming with no error anywhere — the library keeps reading its own name and simply never sees the value. When a vendor override introduces a new foreign name, add it to cssVarIgnore; core/scss/tests/css-var-prefix.test.mjs snapshots every custom property of tabler-vendors.scss, so a missing entry shows up as a --tblr--prefixed foreign name in the snapshot diff.

The snapshot moves in the other direction too. A vendor override that starts reading a Tabler name (var(--success), var(--form-valid-border-color)) adds a correctly prefixed --tblr-* entry, and the test fails until the snapshot is refreshed. Read the diff: every new name is one Tabler owns → pnpm --dir core exec vitest run --config vitest.scss.config.mjs -u and commit the .snap; a name a library owns → cssVarIgnore, never -u.

Global properties (--dir, colours, fonts, spacing) live in _props.scss, which emits them on :root, :host.

4. Dark mode

  • Colour pairs are expressed with light-dark() where possible (_variables.scss, layout/_root.scss), so one declaration covers both modes.
  • What cannot be expressed that way goes to _variables-dark.scss, or to layout/_dark.scss for the visibility helpers.
  • Dark mode is keyed on .theme-dark, [data-bs-theme='dark'] and [data-theme='dark'] — match all three when you add a selector, and keep the whole block behind @if $enable-dark-mode.
Show full SKILL.md (339 more words)Show less

5. RTL

RTL stylesheets are generated by rtlcss in build-css.ts (--rtl), so do not hand-write RTL overrides. Two rules:

  • Prefer logical properties (padding-inline-start, inset-inline-end) — rtlcss then needs no help.
  • A physical transform that must flip uses the --dir multiplier (translateX(calc(var(--dir) * -50%))), and the declaration is marked /* rtl:ignore */ so rtlcss does not negate an already-correct calc. Both patterns are in _utilities.scss and ui/_steps.scss.

6. Docs markers

Snippets shown on documentation pages are pulled from the source with markers, so the docs cannot drift:

scss
// scss-docs-start alert-variables
$alert-padding-y: … !default;
// scss-docs-end alert-variables

docs/components/CodeDocs.astro and docs/lib/llms.ts read these. When you rename or move a marked block, check who references the marker name before deleting it.

7. Unit tests (sass-true)

core/scss/tests/*.test.scss are real unit tests over mixins and functions, auto-discovered by core/scss/tests/scss.test.mjs and run through vitest:

bash
pnpm --filter @tabler/core test:scss
pnpm --filter @tabler/core test        # js + scss

Add a test when you write a mixin whose output is easy to break silently — the _cards.test.scss case (a 0% that must keep its unit or the whole color-mix() drops) is the model. Note that stylelint deliberately ignores core/scss/tests/**: autofix there would rewrite the assertions.

8. Gates

bash
pnpm --filter @tabler/core lint:scss       # stylelint (twbs config; prettier owns formatting)
pnpm run lint:scss                         # + find-unused-sass-variables (`lint:scss:vars` in core)
pnpm run check:tokens             # shared/lib/tokens.ts must match the Sass maps
pnpm run lint:prettier                     # formatting
pnpm run bundlewatch                       # size budgets (tabler.css 80 kB, tabler.min.css 75 kB)
  • A new entry in $theme-colors, $avatar-sizes and friends must be regenerated into shared/lib/tokens.ts with pnpm run generate:tokens — the check gate fails otherwise.
  • An unused Sass variable fails lint:scss; delete it or use it.
  • Growth past a bundlewatch limit is a decision, not an accident: raise the number in core/package.json deliberately and say so in the PR.

9. Checklist

  • Partial in the right directory and @forwarded from _core.scss or its bundle
  • Themeable values as custom properties at the top of the root rule, seeded from !default Sass variables
  • Custom properties written bare; new foreign names added to cssVarIgnore
  • Dark mode via light-dark() or all three dark selectors, behind $enable-dark-mode
  • Logical properties, or --dir + /* rtl:ignore */; no hand-written RTL
  • No class, custom property, Sass variable or mixin parameter removed or renamed without an alias (backward-compat)
  • sass-true test for a mixin that can break silently
  • lint:scss, check:tokens, lint:prettier, test:scss clean
  • check:compat clean after a core build, with no new line in .build/compat-baseline.txt
  • Docs page and class table updated (write-docs, class-reference), 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-scss of tabler/tabler.

Open the folder on GitHubat commit c2a7cbf

Compare with similar skills

Tabler Core SCSS 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 Core SCSS compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tabler Core SCSS this skilltabler/tabler42k—~2kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Liuguang Banlan UIsickn33/agentic-awesome-skills47k1 repos~2.5kAutomated safety check: PassMIT
Tailwind Theme Builderjezweb/claude-skills1.1k1 repos~3.2kAutomated safety check: PassMIT
Preline Theme Generatorhtmlstreamofficial/preline6.5k—~619Automated safety check: WarnCustom licence
Token SystemOrange-OpenSource/Orange-Boosted-Bootstrap222—~780Automated safety check: PassMIT

Similar skills

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Frontend & DesignAuto-check passed

  • Tailwind Theme Builder

    jezweb/claude-skills

    Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3.2k tokens
    Frontend & DesignAuto-check passed

  • Preline Theme Generator

    htmlstreamofficial/preline

    Generates light and dark Preline theme CSS from a brand color or mood, previews it, and validates token coverage through bundled local scripts.

    6.5k GitHub stars~619 tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: warnings

  • Token System

    Orange-OpenSource/Orange-Boosted-Bootstrap

    OUDS design token system rules and architecture. An agent skill from Orange-OpenSource/Orange-Boosted-Bootstrap.

    222 GitHub stars~780 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    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 yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

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

    42k GitHub stars~1.4k tokensUpdated yesterday
    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 yesterday
    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 yesterday
    Auto-check passed

Categories

Questions about Tabler Core SCSS

What does Tabler Core SCSS do?

Rules for adding or changing styles in Tabler's core/scss framework: file placement, custom properties, dark mode, RTL, tests and build gates. Tabler's `core/scss` folder is the product itself, so a class added there becomes public API for every user. The skill says where a style goes: component files under `ui/`, page chrome under `layout/`, utility classes under `utils/`, plus mixins, helpers, managed Bootstrap partials, vendor overrides and tests.

When should I use Tabler Core SCSS?

Tabler Core SCSS fits situations like: adding a new component class, modifier or colour variant to Tabler; adding or renaming a Sass or CSS custom property; making a component behave correctly in dark mode or RTL; before editing `_variables.scss`, `_props.scss` or anything under `core/scss/ui/`.

How do I install Tabler Core SCSS in Claude Code?

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

How do I install Tabler Core SCSS in Codex?

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

Can I use Tabler Core SCSS 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-scss -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-scss, .gemini/skills/core-scss, .github/skills/core-scss and .opencode/skills/core-scss in your project.

What does Tabler Core SCSS need to run?

Going by SKILL.md and its folder, Tabler Core SCSS needs the command-line tools its instructions call (pnpm and prettier). Our summary lists: A checkout of the Tabler repository with its build and lint tooling.

Does Tabler Core SCSS 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 SCSS 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 SCSS use?

Tabler Core SCSS 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 SCSS use?

About 2k tokens (SKILL.md is roughly 8k 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 SCSS?

Skills that share tags, products or a category with Tabler Core SCSS: MCP Development (coollabsio/coolify, 63k stars), Liuguang Banlan UI (sickn33/agentic-awesome-skills, 47k stars), Tailwind Theme Builder (jezweb/claude-skills, 1.1k stars) and Preline Theme Generator (htmlstreamofficial/preline, 6.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tabler Core SCSS?

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