New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Add Icon

by wei in wei/socialify

Add or update supported language, framework, library, tool, or platform icons in Socialify.

MITAuto-check passedMedia & Creative

Install Add Icon

skills CLI
$ npx skills add wei/socialify --skill add-icon -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install wei/socialify add-icon --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/wei/socialify.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/add-icon .claude/skills/add-icon && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
add-icon
GitHub stars
2.2k
Token cost
~826 tokens
SKILL.md length
401 words
Files
1
Skills in repo
2
Repo updated
First seen
Licence
MIT

At a glance

Add or update supported language, framework, library, tool, or platform icons in Socialify.

  • Works in 4 steps: Identify the display name and icon source → Add the mapping entry → Check UI coverage → …
  • A request involves adding a new icon/logo
  • SKILL.md covers Overview, Workflow, Implementation checklist and Example (Typst), plus 1 more section
  • Calls pnpm; reaches raw.githubusercontent.com

What it does

Add Icon is an agent skill from wei/socialify. Add or update supported language, framework, library, tool, or platform icons in Socialify. Use when a request involves adding a new icon/logo, mapping a display name to a Simple Icons entry or a custom icon, and updating the language options list used in the UI.

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative. It works with GitHub. The repository describes itself as: 💞 Socialify your project. 🌐 Share with the world! The licence is MIT.

When your agent uses it

  • A request involves adding a new icon/logo
  • Mapping a display name to a Simple Icons entry
  • Updating the language options list used in the UI

Example prompts

  • “/add-icon”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Identify the display name and icon source
  2. Add the mapping entry
  3. Check UI coverage
  4. Update docs and changeset

What it can do on your machine

Read from SKILL.md and the folder at commit d2a6cc9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • raw.githubusercontent.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Add Icon loads about 826 tokens when it runs. Until then it costs about 68 tokens; SKILL.md has 401 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~68
When it runs · the whole SKILL.md, loaded when a task matches
~826

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from wei/socialify at commit d2a6cc9, republished under its MIT licence (© wei). 401 words, ~826 tokens.

Download SKILL.mdSave it as .claude/skills/add-icon/SKILL.md (or your agent's skills folder).
name
add-icon
description
Add or update supported language, framework, library, tool, or platform icons in Socialify. Use when a request involves adding a new icon/logo, mapping a display name to a Simple Icons entry or a custom icon, and updating the language options list used in the UI.

Add Icon Support

Overview

Add a new language, framework, library, tool, or platform icon to Socialify’s supported list by mapping a display name to a Simple Icons entry (preferred) or a custom icon. This skill focuses on minimal, consistent changes so the entry appears in generated images and selection lists.

Workflow

1. Identify the display name and icon source

Pick the display name you want to surface in Socialify (language, framework, library, tool, or platform). Confirm whether the icon exists in Simple Icons. If it is a language, also check the GitHub Linguist repo for the exact name at https://raw.githubusercontent.com/github-linguist/linguist/main/lib/linguist/languages.yml:

  • If the icon exists, use the si<IconName> export in the mapping.
  • If the icon does not exist, add a custom icon to common/icons/customIcons.ts and export it.

Custom icons must follow the SimpleIcon TypeScript type (same shape as Simple Icons):

  • title: Display name used in the SVG title tag.
  • slug: Lowercase, URL-safe identifier (no spaces).
  • hex: Brand color hex without # (uppercase preferred).
  • source: Source URL for the icon (empty string if unavailable).
  • guidelines: Brand guidelines URL (empty string if unavailable).
  • path: SVG path data string (single path, viewBox 0 0 24 24).
  • svg: Getter that returns a Simple Icons-compatible <svg> string, using title and path.
2. Add the mapping entry

Update common/icons/languageMapping.ts:

  • Import the Simple Icon or custom icon.
  • Add the entry in LANGUAGE_ICON_MAPPING under “GitHub Linguist languages” (for languages) or “Custom Frameworks, Libraries, Tools and Platforms” (for non-languages), keeping alphabetical order by display name.
Show full SKILL.md (157 more words)Show less
3. Check UI coverage

Confirm the UI can surface the new entry:

  • common/configHelper.ts uses LANGUAGE_ICON_MAPPING to build language options, so additions there should show in dropdowns automatically.
4. Update docs and changeset

Follow repo conventions:

  • Add a changeset via pnpm changeset add --empty, then fill in a one-line description.
  • Update AGENTS.md or other relevant docs if the supported list is referenced.

Implementation checklist

  • Choose the display name (language, framework, library, tool, or platform; verify Linguist name for languages).
  • Add a Simple Icon import or a custom icon in common/icons/customIcons.ts.
  • Add the mapping in common/icons/languageMapping.ts in alphabetical order.
  • Confirm the UI picks it up via common/configHelper.ts.
  • Update docs that mention supported entries and add a changeset.

Example (Typst)

Reference commit 121e569b9899851f1df90cfcdaca6e7fa6e2739d:

  • Added siTypst import and the Typst: siTypst mapping entry in common/icons/languageMapping.ts.
  • Added a changeset noting the new supported language.

Notes

  • Keep entries alphabetized to match existing conventions.
  • Prefer Simple Icons when available; custom icons only when necessary.

© wei, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .github/skills/add-icon of wei/socialify.

Open the folder on GitHubat commit d2a6cc9

Compare with similar skills

Add Icon next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Add Icon compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add Icon this skillwei/socialify2.2k—~826Automated safety check: PassMIT
3D Chladni Rendervibe-motion/skills1.3k—~1kAutomated safety check: PassNone
Agnes AI Supportlj1270998580-crypto/Agnes-help-skill304—~14kAutomated safety check: NotesNone
Connector Setupkatipally/openlive336—~860Automated safety check: PassApache-2.0
Bmad Install Agentvibespaulpreibisch/AgentVibes155—~557Automated safety check: PassApache-2.0
Issue Managementremotion-dev/remotion62k1 repos~1kAutomated safety check: PassCustom licence

Similar skills

  • 3D Chladni Render

    vibe-motion/skills

    Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV.

    1.3k GitHub stars~1k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed

  • Agnes AI Support

    lj1270998580-crypto/Agnes-help-skill

    Agnes AI API 接入支持与问题排查 Skill。帮助新用户完成 Agnes AI API 的接入配置， 诊断和解决接入过程中遇到的认证、参数、响应、图像生成、视频生成等各类问题。

    304 GitHub stars~14k tokensUpdated 15 days ago
    Media & CreativeAuto-check: notes

  • Connector Setup

    katipally/openlive

    A skill your agent uses when the user wants to add, connect, sign in to or fix an MCP connector (a server that gives you tools for an app such as GitHub, Linear or Notion).

    336 GitHub stars~860 tokensUpdated today
    Media & CreativeAuto-check passed

  • Bmad Install Agentvibes

    paulpreibisch/AgentVibes

    Install AgentVibes TTS voice system for BMAD agents. An agent skill from paulpreibisch/AgentVibes.

    155 GitHub stars~557 tokensUpdated 21 days ago
    Media & CreativeAuto-check passed

  • Issue Management

    remotion-dev/remotion

    Official

    Manage GitHub Issues 2.0 relationships with gh CLI: parent issues, sub-issues, blocked-by, and blocking links.

    62k GitHub starsUsed in 1 repo~1k tokens
    Media & CreativeAuto-check passed

  • Promo Brief

    kangarooking/promo-creator-skills

    产品宣传片创意简报。输入产品说明或 GitHub 链接，自动抓取产品信息，提炼核心卖点，推荐视觉风格和叙事结构。当用户提到"宣传片""promo""产品视频""做个视频介绍""项目宣传"时触发。

    102 GitHub starsUsed in 1 repo~693 tokens
    Media & CreativeAuto-check passed

More from wei/socialify

  • Upgrade Simple Icons

    wei/socialify

    Upgrade simple-icons to the latest version and preserve any removed icons by sourcing them from the previous version into common/icons/customIcons.ts and updating icon mappings.

    2.2k GitHub stars~369 tokensUpdated 24 days ago
    Auto-check passed

Works with

Categories

Questions about Add Icon

What does Add Icon do?

Add or update supported language, framework, library, tool, or platform icons in Socialify. Add Icon is an agent skill from wei/socialify. Add or update supported language, framework, library, tool, or platform icons in Socialify.

When should I use Add Icon?

Add Icon fits situations like: A request involves adding a new icon/logo; mapping a display name to a Simple Icons entry; updating the language options list used in the UI.

How do I install Add Icon in Claude Code?

Run `npx skills add wei/socialify --skill add-icon -a claude-code`. Or copy the skill folder (.github/skills/add-icon in wei/socialify) into .claude/skills/add-icon in your project. Claude Code loads it when a task matches its description.

How do I install Add Icon in Codex?

Run `npx skills add wei/socialify --skill add-icon -a codex`. Or copy the skill folder (.github/skills/add-icon in wei/socialify) into .agents/skills/add-icon in your project. Codex loads it when a task matches its description.

Can I use Add Icon in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wei/socialify --skill add-icon -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-icon, .gemini/skills/add-icon, .github/skills/add-icon and .opencode/skills/add-icon in your project.

What does Add Icon need to run?

Going by SKILL.md and its folder, Add Icon needs the command-line tools its instructions call (pnpm).

Does Add Icon access the network?

SKILL.md names 1 domain. In commands or code: raw.githubusercontent.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Add Icon safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Add Icon use?

Add Icon is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Add Icon use?

About 826 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Add Icon?

Skills that share tags, products or a category with Add Icon: 3D Chladni Render (vibe-motion/skills, 1.3k stars), Agnes AI Support (lj1270998580-crypto/Agnes-help-skill, 304 stars), Connector Setup (katipally/openlive, 336 stars) and Bmad Install Agentvibes (paulpreibisch/AgentVibes, 155 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add Icon?

wei (a GitHub user) maintains it in wei/socialify, which has 2,215 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on September 14, 2026.

Source: wei/socialify on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.