wei/socialify

Overview

This skill adds or updates supported language, framework, library, tool, or platform icons in Socialify. It maps display names to Simple Icons entries when available or registers a custom icon that matches the SimpleIcon TypeScript shape. Changes make the icon available in generated social images and the UI selection lists. It focuses on small, consistent edits that follow repository conventions.

How this skill works

You identify the display name and check Simple Icons (and GitHub Linguist for languages). If a Simple Icon exists, import its si<IconName> export; otherwise create a custom icon object in common/icons/customIcons.ts with the required properties and svg getter. Then add a mapping in common/icons/languageMapping.ts under the appropriate section (languages or custom frameworks) in alphabetical order so the UI picks it up via common/configHelper.ts. Finish by adding a changeset and updating any docs that list supported entries.

When to use it

• Adding a new language so it appears in dropdowns and social images.
• Adding a framework, library, tool, or platform not yet supported.
• Replacing or updating an existing icon with a corrected Simple Icon or better custom SVG.
• Mapping a display name to a different Simple Icons entry for consistency.
• Ensuring UI language/options lists include the new entry automatically.

Best practices

• Prefer existing Simple Icons exports whenever possible to reduce maintenance.
• For languages, verify the exact name in the GitHub Linguist languages.yml before adding an entry.
• Keep languageMapping entries alphabetized by display name to match project conventions.
• Custom icons must follow the SimpleIcon TypeScript shape: title, slug, hex, source, guidelines, path, and svg getter.
• Add a changeset for every supported-list change and update any referenced docs or agent lists.

Example use cases

• Add support for a new programming language by mapping Typst to siTypst and adding the mapping entry.
• Introduce a proprietary tool by creating a custom icon in common/icons/customIcons.ts and registering it in languageMapping.ts.
• Fix a broken or incorrect icon by replacing the mapping with a Simple Icons import or an improved custom SVG.
• Add a popular library so it appears in generated social images and the UI selector automatically.
• Map several aliases of the same technology to a single Simple Icon export for consistency.