skills.rest
curiosity-ai
curiosity-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

uicons-fonts

Regenerates UIcons webfonts and enum, baking optical centering into glyph outlines.

53|8|Updated Oct 24, 2019
Search Tags:#playwright#tesserae#icon fonts#woff2#optical centering#glyph outlines#font regeneration
One-click install
npx skills add https://github.com/curiosity-ai/tesserae --skill uicons-fonts-curiosity-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uicons-fonts
Source: https://github.com/curiosity-ai/tesserae/tree/main/.claude/skills/uicons-fonts
Command: npx skills add https://github.com/curiosity-ai/tesserae --skill uicons-fonts-curiosity-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Microsoft.Playwright.

What problem does it solve? Icons in the Tesserae UI toolkit render off-center because vendor font glyphs are not optically centered, and CSS-based nudges get rounded away at small pixel sizes. This Skill runs the Build.UpdateInterfaceIcons pipeline that downloads the UIcons fonts, regenerates the enum and stylesheets, measures every glyph in headless Chromium, and shifts glyph outlines inside the woff2 files so centering survives at any size. ## Core Features & Use Cases - Font regeneration pipeline: Downloads all nine UIcons weights from Flaticon, rewrites the uicons-*.css files, and regenerates the UIcons enum in one gated run. - Baked optical centering: Measures each glyph's rendered ink in headless Chromium and shifts outlines inside the woff2 glyph encoding, so corrections survive at any icon size instead of being rounded away by CSS pixel snapping. - Alignment group preservation: Keeps icons that must overlap (checkbox/square, state variants, frame families) registered to shared offsets via union-find capping rules. - Use Case: When an icon looks off-center or overlapping icons like checkbox and square have drifted apart, run the tool to re-measure and re-bake the corrections, with built-in checks that fail the run if any glyph ends up worse. ## Quick Start Run the icon update pipeline with dotnet run --project Build.UpdateInterfaceIcons to download, regenerate, and re-center the UIcons fonts.

Frequently Asked Questions about uicons-fonts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I update the UIcons icon fonts in Tesserae?▼

Run dotnet run --project Build.UpdateInterfaceIcons from the repository root. It downloads the nine font weights from Flaticon, regenerates the UIcons enum and CSS, measures glyphs in headless Chromium, and bakes centering corrections into the woff2 outlines.

Why do icons look off-center at small sizes in web fonts?▼

CSS pixel rounding snaps sub-pixel offsets to whole pixels, so a 0.02em nudge at 13px does nothing. Baking the offset into the glyph outline makes the correction part of the rasterized shape, so it survives at any size and container position.

Does the icon update run on every build?▼

No, it is gated. The downloaded version plus a hash of every woff2 is compared against uicons-source.txt, and if they match the run exits without touching anything. Use --force to override the gate.

What dependencies are needed to run the font update tool?▼

The only prerequisite is a Chromium browser installed for Playwright, via the playwright.ps1 script from the Microsoft.Playwright package. The font surgery itself is pure C# in Woff2File.cs, TransformedGlyf.cs, and CmapLookup.cs.

Why did the icon update tool fail or exit non-zero?▼

The run fails if any check fails: glyphs ending further off-center than rounding explains, overlapping icons drifting apart, mismatched glyf table sizes, bounding boxes not covering outlines, or Chromium failing to decode a patched font. A failed run leaves no marker so the next run starts over.

When should icons not be re-centered by the tool?▼

Icons more than 0.04em off-center are left as drawn, because at that distance the asymmetry is usually intentional design, such as circle-half or signal-bars-weak. The offset cap also prevents corrections from pushing ink outside the glyph's layout box.

Related Skills

Explore More Software Engineering Skills→
dennisonbertramdennisonbertram
1

e2e-testing

Automate end-to-end browser testing with Playwright across Chromium, Firefox, and WebKit.

Community
Intermediate
sraloffsraloff
2

assets-icons-fonts

Optimize icons, fonts, and images for frontend performance.

Community
Basic
diegosouzapwdiegosouzapw
44.0k

capture-release-evidences-cx

Automate browser validation of released UI features and capture WebP evidence.

Community
Intermediate
e-xodee-xode
3

vuetify-icons

Standardize Vue SSR component icons with @mdi/js SVG paths.

Official
Basic