Register new HGI icons and aliases in the design system.
npx skills add https://github.com/mazin-musleh/NDS-vanilla --skill nds-add-icon
Please help me install this Agent Skill. Skill: nds-add-icon Source: https://github.com/mazin-musleh/NDS-vanilla/tree/main/.claude/skills/nds-add-icon Command: npx skills add https://github.com/mazin-musleh/NDS-vanilla --skill nds-add-icon
This Skill helps design teams register and expose new HGI icons in the inline UI-icon set, ensuring consistent naming, tokens, and aliases across the project.
--nds-icon-{name} token and one alias (.nds-hgi-{name} by default) for each new icon._sass/_icons.scss and provides guidance for verification and usage.Run the add-icon script with the desired name to register a new HGI icon and its alias.
High-intent search queries and answers about installing and using this skill.
To add a new SVG icon to the design system, this Skill processes the icon name and emits a CSS token (`--nds-icon-{name}`) along with an alias (`.nds-hgi-{name}`) in alphabetically sorted order.
The UI-icon set registration process handles naming variants to cover different styles and types as needed, updating the `_sass/_icons.scss` file while ensuring consistent tokens and aliases across the project.
Yes, you can register HGI icons using sources from both raw SVGs and Figma references. The script processes these inputs and updates the inline UI-icon set with the appropriate CSS tokens.
The best way to update design-system tokens is running the add-icon script, which registers new HGI icons and emits CSS tokens and aliases in alphabetically sorted order within the `_sass/_icons.scss` file.
No, the script automatically updates token placement in `_sass/_icons.scss` and provides guidance for verification and usage, although the file remains hand-editable for manual adjustments if needed.
You should use the add-icon script when expanding the inline UI-icon set across components, themes, and documentation during design-system updates to ensure consistent naming and token generation.
farmanlabConvert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.
mazin-muslehFetch CDN CSS, rebuild the local SCSS icon map, and update the HGI font file.
payloadcmsAutomate Payload CMS UI reskinning from Figma designs with SCSS to CSS migration.
baloiseAnalyze SCSS files to create design tokens in Base.tokens.json.