Vitepress logo sizing

Skill LaWebcapsule/d9-skills/skills/vitepress-logo-sizing

Agent Skills for d9 (Directus 9 fork) — install with: npx skills add LaWebcapsule/d9-skills

Install

npx -y skills add LaWebcapsule/d9-skills --skill vitepress-logo-sizing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Fix VitePress logo distortion in dark mode by setting explicit CSS height instead of unset.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.0 KB, as published. Nobody here has run it

Skill: VitePress Logo Sizing

Purpose

When replacing the default VitePress logo with a custom SVG, the logo can appear distorted (stretched or squished) in dark mode. This happens because VitePress's default CSS sets height: unset on the logo image in certain theme variants, which removes the height constraint and lets the SVG expand to its intrinsic aspect ratio.

Triggers

Custom logo SVGs are being added to a VitePress site
The logo looks correct in light mode but distorted in dark mode (or vice versa)
CSS overrides exist in .vitepress/theme/overrides.css

Actions

In .vitepress/theme/overrides.css, find the logo image rule
Replace height: unset with an explicit height: height: 36px (adjust as needed)
Test both light and dark mode to verify the logo renders correctly
If using separate light/dark logos, ensure both SVGs have the same viewBox dimensions

/* BAD — causes distortion in dark mode */
.VPNavBarTitle .logo {
  height: unset;
}

/* GOOD — explicit height prevents distortion */
.VPNavBarTitle .logo {
  height: 36px;
}

Errors Prevented

Logo distortion in dark mode: The logo stretches vertically or horizontally depending on the SVG's intrinsic dimensions. Not immediately obvious during development if you only test in one theme mode. Took 1h to identify the CSS rule causing it because the issue is in an override file, not in the main config.

Restrictions

The exact pixel value depends on your logo's aspect ratio — 36px is a starting point
If you use width instead of height, test on mobile viewports where the nav bar is narrower
This applies to VitePress 1.x — future versions may handle logo sizing differently

Gives 0 of the 12 instructions most images graphics skills give

Counted across 371 of the 372 authors here whose files we hold, read 2026-08-06

create a complete brand world in one imagein 19 of 371, across 5 files
infer the brand strategy before generatingin 19 of 371, across 5 files
use a clean presentation gridin 19 of 371, across 5 files
confirm connection status is activein 19 of 371, across 4 files
base the visual system on meaningin 17 of 371, across 3 files
use very little textin 17 of 371, across 3 files
make every panel feel connectedin 17 of 371, across 3 files
call RUBE_SEARCH_TOOLS firstin 17 of 371, across 3 files
convert dash-format node IDs to colon formatin 17 of 371, across 5 files
match reference quality and rhythm if providedin 16 of 371, across 2 files
narrow scope or reduce depth to avoid oversized payloadsin 16 of 371, across 4 files
generate a simple and memorable logoin 15 of 371, across 1 file

Said here and by no other author read

Find the logo image rule in overrides
Replace height unset with explicit height
Test both light and dark mode
Ensure both SVGs have same viewBox dimensions

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.