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

HTML Diff Refactor Check

by tabler in tabler/tabler

Proves that a refactor leaves every rendered preview page unchanged by comparing fresh HTML output against a baseline captured beforehand.

MITAuto-check passedDevelopment

Install HTML Diff Refactor Check

skills CLI
$ npx skills add tabler/tabler --skill html-diff -a claude-code

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

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

At a glance

Proves that a refactor leaves every rendered preview page unchanged by comparing fresh HTML output against a baseline captured beforehand.

  • Works in 6 steps: When to use it → Capture the baseline first → Check after the change → …
  • Extracting or renaming a shared component without changing its output
  • SKILL.md covers 1. When to use it, 2. Capture the baseline first, 3. Check after the change and 4. Reading the output, plus 2 more sections
  • Calls pnpm and git

What it does

The skill drives .build/html-diff.ts, a script that fetches every preview page from a running dev server and compares the result with stored snapshots. It suits changes that should not alter output: extracting a component, renaming props, moving code between shared files, restructuring a layout or running a formatter. A change that deliberately alters markup is a poor fit, because the whole run would report differences and say nothing useful.

The workflow is to capture a baseline from the tree before any edits, then run pnpm run html-diff after the change. Snapshots go to .cache/html-diff/, and the dev server is expected at http://localhost:3000 unless HTML_DIFF_BASE points elsewhere. A clean run reports all 128 pages byte-identical. Otherwise it exits non-zero and lists each differing page, with separate lines for whitespace-only changes, new pages, removed pages and pages that failed to render.

When your agent uses it

  • Extracting or renaming a shared component without changing its output
  • Replacing hand-written markup with a shared/ui component
  • Confirming that a layout restructure or prop reorder is byte-identical
  • Running a formatting pass across shared files and checking the pages

Example prompts

  • “Move the Steps markup into a shared component and prove none of the preview pages change.”
  • “Capture an html-diff baseline before I rename these props.”
  • “html-diff reports a whitespace-only difference on one page. Is that acceptable?”

Requirements

  • A preview dev server running at localhost:3000
  • pnpm

Workflow steps

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

  1. When to use it
  2. Capture the baseline first
  3. Check after the change
  4. Reading the output
  5. What the harness does not cover
  6. 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
    • git

    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 git, 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

HTML Diff Refactor Check loads about 1.1k tokens when it runs. Until then it costs about 129 tokens; SKILL.md has 479 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~129
When it runs · the whole SKILL.md, loaded when a task matches
~1.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). 479 words, ~1,052 tokens.

Download SKILL.mdSave it as .claude/skills/html-diff/SKILL.md (or your agent's skills folder).
name
html-diff
description
Prove that a refactor changes no rendered HTML, using the `html-diff` harness over every preview page. Use before and after any change that is meant to be output-neutral — extracting or renaming a component, replacing hand-written markup with a `shared/ui` component, reordering props, restructuring a layout, migrating SCSS class emission — and whenever the user asks whether a change is safe or byte-identical. Covers capturing the baseline, reading the diff, and what counts as an acceptable difference.

Prove a refactor changes no HTML

.build/html-diff.ts renders every preview page from a running dev server and compares it to a stored baseline. It is the only fast way to refactor shared components with confidence: one run covers every page that uses them.

1. When to use it

Use it for any change that should not alter output: component extraction, replacing repeated markup with a component, renaming props, moving code between shared/ files, layout restructuring, prettier/format passes.

Do not use it for a change that intentionally alters markup — the whole run will be red and tell you nothing. There, review the diff of the pages you meant to change instead.

2. Capture the baseline first

The baseline must come from the tree before the change. If you have already started editing, stash first.

bash
git stash                     # only if the working tree already has the change
pnpm --dir preview run dev    # or preview_start with the `preview` config
pnpm run html-diff:baseline
git stash pop

Before editing, list the pages that render what you are about to change:

bash
grep -rl "Steps.astro" preview/pages docs/content

Green on everything is not the only result worth checking — knowing that all-elements.html must stay identical while steps.html is allowed to differ is what turns the run into a proof.

Snapshots land in .cache/html-diff/ (one HTML file per page) and the directory is wiped on every baseline run. The dev server must be reachable at http://localhost:3000; override with HTML_DIFF_BASE if you run it elsewhere.

3. Check after the change

Keep the same dev server running — it recompiles pages on demand — and run:

bash
pnpm run html-diff

Every page byte-identical:

✓ All 128 pages are byte-identical to the baseline.

Anything else exits non-zero and prints one line per differing page.

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

4. Reading the output

LineMeaning
± page: differs at line N with -/+real difference — the first differing line of that page
± page: WHITESPACE-ONLY differenceidentical after collapsing inter-tag whitespace
± page: new page (no baseline snapshot)page added since the baseline
± page: page removedpage deleted, or it now fails to render
✖ N page(s) failed to renderthe dev server is down, or a page throws — fix that before reading anything else

A whitespace-only difference is usually inert (flex containers, <select> internals) but is not automatically fine: inside inline contexts whitespace is a rendered space. Open such a page and compare visually before waving it through.

For a full diff of one page, compare the snapshot to the live render:

bash
diff <(cat .cache/html-diff/badges.html) <(curl -s http://localhost:3000/badges)

5. What the harness does not cover

  • Preview pages only. Docs pages and dynamic routes ([...] in the filename) are skipped.
  • Dev output, not built output. The build additionally prettifies HTML; a formatting-only difference can still appear in dist.
  • The Generated <date> footer is normalised away; nothing else is.
  • Pages are compared as text, so an attribute reorder counts as a difference even when the DOM is equivalent. That is the point — Tabler ships the HTML.

6. Checklist

  • Baseline captured from the pre-change tree, with the dev server running
  • Same dev server used for baseline and check
  • pnpm run html-diff green, or every remaining difference explained
  • Whitespace-only pages opened in the browser before accepting them
  • New/removed pages are intentional

© 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/html-diff of tabler/tabler.

Open the folder on GitHubat commit dcacb65

Compare with similar skills

HTML Diff Refactor Check 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.

HTML Diff Refactor Check compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Diff Refactor Check this skilltabler/tabler42k—~1.1kAutomated safety check: PassMIT
@pierre/diffs Code Renderingpierrecomputer/pierre6.2k2 repos~803Automated safety check: PassApache-2.0
Dsh Web UI Releaseningbainb/deepseek-harness-desktop776—~1.4kAutomated safety check: WarnBSD-3-Clause
Modern JavaScript Patternswshobson/agents40k11 repos~548Automated safety check: PassMIT
Keybase Style Analysiskeybase/client9.3k—~628Automated safety check: PassBSD-3-Clause
QML Coding Best Practicesx-tools-author/x-tools1.1k1 repos~3.4kAutomated safety check: PassBSD-3-Clause

Similar skills

  • @pierre/diffs Code Rendering

    pierrecomputer/pierre

    Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.

    6.2k GitHub starsUsed in 2 repos~803 tokens
    DevelopmentAuto-check passed

  • Dsh Web UI Release

    ningbainb/deepseek-harness-desktop

    Release and publish the dsh-web-ui monorepo (DSH Web GUI plugin family + skin collection) — bump all packages to one unified version, commit and tag, push the vX.Y.Z tag that triggers the GitHub…

    776 GitHub stars~1.4k tokensUpdated yesterday
    DevelopmentAuto-check: warnings

  • Modern JavaScript Patterns

    wshobson/agents

    Covers ES6+ syntax and functional patterns for refactoring older JavaScript: async/await, destructuring, spread, modules, generators and data pipelines.

    40k GitHub starsUsed in 11 repos~548 tokens
    DevelopmentAuto-check passed

  • Keybase Style Analysis

    keybase/client

    Extracts style objects from the Keybase client's TSX files, then finds places where border helpers could replace repeated code and suggests new helpers.

    9.3k GitHub stars~628 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • QML Coding Best Practices

    x-tools-author/x-tools

    Applies QML best practices when writing, reviewing, refactoring or debugging QML code, with Qt 5 and Qt 6 import rules and concise, rule-silent output.

    1.1k GitHub starsUsed in 1 repo~3.4k tokens
    DevelopmentAuto-check passed

  • Refactoring UI Design

    chaxus/ran

    A skill your agent uses when designing, reviewing, or improving web UI visual quality, especially when a developer-built interface feels cluttered, flat, generic, poorly spaced, weakly hierarchical…

    271 GitHub stars~1.9k tokensUpdated today
    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 HTML Diff Refactor Check

What does HTML Diff Refactor Check do?

Proves that a refactor leaves every rendered preview page unchanged by comparing fresh HTML output against a baseline captured beforehand. ts, a script that fetches every preview page from a running dev server and compares the result with stored snapshots. It suits changes that should not alter output: extracting a component, renaming props, moving code between shared files, restructuring a layout or running a formatter.

When should I use HTML Diff Refactor Check?

HTML Diff Refactor Check fits situations like: extracting or renaming a shared component without changing its output; replacing hand-written markup with a shared/ui component; confirming that a layout restructure or prop reorder is byte-identical; running a formatting pass across shared files and checking the pages.

How do I install HTML Diff Refactor Check in Claude Code?

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

How do I install HTML Diff Refactor Check in Codex?

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

Can I use HTML Diff Refactor Check 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 html-diff -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-diff, .gemini/skills/html-diff, .github/skills/html-diff and .opencode/skills/html-diff in your project.

What does HTML Diff Refactor Check need to run?

Going by SKILL.md and its folder, HTML Diff Refactor Check needs the command-line tools its instructions call (pnpm and git). Our summary lists: A preview dev server running at localhost:3000; pnpm.

Does HTML Diff Refactor Check access the network?

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

Is HTML Diff Refactor Check 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 HTML Diff Refactor Check use?

HTML Diff Refactor Check 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 HTML Diff Refactor Check use?

About 1.1k tokens (SKILL.md is roughly 4.2k 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 HTML Diff Refactor Check?

Skills that share tags, products or a category with HTML Diff Refactor Check: @pierre/diffs Code Rendering (pierrecomputer/pierre, 6.2k stars), Dsh Web UI Release (ningbainb/deepseek-harness-desktop, 776 stars), Modern JavaScript Patterns (wshobson/agents, 40k stars) and Keybase Style Analysis (keybase/client, 9.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Diff Refactor Check?

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.