Menu
Update the local HGI stroke-rounded icon font and CSS from the HugeIcons CDN. Downloads the latest font file and rebuilds the icon class SCSS. Use when the CDN publishes new icons or fixes glyphs.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Audit NDS source JS for DRY/KISS violations, scalability and maintainability risks, performance issues, client-side security risks, architectural design (scheduling, memory, DOM API choice, complexity, in-file DRY, KISS), and cross-file pattern consistency. Covers listener/observer pooling via nds-core.js (NDS.onResize, NDS.onIntersect, NDS.onElementResize, NDS.onDOMAdd, NDS.onAttrChange, NDS.debounce), throttling of scroll/resize handlers, NDS.State and NDS.Status reuse, NDS.breakpoints reuse, cross-file detection of repeated helper functions that should be promoted to nds-core.js, component contract conformance (factory vs singleton shape via NDS.{Name}.init/reinit/create), dead defensive guards inside loader-registered components, common web-security sinks (innerHTML XSS, eval/new Function, target="_blank" tabnabbing, postMessage origin checks, untrusted URLs), and architectural review (JSA rules covering unbounded caches/maps, scheduling-primitive choice, polyfill fidelity, DOM API choice, mixed-concern f
Audit NDS source SCSS for measurable CSS-output improvements — selector compaction (combine `:hover`/`:focus-visible` blocks with `:is()`, fold chained `:not()` calls), dead declarations (shorthand-after-longhand overrides, duplicate property/custom-property keys, `@include ltr` blocks that re-state RTL defaults), duplicate rule bodies (in-file and cross-file mixin candidates), selector performance/complexity (unanchored `*`, unanchored `[attr]`, ID selectors in components, deep/compound selector chains), and token-usage consistency (hardcoded numeric values where a token exists, dead component tokens, semantic-token use where a more specific component-level token wraps the same value, asymmetric component-token state coverage). Use for "audit the CSS", "shrink the CSS output", "optimize selectors", "find dead CSS", "combine state blocks with :is()", "find duplicate rule bodies", "find selectors that are too expensive", "check token consistency", "find hardcoded values that should be tokens", "find dead token
Add an HGI icon, a raw SVG, or a Figma icon to the inline UI-icon set so it renders as mask-image via `.nds-icon.nds-hgi-{name}`. Use when components or chrome need a new icon that must paint immediately (no font wait, no FOUT). Triggers on "add HGI icon", "inline this SVG as an icon", and "add icon from Figma". Content/demo pages should keep using `<i class="hgi hgi-stroke hgi-NAME">` — the local HGI font handles those automatically.
Work with NDS documentation pages — create new pages, refine existing ones, add sections, fix code tabs, update guidelines. Covers all doc page categories: components (components/*.md), UI Shell (ui-shell/*.md), layout (layout/*.md), and utilities (utilities/*.md). Use this skill for any task involving demo cards, code examples, toggle controls, or usage guidelines sections.
Measure real page performance for NDS pages (local builds or remote https URLs) using the repo's calibrated throttled-Chrome harness — LCP, FCP, reveal-gate timing, and with --trace a main-thread breakdown (style/layout/script self-time, culprit script frames, long tasks) — instead of hand-writing a Puppeteer script each time. Builds (if needed), gzip-serves the site like GitHub Pages, drives headless Chrome under slow-4G + 6.6× CPU on a mobile viewport, names the actual LCP element, and reports per-run values + median. Use for "measure LCP", "test LCP", "check page speed", "measure performance of <page>", "did this change regress LCP", "what's the LCP on mobile", "measure the live site", "profile the main thread", "what's blocking the main thread", "find long tasks". For the Lighthouse LAB score (the simulated 0–100), see the "Lighthouse lab score" section below — but trust this harness's real numbers over lantern's simulated LCP, which over-estimates ~2× on this site.
| name | nds-hgi-font-update |
| description | Update the local HGI stroke-rounded icon font and CSS from the HugeIcons CDN. Downloads the latest font file and rebuilds the icon class SCSS. Use when the CDN publishes new icons or fixes glyphs. |
| argument-hint | [optional: CDN URL override] |
The HGI icon font is served locally (not from CDN) to avoid CORS issues.
It is used only in content markup via <i class="hgi hgi-stroke hgi-*"> — component/chrome icons use the inline mask-image tier (nds-icon nds-hgi-*) and are unaffected by this skill.
| File | Role |
|---|---|
_sass/_hgiRoundedStroke.scss | @font-face + all .hgi-stroke.hgi-* icon rules |
assets/css/hgi-rounded-stroke-min.scss | Jekyll wrapper (unchanged) |
assets/fonts/hgi-stroke-rounded.woff2 | Binary font file |
Default: https://cdn.hugeicons.com/font/hgi-stroke-rounded.css
Override with $ARGUMENTS if a different URL is provided.
curl -sL "<CDN_URL>" -o <TEMP>/hgi-cdn.css
Parse the current local _sass/_hgiRoundedStroke.scss and the fetched CDN CSS to build two maps: icon-name → unicode. Report:
If nothing changed, stop here and report "already up to date".
_sass/_hgiRoundedStroke.scssParse icon rules from CDN CSS:
matches = cdn_content.scan(/(\.hgi-stroke\.hgi-[a-z0-9-]+:before)\{content:"([^"]+)"\}/)
IMPORTANT: Keep the local @font-face and .hgi-stroke base styles — do NOT use the CDN's @font-face (it points to CDN URLs). The local header must be:
@font-face {
font-family: "hgi-stroke-rounded";
font-display: swap;
src: url("../fonts/hgi-stroke-rounded.woff2") format("woff2");
}
.hgi-stroke {
font-family: "hgi-stroke-rounded" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
display: inline-block;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
Then append all icon rules in formatted style:
.hgi-stroke.hgi-icon-name:before {
content: "X";
}
Extract the woff2 URL from the CDN CSS @font-face block (typically hgi-stroke-rounded.woff2?t=TIMESTAMP). Download from:
https://cdn.hugeicons.com/font/hgi-stroke-rounded.woff2?t=<TIMESTAMP>
Replace assets/fonts/hgi-stroke-rounded.woff2.
bundle exec jekyll serve — builds without errors<i class="hgi hgi-stroke hgi-*"> render icons correctlynds-fontLoading.js handles this