New: 97,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 Bootstrap Component Rules

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

MITAuto-check passedFrontend & Design

Install Tabler Bootstrap Component Rules

skills CLI
$ npx skills add tabler/tabler --skill bootstrap-component -a claude-code

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

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

At a glance

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.

  • Works in 9 steps: File structure → Typing → Constructor and config → …
  • Adding a new Bootstrap-style component such as a toggler, dialog or stepper to Tabler
  • SKILL.md covers 1. File structure, 2. Typing, 3. Constructor and config and 4. Events and CSS classes, plus 5 more sections
  • Calls pnpm; reaches github.com; needs EVENT_KEY and DATA_KEY

What it does

The skill lays out the fixed order a new component file in core/js/src/bootstrap/ must follow: a license header, imports such as BaseComponent and EventHandler, type and interface definitions, naming constants, a typed Default and DefaultType pair, the component class itself, an optional Data API section, and a default export. It expects the component to extend BaseComponent and to merge configuration the same way existing components do, through _getConfig and its internal merge chain.

Typing rules are strict: ComponentConfig and ComponentConfigInput types, declared private fields, explicit method signatures, and no use of any anywhere in core/js/src, since the project's tsconfig is strict. It prefers private class fields over the private keyword and shows how to type event handlers and cast delegate targets. The skill explicitly does not cover building, testing or the size budget, which belong to a separate core-js skill.

When your agent uses it

  • Adding a new Bootstrap-style component such as a toggler, dialog or stepper to Tabler
  • Bringing an existing component class up to the current typing and Data API baseline
  • Reviewing a new component file for the correct section order and types

Example prompts

  • “Add a new chip-input component to core/js/src/bootstrap following the component rules.”
  • “Bring the existing stepper component's typing up to the current baseline, with no any types.”
  • “Write the Data API section for a new dialog component.”

Requirements

  • A TypeScript build with strict mode, as configured in core/tsconfig.json

Workflow steps

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

  1. File structure
  2. Typing
  3. Constructor and config
  4. Events and CSS classes
  5. Data API
  6. Initialization and public API
  7. Style and consistency
  8. Template
  9. Checklist

What it can do on your machine

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

    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:

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • EVENT_KEY
    • DATA_KEY

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tabler Bootstrap Component Rules loads about 2.2k tokens when it runs. Until then it costs about 157 tokens; SKILL.md has 610 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~157
When it runs · the whole SKILL.md, loaded when a task matches
~2.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 dcacb65, republished under its MIT licence (© tabler). 610 words, ~2,190 tokens.

Download SKILL.mdSave it as .claude/skills/bootstrap-component/SKILL.md (or your agent's skills folder).
name
bootstrap-component
description
Write a new Bootstrap-style JavaScript component class in `core/js/src/bootstrap/` — a `BaseComponent` subclass with typed config, `EVENT_*`/`CLASS_NAME_*` constants and a `data-bs-toggle` Data API. Use whenever the user asks for a new component in the Bootstrap port (a toggler, a dialog, a chip input, a stepper) or wants an existing one brought up to this baseline. Covers file structure, TypeScript typing of `Default` and `DefaultType`, constructor and config merging, events, the Data API handler and the minimal public API. Not for the build, the tests or the size budget — that is the `core-js` skill.

Rules for writing new components

You are a master of JavaScript and TypeScript.

The points below are the baseline for every new component class in core/js/src/bootstrap/. Read the core-js skill first for what that directory is (a vendored port of Bootstrap's JavaScript), how it is built, tested and size-budgeted.

1. File structure

In this order:

  1. Header with the MIT license comment and the file name (Bootstrap toggler.ts).
  2. Imports: BaseComponent, EventHandler, optionally Manipulator, SelectorEngine, helpers from ./util/*.
  3. Types and interfaces at the top (ComponentConfig, ComponentConfigInput).
  4. Constants: NAME, DATA_KEY, EVENT_KEY, selectors, classes, event names.
  5. Default and DefaultType with TS types.
  6. The component class.
  7. "Data API implementation" section (when applicable).
  8. Default export of the class.

2. Typing

  • Define type ComponentConfig and type ComponentConfigInput:

    ts
    type ComponentConfig = {
  attribute: string
  value: string | number | boolean | null
}

type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>

  • Type Default as ComponentConfig.

  • Type DefaultType as Record<keyof ComponentConfig, string>.

  • In the class, declare:

    • declare _element: HTMLElement (or a more specific element type).
    • declare _config: ComponentConfig.
    • declare _isTransitioning: boolean (when needed).

  • Type method signatures explicitly (show(): void, hide(): void).

  • EventHandler.trigger(...) can return null — use ?.defaultPrevented.

  • Use Event for handlers, and cast when you need specifics (const keyboardEvent = event as KeyboardEvent). EventHandler.on is generic, so (event: KeyboardEvent) => … type-checks without a cast; for event.delegateTarget cast to DelegatedEvent from ./dom/event-handler.

  • core/tsconfig.json is strict and core/js/src has no any at all, so a missing null check or an implicit any fails pnpm run type-check. Reach for unknown plus a type guard, or a small named type, instead of any, [key: string]: any or as any.

  • Prefer modern syntax like #private class fields over the private keyword.

3. Constructor and config

  • Call super(element, config as Record<string, unknown>).
  • Read config from Manipulator.getDataAttributes(...) and merge with Default. BaseComponent._getConfig already does this through _mergeConfigObj → _configAfterMerge → _typeCheckConfig.
  • If you need custom config processing, override _getConfig (or _configAfterMerge).
  • After constructing, only set required fields and attach listeners.

4. Events and CSS classes

  • Use constants in the format EVENT_${NAME} and CLASS_NAME_*.

  • Build events with EVENT_KEY and DATA_KEY (as in alert.ts):

    ts
    const NAME = 'toggler'
const DATA_KEY = 'bs.toggler'
const EVENT_KEY = `.${DATA_KEY}`

const EVENT_TOGGLE = `toggle${EVENT_KEY}`
const EVENT_TOGGLED = `toggled${EVENT_KEY}`
const CLASS_NAME_SHOW = 'show'

  • Fire a cancellable before event, do the work, then fire the after event.

  • Use only EventHandler.on/off/one/trigger.

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

5. Data API

  • Selector in the form [data-bs-toggle="name"]. The attribute API stays data-bs-*; data-tblr-* is a 2.0 change (see core-js).
  • Data API handler:
    • check A/AREA and event.preventDefault().
    • use SelectorEngine.getElementFromSelector.
    • Name.getOrCreateInstance(target, config) for data attributes.
  • Use the helpers from ./util/component-functions instead of writing the handler by hand:
    • eventActionOnPlugin(Component, 'click', SELECTOR_DATA_TOGGLE, 'toggle') for a data-bs-toggle — resolves the targets (data-bs-target / href, or the trigger itself), skips .disabled / :disabled, prevents the default on A/AREA, and calls the method on getOrCreateInstance of every target. An optional fifth argument receives { targets, event, instances }.
    • enableDismissTrigger(Component, 'close') for a data-bs-dismiss.
    • Write the EventHandler.on(document, ...) handler yourself only when the trigger needs config from data attributes or other custom logic.

6. Initialization and public API

  • Minimal public API: show, hide, toggle, dispose.
  • If the component has animation state, use _queueCallback and _isAnimated.
  • Expose static get NAME, static get Default, static get DefaultType.
  • Export the class from core/js/src/bootstrap.ts (named export and the bootstrap namespace object), otherwise it never ships.

7. Style and consistency

  • Keep style consistent with existing components (indentation, naming, comments, the // Getters / // Public / // Private section comments).
  • Avoid direct DOM operations outside EventHandler and SelectorEngine, unless the component requires otherwise.

8. Template

ts
/**
 * --------------------------------------------------------------------------
 * Bootstrap toggler.ts
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 * --------------------------------------------------------------------------
 */

import BaseComponent from './base-component'
import EventHandler from './dom/event-handler'
import { eventActionOnPlugin } from './util/component-functions'

type ComponentConfig = {
  attribute: string
  value: string | number | boolean | null
}

type ComponentConfigInput = Partial<ComponentConfig> & Record<string, unknown>

/**
 * Constants
 */

const NAME = 'toggler'
const DATA_KEY = 'bs.toggler'
const EVENT_KEY = `.${DATA_KEY}`

const EVENT_TOGGLE = `toggle${EVENT_KEY}`
const EVENT_TOGGLED = `toggled${EVENT_KEY}`
const EVENT_CLICK = 'click'

const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="toggler"]'

const DefaultType: Record<keyof ComponentConfig, string> = {
  attribute: 'string',
  value: '(string|number|boolean)',
}

const Default: ComponentConfig = {
  attribute: 'class',
  value: null,
}

/**
 * Class definition
 */

class Toggler extends BaseComponent {
  declare _element: HTMLElement
  declare _config: ComponentConfig

  constructor(element?: Element | string | null, config?: ComponentConfigInput | null) {
    super(element as string | HTMLElement, (config ?? undefined) as Record<string, unknown>)
  }

  // Getters
  static get Default(): ComponentConfig {
    return Default
  }

  static get DefaultType(): Record<keyof ComponentConfig, string> {
    return DefaultType
  }

  static get NAME(): string {
    return NAME
  }

  // Public
  toggle(): void {
    const toggleEvent = EventHandler.trigger(this._element, EVENT_TOGGLE)

    if (toggleEvent?.defaultPrevented) {
      return
    }

    this._execute()

    EventHandler.trigger(this._element, EVENT_TOGGLED)
  }

  // Private
  _execute(): void {
    const { attribute, value } = this._config

    if (attribute === 'class') {
      if (value) {
        this._element.classList.toggle(String(value))
      }
      return
    }

    // Compare as strings since getAttribute() always returns a string
    if (this._element.getAttribute(attribute) === String(value)) {
      this._element.removeAttribute(attribute)
      return
    }

    this._element.setAttribute(attribute, String(value))
  }
}

/**
 * Data API implementation
 */

eventActionOnPlugin(Toggler, EVENT_CLICK, SELECTOR_DATA_TOGGLE, 'toggle')

export default Toggler

9. Checklist

  • File order as in §1, MIT header with the file name
  • ComponentConfig / ComponentConfigInput defined; Default and DefaultType typed
  • declare _element / declare _config in the class, explicit return types
  • EVENT_* and CLASS_NAME_* constants, ?.defaultPrevented on cancellable events
  • Data API on [data-bs-toggle="name"] through eventActionOnPlugin (or a hand-written handler with the A/AREA guard and getOrCreateInstance)
  • Public API limited to show / hide / toggle / dispose
  • Exported from core/js/src/bootstrap.ts
  • Spec in js/tests/unit/, and the core-js checklist (type-check, prettier, bundlewatch)

© 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/bootstrap-component of tabler/tabler.

Open the folder on GitHubat commit dcacb65

Compare with similar skills

Tabler Bootstrap Component Rules 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 Bootstrap Component Rules compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tabler Bootstrap Component Rules this skilltabler/tabler42k—~2.2kAutomated safety check: PassMIT
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase10k2 repos~2.9kAutomated safety check: PassMIT
Frontend UIoomol-lab/open-flow223—~857Automated safety check: PassApache-2.0
Vue Expert (JavaScript)Jeffallan/claude-skills12k—~1.6kAutomated safety check: PassMIT
Typescript Rulesshinpr/claude-code-workflows690—~1.8kAutomated safety check: PassMIT
Creating Docs Code Exampleshandsontable/handsontable22k—~2.2kAutomated safety check: PassCustom licence

Similar skills

  • React Frontend Development Guidelines

    diet103/claude-code-infrastructure-showcase

    Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.

    10k GitHub starsUsed in 2 repos~2.9k tokens
    Frontend & DesignAuto-check passed

  • Frontend UI

    oomol-lab/open-flow

    Implement and review Open Flow frontend components, styling, layout, and interactions.

    223 GitHub stars~857 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vue Expert (JavaScript)

    Jeffallan/claude-skills

    Builds Vue 3 apps in plain JavaScript with JSDoc typing instead of TypeScript: script setup components, composables, Pinia and Vitest, with ESLint JSDoc coverage checks.

    12k GitHub stars~1.6k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Typescript Rules

    shinpr/claude-code-workflows

    React/TypeScript frontend development rules including type safety, component design, state management, and error handling.

    690 GitHub stars~1.8k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • Creating Docs Code Examples

    handsontable/handsontable

    Sets the rules for writing Handsontable documentation examples in JavaScript, TypeScript, React, Angular and Vue, with the imports, registration and licence key each needs.

    22k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed

  • Wagmi Feature Development

    wevm/wagmi

    Walks through adding a Wagmi feature across its layers: a Viem-based core action, TanStack Query options, and React and Vue bindings.

    6.8k GitHub stars~3.8k tokensUpdated 5 days ago
    DevelopmentAuto-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 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 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 Bootstrap Component Rules

What does Tabler Bootstrap Component Rules do?

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. The skill lays out the fixed order a new component file in core/js/src/bootstrap/ must follow: a license header, imports such as BaseComponent and EventHandler, type and interface definitions, naming constants, a typed Default and DefaultType pair, the component class itself, an optional Data API section, and a default export. It expects the component to extend BaseComponent and to merge configuration the same way existing components do, through _getConfig and its internal merge chain.

When should I use Tabler Bootstrap Component Rules?

Tabler Bootstrap Component Rules fits situations like: adding a new Bootstrap-style component such as a toggler, dialog or stepper to Tabler; bringing an existing component class up to the current typing and Data API baseline; reviewing a new component file for the correct section order and types.

How do I install Tabler Bootstrap Component Rules in Claude Code?

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

How do I install Tabler Bootstrap Component Rules in Codex?

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

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

What does Tabler Bootstrap Component Rules need to run?

Going by SKILL.md and its folder, Tabler Bootstrap Component Rules needs the command-line tools its instructions call (pnpm) and credentials named EVENT_KEY and DATA_KEY. Our summary lists: A TypeScript build with strict mode, as configured in core/tsconfig.json.

Does Tabler Bootstrap Component Rules access the network?

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

Is Tabler Bootstrap Component Rules 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 Bootstrap Component Rules use?

Tabler Bootstrap Component Rules 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 Bootstrap Component Rules use?

About 2.2k tokens (SKILL.md is roughly 8.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 Bootstrap Component Rules?

Skills that share tags, products or a category with Tabler Bootstrap Component Rules: React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars), Frontend UI (oomol-lab/open-flow, 223 stars), Vue Expert (JavaScript) (Jeffallan/claude-skills, 12k stars) and Typescript Rules (shinpr/claude-code-workflows, 690 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tabler Bootstrap Component Rules?

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.