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

Diagnose Rendering Regressions

by nordstjernen-web in nordstjernen-web/northstar-browser

Diagnose and fix visual, geometry, hit-testing, and viewport regressions in a browser rendering engine.

GPL-3.0Auto-check passedFrontend & Design

Install Diagnose Rendering Regressions

skills CLI
$ npx skills add nordstjernen-web/northstar-browser --skill diagnose-rendering-regressions -a claude-code

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

GitHub CLI
$ gh skill install nordstjernen-web/northstar-browser diagnose-rendering-regressions --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/nordstjernen-web/northstar-browser.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/diagnose-rendering-regressions .claude/skills/diagnose-rendering-regressions && 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
diagnose-rendering-regressions
GitHub stars
128
Token cost
~1.1k tokens
SKILL.md length
516 words
Files
2
Skills in repo
5
Repo updated
First seen
Licence
GPL-3.0

At a glance

Diagnose and fix visual, geometry, hit-testing, and viewport regressions in a browser rendering engine.

  • Works in 4 steps: Reduce the defect to deterministic local… → Capture comparable evidence at… → Compare the failing viewport with a… → …
  • CSS produces incorrect styles
  • SKILL.md covers Establish the evidence, Trace the pipeline, Apply the fix and Verify the result, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Diagnose Rendering Regressions is an agent skill from nordstjernen-web/northstar-browser. Diagnose and fix visual, geometry, hit-testing, and viewport regressions in a browser rendering engine. Use when HTML or CSS produces incorrect styles, box trees, layout, fragmentation, paint output, coordinates, or screenshots, especially when a change has altered previously correct rendering.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design. The repository describes itself as: Northstar web browser, Open Source License: GPL v3. Northstar web browser is a real web browser, not based on Firefox or Chrome. The licence is GPL-3.0.

When your agent uses it

  • CSS produces incorrect styles
  • Especially when a change has altered previously correct rendering

Example prompts

  • “/diagnose-rendering-regressions”

Workflow steps

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

  1. Reduce the defect to deterministic local HTML when practical. Record the URL, viewport, scale, fonts, timing, configuration, and expected…
  2. Capture comparable evidence at successive pipeline stages: DOM, computed style, box or layout tree, paint output, and screenshot.
  3. Compare the failing viewport with a nearby viewport when wrapping, media queries, flex, grid, or fragmentation is involved.
  4. Identify the first stage that becomes incorrect. Do not compensate in a later stage for an earlier-stage defect.

What it can do on your machine

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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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

Diagnose Rendering Regressions loads about 1.1k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 516 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~82
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 nordstjernen-web/northstar-browser at commit 5a86d8b, republished under its GPL-3.0 licence (© nordstjernen-web). 516 words, ~1,070 tokens.

Download SKILL.mdSave it as .claude/skills/diagnose-rendering-regressions/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
diagnose-rendering-regressions
description
Diagnose and fix visual, geometry, hit-testing, and viewport regressions in a browser rendering engine. Use when HTML or CSS produces incorrect styles, box trees, layout, fragmentation, paint output, coordinates, or screenshots, especially when a change has altered previously correct rendering.

Diagnose Rendering Regressions

Read the repository instructions, architecture notes, build guide, and current diff. Preserve unrelated changes.

Establish the evidence

  1. Reduce the defect to deterministic local HTML when practical. Record the URL, viewport, scale, fonts, timing, configuration, and expected result.
  2. Capture comparable evidence at successive pipeline stages: DOM, computed style, box or layout tree, paint output, and screenshot.
  3. Compare the failing viewport with a nearby viewport when wrapping, media queries, flex, grid, or fragmentation is involved.
  4. Identify the first stage that becomes incorrect. Do not compensate in a later stage for an earlier-stage defect.

Trace the pipeline

Check these layers in order:

  • Input decoding, HTML/XML parsing, and DOM construction
  • Selector matching, cascade, inheritance, computed values, and animation
  • Box generation, formatting-context selection, and containing blocks
  • Intrinsic sizing, line breaking, flex/grid/table algorithms, positioning, and fragmentation
  • Display-list construction, clipping, transforms, compositing, and rasterization
  • Presentation scaling, scrolling, hit testing, and input-coordinate conversion

At each layer verify ownership of coordinates and sizes, logical versus physical axes, in-flow versus out-of-flow participation, flat-tree membership, overflow, invalidation, and zoom.

Apply the fix

Implement the smallest standards-based correction at the first incorrect layer. Avoid site-specific behavior, hostname checks, unsupported feature expansion, and unrelated refactoring. Follow the repository's code and comment policy.

Verify the result

Re-run the focused case with identical inputs, then check adjacent viewports and nearby layout modes. Run the repository's existing deterministic smoke cases and relevant visual fixtures. Compile and launch the application using the documented platform workflow. Update user-facing change notes when required.

Measure your change against the published head with your change alone applied. A working tree carrying someone else's edits produces a before/after comparison that credits or blames you for their work; when a comparison shows movement in an area your change cannot reach, that is the likely cause, and the way to settle it is to rebuild the head plus only your diff.

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

Northstar routing

  • Parse and DOM: src/html_lexbor.c, src/html.c, src/dom.c, src/xml.c
  • Style: src/css_syntax.c, src/css.c, src/css_media.c, src/anim.c
  • Layout: src/layout.c, src/layout.h, src/mathml.c
  • Paint: src/paint.c, src/image.c, src/texture.c
  • Presentation: src/render.c, src/headless.c, src/gtk/procview.c

Use the headless dump modes to read each stage: --dump=dom, --dump=layout, --dump=text, and --dump=png:FILE. --dump=layout prints the box tree with margin-box origins and content sizes and is the fastest way to find the first wrong stage.

Drive and inspect a live page with --url=, --viewport=, --settle-ms=, --debug=js,net,error, --eval=<expr> for a value after settling, and --act='<action>; <action>' for input before it. Actions include click X,Y, type TEXT, key NAME, scroll, wait MS, eval JS, and evalfile PATH.

Two traps in that harness. Actions are split on ;, so inline JS in an eval action is silently truncated at its first statement separator — put anything longer than one expression in a file and use evalfile. And type inserts text without keyboard events, so use key when the page's behavior depends on keydown.

When layout looks wrong but the box tree looks right, read the computed values through --eval with getComputedStyle: it distinguishes a bad computed value from a bad layout of a good one.

Use scripts/dev.sh smoke for the deterministic baselines and scripts/render-tests.sh to render data/render-tests/ for visual inspection.

© nordstjernen-web, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .agents/skills/diagnose-rendering-regressions of nordstjernen-web/northstar-browser.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 5a86d8b

Compare with similar skills

Diagnose Rendering Regressions 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.

Diagnose Rendering Regressions compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Diagnose Rendering Regressions this skillnordstjernen-web/northstar-browser128—~1.1kAutomated safety check: PassGPL-3.0
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from nordstjernen-web/northstar-browser

  • Port Engine Changes

    nordstjernen-web/northstar-browser

    Port a browser-engine change between sibling editions or long-lived branches of the same codebase, in either direction.

    128 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Audit Browser Security Boundaries

    nordstjernen-web/northstar-browser

    Audit browser-engine changes that process untrusted content or cross native-memory, origin, network, storage, extension, decoder, sandbox, or operating-system boundaries.

    128 GitHub stars~920 tokensUpdated today
    Auto-check passed

  • Build Northstar

    nordstjernen-web/northstar-browser

    Configure, compile, and smoke-test a Meson-based C or C++ desktop browser on Linux, macOS, or Windows, and diagnose dependency, compiler, linker, runtime-library, build-directory, or…

    128 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • Fix Web Platform Compat

    nordstjernen-web/northstar-browser

    Diagnose and fix standards-compatibility gaps in a browser engine across HTML, DOM, JavaScript bindings, events, CSSOM, forms, fetch, storage, and Web APIs.

    128 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

Categories

Questions about Diagnose Rendering Regressions

What does Diagnose Rendering Regressions do?

Diagnose and fix visual, geometry, hit-testing, and viewport regressions in a browser rendering engine. Diagnose Rendering Regressions is an agent skill from nordstjernen-web/northstar-browser. Diagnose and fix visual, geometry, hit-testing, and viewport regressions in a browser rendering engine.

When should I use Diagnose Rendering Regressions?

Diagnose Rendering Regressions fits situations like: CSS produces incorrect styles; especially when a change has altered previously correct rendering.

How do I install Diagnose Rendering Regressions in Claude Code?

Run `npx skills add nordstjernen-web/northstar-browser --skill diagnose-rendering-regressions -a claude-code`. Or copy the skill folder (.agents/skills/diagnose-rendering-regressions in nordstjernen-web/northstar-browser) into .claude/skills/diagnose-rendering-regressions in your project. Claude Code loads it when a task matches its description.

How do I install Diagnose Rendering Regressions in Codex?

Run `npx skills add nordstjernen-web/northstar-browser --skill diagnose-rendering-regressions -a codex`. Or copy the skill folder (.agents/skills/diagnose-rendering-regressions in nordstjernen-web/northstar-browser) into .agents/skills/diagnose-rendering-regressions in your project. Codex loads it when a task matches its description.

Can I use Diagnose Rendering Regressions 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 nordstjernen-web/northstar-browser --skill diagnose-rendering-regressions -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diagnose-rendering-regressions, .gemini/skills/diagnose-rendering-regressions, .github/skills/diagnose-rendering-regressions and .opencode/skills/diagnose-rendering-regressions in your project.

What does Diagnose Rendering Regressions need to run?

SKILL.md names no scripts, command-line tools or credentials: Diagnose Rendering Regressions is instructions for the agent only.

Does Diagnose Rendering Regressions 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 Diagnose Rendering Regressions 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 Diagnose Rendering Regressions use?

Diagnose Rendering Regressions is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Diagnose Rendering Regressions use?

About 1.1k tokens (SKILL.md is roughly 4.3k 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 Diagnose Rendering Regressions?

Skills that share tags, products or a category with Diagnose Rendering Regressions: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Diagnose Rendering Regressions?

nordstjernen-web (a GitHub organization) maintains it in nordstjernen-web/northstar-browser, which has 128 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 10, 2026.

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