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

Handsontable Theme CSS Guide

by handsontable in handsontable/handsontable

Rules for styling Handsontable themes: CSS custom properties as the public API, SCSS file layout, cell padding from variables, and a ban on :has() selectors.

Custom licenceAuto-check passedFrontend & Design

Install Handsontable Theme CSS Guide

skills CLI
$ npx skills add handsontable/handsontable --skill handsontable-css-dev -a claude-code

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

GitHub CLI
$ gh skill install handsontable/handsontable handsontable-css-dev --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/handsontable/handsontable.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/handsontable-css-dev .claude/skills/handsontable-css-dev && 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
handsontable-css-dev
GitHub stars
22k
Token cost
~2.8k tokens
SKILL.md length
1,339 words
Files
1
Skills in repo
31
Repo updated
First seen
Licence
Custom licence

At a glance

Rules for styling Handsontable themes: CSS custom properties as the public API, SCSS file layout, cell padding from variables, and a ban on :has() selectors.

  • Works in 7 steps: CSS in all 6 theme files. → JS token in all 3 runtime files. → Key in the validation.ts allow-list. → …
  • Changing Handsontable theme SCSS or CSS custom properties
  • SKILL.md covers Themes, Rules, Cell padding comes from the… and File structure and commands, plus 4 more sections
  • Calls npm, pnpm and tsc

What it does

Handsontable ships three themes, main, classic and horizon, each with a variant without icons, making six bundles, and every styling change should be tested on all three. CSS custom properties are the public theming API, so renaming or removing a variable or a class counts as a breaking change and the old one must keep working. CSS and JavaScript stay in separate files, and each CSS feature must work in the browsers listed in `browser-targets.js`, which `eslint-plugin-compat` enforces.

Cell padding has to come from `--ht-cell-vertical-padding` and `--ht-cell-horizontal-padding`, since row height is computed from them and a padding set directly on a `td` throws off the scroll range. Base SCSS lives in `src/styles/`, theme SCSS in `src/themes/`, and the compiled CSS is gitignored and rebuilt with `build:styles`. A stylelint rule bans `:has()` for its style invalidation cost in Chrome, so JavaScript toggles a class instead.

When your agent uses it

  • Changing Handsontable theme SCSS or CSS custom properties
  • Adding or renaming a theme token without breaking existing users
  • Fixing row height or scroll glitches caused by cell padding overrides
  • Reviewing a stylesheet change against the no-:has() rule

Example prompts

  • “Rename a theme variable in the classic theme without breaking existing users.”
  • “Rows render too short after my td padding override. What is wrong?”
  • “Run the style build and stylelint after my theme changes and report any errors.”

Requirements

  • A checkout of the Handsontable repository
  • pnpm, to reinstall after editing the stylelint plugin

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. CSS in all 6 theme files.
  2. JS token in all 3 runtime files.
  3. Key in the validation.ts allow-list.
  4. Key in TokenKey.
  5. npm run test:unit --prefix handsontable --testPathPattern=themes passes.
  6. npm run test:types --prefix handsontable passes.
  7. Docs table updated.

What it can do on your machine

Read from SKILL.md and the folder at commit fff66b1. 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
    • pnpm
    • tsc

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm and 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

Handsontable Theme CSS Guide loads about 2.8k tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 1,339 words of instructions outside code blocks.

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

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,339 words (~2,798 tokens).

“Three themes, each with a -no-icons variant (6 bundles): ht-theme-main (default), ht-theme-classic, ht-theme-horizon, and ht-theme-main-no-icons, ht-theme-classic-no-icons, ht-theme-horizon-no-icons. Test all 3 themes after any styling change.”

— opening of SKILL.md by handsontable, Custom licence
name
handsontable-css-dev
path
handsontable/src/{styles,themes}/**

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .claude/skills/handsontable-css-dev of handsontable/handsontable.

Open the folder on GitHubat commit fff66b1

Compare with similar skills

Handsontable Theme CSS Guide 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.

Handsontable Theme CSS Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Handsontable Theme CSS Guide this skillhandsontable/handsontable22k—~2.8kAutomated safety check: PassCustom licence
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Liuguang Banlan UIsickn33/agentic-awesome-skills47k1 repos~2.5kAutomated safety check: PassMIT
Tabler Core SCSStabler/tabler42k—~2kAutomated safety check: PassMIT
Preline Theme Generatorhtmlstreamofficial/preline6.5k—~619Automated safety check: WarnCustom licence
Tailwind Theme Builderjezweb/claude-skills1.1k1 repos~3.2kAutomated 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

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

  • 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

  • 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

More from handsontable/handsontable

All 31 skills in this repo

  • Handsontable Playwright E2E Tests

    handsontable/handsontable

    Guides writing and changing Playwright end-to-end tests for Handsontable using page objects, data-testid hooks and deterministic waits.

    22k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

  • Handsontable Angular Wrapper Development

    handsontable/handsontable

    Guides changes to the @handsontable/angular-wrapper package: the HotTableComponent lifecycle, NgZone performance handling, settings services and the ng-packagr build.

    22k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • BrowserStack Live Testing

    handsontable/handsontable

    Opens a live BrowserStack session on a real Android, iOS or desktop browser for a local or public URL, tunneling localhost through Cloudflare when needed.

    22k GitHub stars~950 tokensUpdated today
    Auto-check passed

  • Handsontable Changelog Entry

    handsontable/handsontable

    Decides whether a code change needs a changelog entry and creates the JSON file in .changelogs with the right type, framework and user-facing title.

    22k GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Code Review Graph Navigator

    handsontable/handsontable

    Queries a pre-built, Tree-sitter-based code graph of the whole monorepo instead of grepping call chains, for exploring, debugging, refactoring or reviewing code.

    22k GitHub stars~939 tokensUpdated today
    Auto-check passed

  • Handsontable Coordinate Systems

    handsontable/handsontable

    Explains Handsontable's physical, visual and renderable row and column coordinate spaces and how to convert between them with IndexMapper, for debugging misplaced rows or columns.

    22k GitHub stars~721 tokensUpdated today
    Auto-check passed

Categories

Questions about Handsontable Theme CSS Guide

What does Handsontable Theme CSS Guide do?

Rules for styling Handsontable themes: CSS custom properties as the public API, SCSS file layout, cell padding from variables, and a ban on :has() selectors. Handsontable ships three themes, main, classic and horizon, each with a variant without icons, making six bundles, and every styling change should be tested on all three. CSS custom properties are the public theming API, so renaming or removing a variable or a class counts as a breaking change and the old one must keep working.

When should I use Handsontable Theme CSS Guide?

Handsontable Theme CSS Guide fits situations like: changing Handsontable theme SCSS or CSS custom properties; adding or renaming a theme token without breaking existing users; fixing row height or scroll glitches caused by cell padding overrides; reviewing a stylesheet change against the no-:has() rule.

How do I install Handsontable Theme CSS Guide in Claude Code?

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

How do I install Handsontable Theme CSS Guide in Codex?

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

Can I use Handsontable Theme CSS Guide 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 handsontable/handsontable --skill handsontable-css-dev -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/handsontable-css-dev, .gemini/skills/handsontable-css-dev, .github/skills/handsontable-css-dev and .opencode/skills/handsontable-css-dev in your project.

What does Handsontable Theme CSS Guide need to run?

Going by SKILL.md and its folder, Handsontable Theme CSS Guide needs the command-line tools its instructions call (npm, pnpm and tsc). Our summary lists: A checkout of the Handsontable repository; pnpm, to reinstall after editing the stylelint plugin.

Does Handsontable Theme CSS Guide access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Handsontable Theme CSS Guide 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 Handsontable Theme CSS Guide use?

Handsontable Theme CSS Guide has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Handsontable Theme CSS Guide use?

About 2.8k tokens (SKILL.md is roughly 11k 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 Handsontable Theme CSS Guide?

Skills that share tags, products or a category with Handsontable Theme CSS Guide: MCP Development (coollabsio/coolify, 63k stars), Liuguang Banlan UI (sickn33/agentic-awesome-skills, 47k stars), Tabler Core SCSS (tabler/tabler, 42k 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 Handsontable Theme CSS Guide?

handsontable (a GitHub organization) maintains it in handsontable/handsontable, which has 22,060 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 8, 2026.

Source: handsontable/handsontable on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.