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 Astro Component Builder

by tabler in tabler/tabler

Builds or extends shared Astro components in Tabler's shared/ui library, covering Props interfaces, prop names, class composition, slots and follow-up docs.

MITAuto-check passedFrontend & Design

Install Tabler Astro Component Builder

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

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

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

At a glance

Builds or extends shared Astro components in Tabler's shared/ui library, covering Props interfaces, prop names, class composition, slots and follow-up docs.

  • Works in 9 steps: Before creating a file → Skeleton → Prop-name dictionary → …
  • Adding a new component to the shared Astro UI library
  • SKILL.md covers 1. Before creating a file, 2. Skeleton, 3. Prop-name dictionary and 4. Class composition, plus 5 more sections
  • Calls pnpm

What it does

The shared/ui folder is the component library rendered by both the preview and the docs, so each change shows up in demo pages and documentation examples at once. The skill says to extend an existing component with a variant, size or light prop instead of creating a parallel copy, and to check the matching demo page for hand-written variants that reveal missing props.

Components wrap classes that already exist in core/scss, and if the class is missing, writing the SCSS is part of the task. The skeleton rules call for an interface Props with defaults, class destructured as className, union types for modifiers with a comment naming the SCSS source, a rest spread on the root element for id, data and aria attributes, and a doc comment on each non-obvious prop.

It also gives a shared prop-name dictionary so the API stays predictable, placement rules for generic blocks, fixed demo content and docs-only components, and notes on slots and the as pitfall. A new component needs follow-ups: a demo page, documentation and a changeset.

When your agent uses it

  • Adding a new component to the shared Astro UI library
  • Adding a prop, variant or size to an existing shared component
  • Refactoring a shared component whose demo page drifted from its markup

Example prompts

  • “Add a size prop to the Avatar component using the existing SCSS classes.”
  • “Create a new Timeline component in shared/ui with a demo page and docs.”
  • “The badge demo page hand-writes variants. Bring the Badge component's props in line with it.”

Requirements

  • A Tabler checkout with the shared and core packages

Workflow steps

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

  1. Before creating a file
  2. Skeleton
  3. Prop-name dictionary
  4. Class composition
  5. Slots and containers
  6. Escape hatches and Astro traps
  7. Logic belongs in shared/lib
  8. After the component exists
  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

    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 Astro Component Builder loads about 2.1k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 954 words of instructions outside code blocks.

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

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). 954 words, ~2,132 tokens.

Download SKILL.mdSave it as .claude/skills/ui-component/SKILL.md (or your agent's skills folder).
name
ui-component
description
Build or extend a shared Astro component in `shared/ui/*.astro` (or `shared/components/**`) — the library that both the preview and the docs render. Use whenever the user asks for a new component, for a new prop, variant or size on an existing one, or for a refactor of a shared component. Covers the Props interface, the prop-name dictionary, class composition, slots, the `as` pitfall, and the follow-ups (demo page, docs, changeset) a new component needs.

Build a shared UI component

shared/ui/*.astro is the component library. @tabler/preview and @tabler/docs render the same files, so every change here lands on demo pages and in documentation examples at once. Components are markup: the design lives in core/scss/, and logic longer than a few lines lives in shared/lib/*.ts.

1. Before creating a file

  • Extend, do not fork. Read the Props interface of the closest existing component first. A new look is a prop on the existing component (variant, size, light), never a parallel ButtonAlt.astro.
  • Check the demo page before the component. If preview/pages/<name>.astro hand-writes variants the component cannot express, those are the missing props, and the component has drifted from the markup it is supposed to own. Close that gap instead of adding one more hand-written block.
  • Find the CSS first. A component wraps classes that exist in core/scss/ui/_*.scss. If the class is missing, writing it is part of the task — never invent class names in the component.
  • Where it goes: generic building blocks in shared/ui/; fixed demo content (a dashboard card with its own data) in shared/components/cards/; docs-only components in docs/components/.
  • Imports inside shared/ are relative (./Icon.astro, ../components/CaptureScript.astro). @shared / @ui / @data are for the site packages. Any bare npm import used in shared/ must be declared in shared/package.json.

2. Skeleton

astro
---
import Icon from './Icon.astro'

/** core/scss/ui/_badges.scss `.badge-{size}` modifier classes */
type BadgeSize = 'sm' | 'lg'

interface Props {
  text?: string
  color?: string
  size?: BadgeSize | undefined
  /** -lt colour variant + text-{color}-lt-fg */
  light?: boolean
  class?: string
  icon?: string
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { text, color, size, light, class: className, icon, ...rest } = Astro.props

const classes = ['badge', size && `badge-${size}`, color && `bg-${color}${light ? '-lt' : ''}`, className]
---

<span class:list={classes} {...rest}>{icon && <Icon name={icon} />}{text}</span>

Rules the file above follows, and every component should:

  • interface Props + destructuring with defaults. No untyped Astro.props.
  • The class prop keeps its HTML name and is destructured as class: className.
  • A union type for each modifier set ('sm' | 'lg'), with a doc comment naming the SCSS file the classes come from. Export the type (export type IconSize) when a sibling component reuses it.
  • [key: string]: unknown + ...rest spread on the root element, so callers can pass id, data-*, aria-* without a prop for each. Add it unless the component deliberately controls its own attributes.
  • One doc comment per non-obvious prop, saying which class or attribute it emits.

3. Prop-name dictionary

Names are shared across the library so the API stays predictable (and stays portable to React/Vue later). Reuse these before inventing a name:

PropMeaning
classextra classes, merged last so callers can override
idelement id; required for components that a script initialises
colorpalette colour (primary, azure, …), emitted as -{color}
sizesm / md / lg (…), where md emits no class
variantstyle variant of the same component (outline, ghost, important)
text, title, description, labelcontent passed as a prop instead of a slot
icon, iconEndicon names, rendered through Icon.astro
href, externallink target; external adds target="_blank" rel="noreferrer"
disabled, active, required, invalidstate booleans, named after the HTML/CSS state
show… (showClose, showValue)opt-in parts of the markup
ariaLabelaccessible name when the visible content is an icon or a colour

Props are camelCase. Booleans default to false — never showClose = true.

4. Class composition

  • Use class:list={[...]} with falsy entries for conditionals; it drops them and merges the caller's className for you. .filter(Boolean).join(' ') is only for a string you have to pass to a helper (iconSvg).
  • Put className last so the caller wins.
  • Do not emit a class for a default (size !== 'md' && \btn-${size}``).
  • No <style> blocks and no CSS imports in the frontmatter. Styling is core/scss/. A <style> makes Astro stamp data-astro-cid-* on every element the component renders, and its custom properties skip the --tblr- prefixing in build-css.ts.
Show full SKILL.md (404 more words)Show less

5. Slots and containers

Container components (Card, CardBody, ButtonList, …) take a <slot /> rather than a content prop. Use Astro.slots.has('name') when the markup differs depending on whether a named slot was filled.

Polymorphic containers take an as prop — with one trap:

astro
---
import type { HTMLTag } from 'astro/types'

// `as` must stay out of the Props body: Astro's frontmatter scanner bails on a member
// literally named `as` and silently falls back to untyped props.
type PolymorphicProps = { as?: HTMLTag }

interface Props extends PolymorphicProps {
  class?: string
}

const { as: Element = 'div', class: className }: Props = Astro.props
---

<Element class:list={['card', className]}><slot /></Element>

Heading components pick their own level (CardTitle renders h2, as="h3" for a nested section) so pages cannot skip levels.

6. Escape hatches and Astro traps

  • Content that may contain markup or entities (&hellip;) → set:html / <Fragment set:html={…} />. Entities in attribute strings must be passed as an expression (title={"…&hellip;"}), because JSX decodes them inside string literals.
  • Boolean attributes are inconsistent: selected={true} renders bare, but some (e.g. multiple) render ="true". Use multiple ? '' : undefined when a bare attribute is required, and check the rendered HTML.
  • Client-side behaviour (plugin init, event wiring) does not go in an ad-hoc <script> — see the astro-scripts skill.
  • Icons always through <Icon name="…" />, never inline SVG. An unknown name renders nothing and only warns in the build log ([svg] unknown Tabler icon), so the page looks fine with a blank button. Check the name in shared/data/icons.json before using it: it is player-play, not play.

7. Logic belongs in shared/lib

Anything beyond assembling classes and simple ternaries (formatting, data shaping, SVG handling, deterministic demo data) goes to shared/lib/*.ts and is imported by the component. Every module there has a sibling *.test.ts run by vitest (pnpm --filter @tabler/shared test) — add one for the function you introduce, and keep it pure so it is testable without a DOM.

Use pseudo-random.ts instead of Math.random() for demo data: pages are rebuilt constantly and random output would change the HTML on every build.

8. After the component exists

A new component is not done until it is visible and documented:

  1. Demo page — a page in preview/pages/ showing its variants (demo-pages skill).
  2. Docs page — docs/content/** (write-docs skill), plus the class table (class-reference skill) when the component introduces classes.
  3. Changeset — generate-changeset skill, minor for a new component, patch for a fix.

9. Checklist

  • Extends an existing component instead of duplicating one
  • Classes exist in core/scss/; no invented class names
  • interface Props typed, prop names taken from the dictionary in section 3
  • class: className merged last, ...rest forwarded
  • Accessible: semantic element, ariaLabel where the content is an icon
  • Logic in shared/lib with a test, not in the frontmatter
  • pnpm run format:prettier and pnpm run type-check clean at the repo root (full output, not a tail)
  • Demo page + docs page + changeset

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

Open the folder on GitHubat commit dcacb65

Compare with similar skills

Tabler Astro Component Builder 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 Astro Component Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tabler Astro Component Builder this skilltabler/tabler42k—~2.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
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
DaisyUI Component Librarysaadeghi/daisyui43k—~1.3kAutomated safety check: PassMIT

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

  • 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

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

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

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 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 yesterday
    Auto-check passed

Works with

Categories

Questions about Tabler Astro Component Builder

What does Tabler Astro Component Builder do?

Builds or extends shared Astro components in Tabler's shared/ui library, covering Props interfaces, prop names, class composition, slots and follow-up docs. The shared/ui folder is the component library rendered by both the preview and the docs, so each change shows up in demo pages and documentation examples at once. The skill says to extend an existing component with a variant, size or light prop instead of creating a parallel copy, and to check the matching demo page for hand-written variants that reveal missing props.

When should I use Tabler Astro Component Builder?

Tabler Astro Component Builder fits situations like: adding a new component to the shared Astro UI library; adding a prop, variant or size to an existing shared component; refactoring a shared component whose demo page drifted from its markup.

How do I install Tabler Astro Component Builder in Claude Code?

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

How do I install Tabler Astro Component Builder in Codex?

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

Can I use Tabler Astro Component Builder 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 ui-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/ui-component, .gemini/skills/ui-component, .github/skills/ui-component and .opencode/skills/ui-component in your project.

What does Tabler Astro Component Builder need to run?

Going by SKILL.md and its folder, Tabler Astro Component Builder needs the command-line tools its instructions call (pnpm). Our summary lists: A Tabler checkout with the shared and core packages.

Does Tabler Astro Component Builder 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 Astro Component Builder 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 Astro Component Builder use?

Tabler Astro Component Builder 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 Astro Component Builder use?

About 2.1k tokens (SKILL.md is roughly 8.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 Astro Component Builder?

Skills that share tags, products or a category with Tabler Astro Component Builder: UI Styling (Ohh-889/skyroc, 795 stars), Chakra UI v3 Refactor and Review (chakra-ui/chakra-ui, 41k stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars) and Coss (crafter-station/petdex, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tabler Astro Component Builder?

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.