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 Dev Server

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

MITAuto-check passedFrontend & Design

Install Tabler Astro Dev Server

skills CLI
$ npx skills add tabler/tabler --skill astro-dev -a claude-code

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

GitHub CLI
$ gh skill install tabler/tabler astro-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/tabler/tabler.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/astro-dev .claude/skills/astro-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
astro-dev
GitHub stars
42k
Token cost
~1.2k tokens
SKILL.md length
632 words
Files
1
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 7 steps: Which server → Full dev vs. astro-only → Do not build while a dev server is running → …
  • Seeing a change to preview, docs, shared or core running in a Tabler dev server
  • SKILL.md covers 1. Which server, 2. Full dev vs. astro-only, 3. Do not build while a dev… and 4. The verification loop, plus 3 more sections
  • Calls pnpm and curl

What it does

The skill tells the agent never to ask you to check a page by hand: start the server, look at the page and show what it found. It maps three packages to pnpm commands and ports: preview on 3000 for demo pages, docs on 3010 for documentation and screenshots on 3020 for capture pages. The same entries exist in .claude/launch.json and are started with preview_start, while preview-attach covers a server that is already running.

The mode matters. When SCSS or core/ changed, the full dev script is needed because astro dev alone will not rebuild stylesheets. When only .astro, .mdx or shared/lib files changed, astro dev --background inside the package is enough and faster, managed with status, logs and stop commands. A change in shared/ should be checked in both preview and docs when the component is used in both.

It forbids running pnpm build next to a live dev server, since the build's asset copy overwrites what the watcher wrote and two watchers can exhaust file handles. The verification loop opens the page through preview_start and reads console messages, errors first and then warnings.

When your agent uses it

  • Seeing a change to preview, docs, shared or core running in a Tabler dev server
  • Diagnosing stale CSS or JS, vanishing assets or a page that will not reload
  • Choosing between the full dev script and a background astro dev

Example prompts

  • “Start the docs dev server and check that my change to the badges page renders.”
  • “The preview server is serving stale CSS after my SCSS edit. Sort it out.”
  • “I changed a shared component. Verify it in both preview and docs before you hand it back.”

Requirements

  • pnpm
  • A checkout of the Tabler repository

Workflow steps

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

  1. Which server
  2. Full dev vs. astro-only
  3. Do not build while a dev server is running
  4. The verification loop
  5. When the page looks stale or unstyled
  6. Gates before handing work back
  7. 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
    • curl

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm and curl, 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 Dev Server loads about 1.2k tokens when it runs. Until then it costs about 114 tokens; SKILL.md has 632 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.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). 632 words, ~1,232 tokens.

Download SKILL.mdSave it as .claude/skills/astro-dev/SKILL.md (or your agent's skills folder).
name
astro-dev
description
Start a Tabler Astro dev server and verify a change in the browser. Use whenever a change to `preview/`, `docs/`, `shared/` or `core/` has to be seen running — before handing a page or component back — and whenever the dev server behaves oddly: stale CSS/JS, assets that vanish, a page that will not reload. Covers which server to start on which port, background mode, the rule against building while a dev server runs, and the verification loop.

Run and verify the dev servers

Never ask the user to check a page manually. Start the server, look at the page, and show what you found.

1. Which server

PackageCommandPortServes
@tabler/previewpnpm --dir preview run dev3000demo pages (preview/pages/*.astro)
@tabler/docspnpm --dir docs run dev3010documentation (docs/content/**/*.mdx)
@tabler/screenshotspnpm --dir screenshots run dev3020screenshot capture pages

preview_start returns a tabId — pass it to every later navigate / read_page / computer call so they act on that tab and not on whatever is fronted. The same entries exist in .claude/launch.json (preview, docs, screenshots) — start them with preview_start so the browser pane opens on the right port, and use preview-attach when a server is already running. pnpm dev at the repo root starts everything through turbo; only do that when the change spans packages, because the persistent tasks make the output hard to read.

A shared/ change shows up in both preview and docs. Verify in the package the user asked about, and open the other one too when the component is used there.

2. Full dev vs. astro-only

Each package's dev script is astro dev plus its asset watchers (concurrently), and turbo runs dev:prepare first so tmp-assets/ and public/ exist:

  • SCSS or core/ touched → use the full dev script. astro dev alone will not rebuild the stylesheets.
  • Only .astro / .mdx / shared/lib touched → astro dev --background inside the package is enough and faster, provided the assets have been built before. Manage it with astro dev status, astro dev logs, astro dev stop; the log file is .astro/dev.log in the package. Add --force to replace a server that is already running.

3. Do not build while a dev server is running

pnpm build (or a per-package build) run next to a live dev server fights the watchers: the build's asset copy overwrites what the watcher just wrote into public/, and the two file watchers together can exhaust file handles (EMFILE). Verify through the running server and HMR instead. If a build is genuinely needed, stop the dev server first.

4. The verification loop

  1. preview_start with the package's config, then open the page (/badges in dev; the built file is /badges.html).

  2. read_console_messages — errors first, then warnings.

  3. read_page or curl for structure; assert instead of eyeballing when the page is generated from data:

    bash
    curl -s http://localhost:3000/badges | grep -o '<h[1-6]' | sort | uniq -c

  4. computer clicks/typing for anything interactive, then read the state back.

  5. resize_window for responsive or dark-mode work; colorScheme for data-bs-theme.

  6. Screenshot the result for the user when the change is visual.

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

5. When the page looks stale or unstyled

In order:

  • CSS did not change — the SCSS watcher is not running. Restart with the full dev script rather than astro dev.
  • Assets 404 after a restart — public/preview (or docs/public) was wiped by a build or a clean. Run pnpm --dir <pkg> run dev:prepare, then start dev again.
  • A public/ file changed but the browser did not reload — Astro does not watch public/; the copyAssets integration reloads the listed dirs, everything else needs a manual refresh.
  • shared/ change not picked up — the file is aliased, not watched through node_modules; confirm the import uses @shared/@ui, not a path into node_modules.
  • Still wrong: pnpm --dir <pkg> run clean, then dev:prepare, then dev.

6. Gates before handing work back

Run at the repo root and read the full output — a tail hides TypeScript errors:

bash
pnpm run type-check && pnpm run format:prettier && pnpm run lint

type-check is astro check per package, so it covers .astro frontmatter and templates. For a markup refactor that should not change output at all, also run the html-diff skill.

7. Checklist

  • Right package started, on its own port
  • Full dev script when SCSS or core/ is involved
  • No build started while a dev server was running
  • Page opened, console clean, interaction exercised
  • Screenshot for visual changes
  • Repo-level type-check / format:prettier / lint clean, full output read

© 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/astro-dev of tabler/tabler.

Open the folder on GitHubat commit dcacb65

Compare with similar skills

Tabler Astro Dev Server 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 Dev Server compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tabler Astro Dev Server this skilltabler/tabler42k—~1.2kAutomated safety check: PassMIT
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence
Create Docsvictorgarciaesgi/nuxt-typed-router4132 repos~2.8kAutomated safety check: PassMIT
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
Pierre Trees File Treepierrecomputer/pierre6.2k—~473Automated safety check: PassApache-2.0
Motion Dev Animations199-biotechnologies/motion-dev-animations-skill1041 repos~2.8kAutomated safety check: NotesMIT

Similar skills

  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Create Docs

    victorgarciaesgi/nuxt-typed-router

    Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.

    413 GitHub starsUsed in 2 repos~2.8k tokens
    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

  • Pierre Trees File Tree

    pierrecomputer/pierre

    Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag…

    6.2k GitHub stars~473 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Motion Dev Animations

    199-biotechnologies/motion-dev-animations-skill

    Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects.

    104 GitHub starsUsed in 1 repo~2.8k tokens
    Frontend & DesignAuto-check: notes

  • Astro

    devantler-tech/ksail

    Skill for building with the Astro web framework. An agent skill from devantler-tech/ksail.

    166 GitHub starsUsed in 3 repos~1.1k tokens
    Frontend & DesignAuto-check passed

More from tabler/tabler

All 21 skills in this repo

  • 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 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 Astro Dev Server

What does Tabler Astro Dev Server do?

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. The skill tells the agent never to ask you to check a page by hand: start the server, look at the page and show what it found. It maps three packages to pnpm commands and ports: preview on 3000 for demo pages, docs on 3010 for documentation and screenshots on 3020 for capture pages.

When should I use Tabler Astro Dev Server?

Tabler Astro Dev Server fits situations like: seeing a change to preview, docs, shared or core running in a Tabler dev server; diagnosing stale CSS or JS, vanishing assets or a page that will not reload; choosing between the full dev script and a background astro dev.

How do I install Tabler Astro Dev Server in Claude Code?

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

How do I install Tabler Astro Dev Server in Codex?

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

Can I use Tabler Astro Dev Server 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 astro-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/astro-dev, .gemini/skills/astro-dev, .github/skills/astro-dev and .opencode/skills/astro-dev in your project.

What does Tabler Astro Dev Server need to run?

Going by SKILL.md and its folder, Tabler Astro Dev Server needs the command-line tools its instructions call (pnpm and curl). Our summary lists: pnpm; A checkout of the Tabler repository.

Does Tabler Astro Dev Server access the network?

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

Is Tabler Astro Dev Server 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 Dev Server use?

Tabler Astro Dev Server 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 Dev Server use?

About 1.2k tokens (SKILL.md is roughly 4.9k 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 Dev Server?

Skills that share tags, products or a category with Tabler Astro Dev Server: Vuetify Playground (vuetifyjs/vuetify, 41k stars), Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars) and Pierre Trees File Tree (pierrecomputer/pierre, 6.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 Dev Server?

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.