New: 97,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

Sync Icons

by wanteddev in wanteddev/montage-web

Sync icons from the Figma file into wds-icon and open a PR by dispatching the figma-icon-sync-code-connect.yml GitHub Actions workflow.

MITAuto-check passedFrontend & Design

Install Sync Icons

skills CLI
$ npx skills add wanteddev/montage-web --skill sync-icons -a claude-code

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

GitHub CLI
$ gh skill install wanteddev/montage-web sync-icons --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/wanteddev/montage-web.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/sync-icons .claude/skills/sync-icons && 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
sync-icons
GitHub stars
117
Token cost
~1.9k tokens
SKILL.md length
959 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Sync icons from the Figma file into wds-icon and open a PR by dispatching the figma-icon-sync-code-connect.yml GitHub Actions workflow.

  • Works in 4 steps: Pick the dispatch branch (the future PR… → Confirm the publish input → Dispatch the workflow → …
  • The user says 아이콘 업데이트해줘
  • SKILL.md covers When to trigger, What the workflow does (so you…, Workflow inputs and Workflow, plus 3 more sections
  • Calls gh and git; needs FIGMA_TOKEN

What it does

Sync Icons is an agent skill from wanteddev/montage-web. Sync icons from the Figma file into wds-icon and open a PR by dispatching the figma-icon-sync-code-connect.yml GitHub Actions workflow. The workflow pulls the latest icon set from Figma, generates Code Connect bindings, and opens a PR against the branch you dispatched from. Use this skill whenever the user says "아이콘 업데이트해줘", "아이콘 싱크해줘", "Figma에서 아이콘 가져와줘", "sync icons", "update icons from Figma", "code connect publish", or otherwise indicates they want the icon set refreshed from the Figma source of truth.

Its SKILL.md is about 1.9k 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 Frontend & Design, covering Icons and illustration, Pull requests and CI/CD. It works with Figma, GitHub Actions and React. The repository describes itself as: 🎨 Wanted Web Design System - Montage. The licence is MIT.

When your agent uses it

  • The user says 아이콘 업데이트해줘
  • Figma에서 아이콘 가져와줘
  • Update icons from Figma
  • Code connect publish

Example prompts

  • “Figma에서 아이콘 가져와줘”
  • “sync icons”
  • “update icons from Figma”
  • “/sync-icons”

Requirements

  • A credential in FIGMA_TOKEN

Workflow steps

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

  1. Pick the dispatch branch (the future PR base)
  2. Confirm the publish input
  3. Dispatch the workflow
  4. Surface progress

What it can do on your machine

Read from SKILL.md and the folder at commit c564409. 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:

    • gh
    • git

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

  • Network

    No URLs in SKILL.md. Its commands use gh and git, which can reach the network depending on how they are called.

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

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FIGMA_TOKEN

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

Context cost

Sync Icons loads about 1.9k tokens when it runs. Until then it costs about 132 tokens; SKILL.md has 959 words of instructions outside code blocks.

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

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 wanteddev/montage-web at commit c564409, republished under its MIT licence (© wanteddev). 959 words, ~1,928 tokens.

Download SKILL.mdSave it as .claude/skills/sync-icons/SKILL.md (or your agent's skills folder).
name
sync-icons
description
Sync icons from the Figma file into `wds-icon` and open a PR by dispatching the `figma-icon-sync-code-connect.yml` GitHub Actions workflow. The workflow pulls the latest icon set from Figma, generates Code Connect bindings, and opens a PR against the branch you dispatched from. Use this skill whenever the user says "아이콘 업데이트해줘", "아이콘 싱크해줘", "Figma에서 아이콘 가져와줘", "sync icons", "update icons from Figma", "code connect publish", or otherwise indicates they want the icon set refreshed from the Figma source of truth.

sync-icons

Triggers the figma-icon-sync-code-connect.yml workflow that does all the actual work — pulls icons from Figma, regenerates wds-icon, wires up Code Connect, and opens a PR. This skill just dispatches the workflow with the right inputs against the right branch.

When to trigger

  • "아이콘 업데이트해줘" / "아이콘 싱크해줘" / "Figma 아이콘 가져와줘"
  • "code connect publish 해줘" / "code connect 갱신"
  • "sync icons" / "update icons from figma"
  • User mentions new icons added to the Figma library and wants them in the codebase

What the workflow does (so you know what's about to happen)

You don't run any of this yourself — it's all in the workflow. But knowing the steps helps you set expectations for the user:

  1. Pulls the icon set from the Figma file (uses FIGMA_TOKEN secret).
  2. Runs scripts/figma-icon.mjs to regenerate packages/wds-icon.
  3. Creates a branch named feature/code-connect/<run_id>, commits, pushes.
  4. Opens a PR with that branch as the head and the branch you dispatched from as the base.
  5. If publish=true, also publishes Code Connect mappings to Figma (so designers see the codebase ↔ Figma binding).

The PR title is auto-set to feat(wds,wds-icon): icon figma sync and new code connect publish.

Workflow inputs

InputTypeDefaultMeaning
publishchoice'true'Whether to push Code Connect mappings up to Figma after the PR opens

That's the only input. If the user doesn't mention publishing, default to true — that's the documented behavior. Only set publish=false if the user explicitly asks to skip the Code Connect publish step ("publish 빼고", "publish 하지마", "code connect는 다음에" etc).

Workflow

1. Pick the dispatch branch (the future PR base)

Almost always main. Routine icon syncs are run from main so the resulting PR targets main and ships in the next regular release. Default to main and only deviate when the user explicitly says otherwise.

The exception is when icon work is bundled with other in-progress changes — e.g. dispatching from a major version branch like feature/4.0.0 if breaking icon renames are part of the next major. This is rare; assume main unless told.

Confirm with the user before dispatching: "main 기준으로 아이콘 싱크 PR 만들면 될까요? (대부분 main에서 실행합니다. 다른 브랜치 필요하면 알려주세요)"

The branch must exist on the remote — verify with:

bash
git ls-remote --exit-code --heads origin "<branch>" >/dev/null

If it doesn't exist, surface the error and stop.

2. Confirm the publish input

If the user explicitly opted out (publish=false), use that. Otherwise default to publish=true without re-asking — the user shouldn't have to confirm the default every time.

If you're unsure (e.g. user said "먼저 코드 변화만 보고 싶어"), ask once: "Figma에 Code Connect 매핑도 publish 할까요? (기본값: 예)"

3. Dispatch the workflow
bash
gh workflow run figma-icon-sync-code-connect.yml \
  --ref <dispatch-branch> \
  -f publish=true

That's it. The workflow is responsible for the branch creation, commit, push, and PR. Don't try to do any of it yourself.

4. Surface progress

Print the latest run URL so the user can watch:

bash
# Wait a couple seconds for the run to register, then:
gh run list --workflow=figma-icon-sync-code-connect.yml --limit 1 \
  --json databaseId,url,status,createdAt

Tell the user:

  • The workflow is running.
  • The PR will be opened against <dispatch-branch> when it finishes (~few minutes).
  • If publish=true, Code Connect will be pushed to Figma after the PR is created.
  • They can watch progress at the run URL.

Don't poll for completion unless the user asks — the workflow takes minutes, and the user can refresh the run page themselves.

Show full SKILL.md (436 more words)Show less

Release classification: icon adds are minor

When the auto-generated PR shows up, it should be milestoned as a minor version bump — adding icons is a non-breaking feature add, so it falls under feat in Conventional Commits and bumps the minor version.

The workflow titles the PR feat(wds,wds-icon): icon figma sync and new code connect publish, which create-pr's bump-type detection will already classify as minor. But the workflow opens the PR via the github-actions[bot] and doesn't attach a milestone, so:

  • After the workflow finishes, attach the next minor milestone (e.g. current 3.5.0 → 3.6.0) to the PR. The create-pr skill's milestone logic explains how to compute and ensure the milestone exists.
  • The only situation where it's not minor: if the sync also removes or renames existing icons in a way that breaks consumers (i.e. the diff has icon deletions). That's a feat!: and bumps major — but it should also be on a major branch, not main. Surface the deletion to the user and confirm before touching the milestone.

Edge cases

SituationBehavior
User on a non-main branch with uncommitted changesDoesn't matter — the workflow runs on the remote, not the local working tree. No need to commit/stash first.
User asks "main이 아니라 내 브랜치 기준으로"Use the user's current branch as --ref. Verify it's pushed to origin first.
User says "publish 하지 마" / "Figma에 안 올려도 돼"Pass -f publish=false. Mention that Code Connect bindings won't be reflected in Figma until a future publish.
Workflow run fails to register / gh workflow run errorsSurface the error and stop — common cause is the branch not being pushed to origin yet, or the user lacking permissions.
Recent run already in progressMention it and ask if they want to wait or dispatch another. Multiple concurrent runs will produce duplicate PRs.

Why these defaults

  • publish=true by default: this is the documented default in the workflow itself — the whole point of running the sync is to keep Figma's Code Connect bindings in step with what the codebase advertises. Skipping publish is the unusual case (typically only when you want to inspect generated code first).
  • Default to dispatching from main: routine icon adds are non-breaking and ship in the next minor release on main. Dispatching elsewhere is the exception, not the norm.
  • Icon adds are minor bumps: adding icons is a feat in Conventional Commits → minor version bump. Only icon removals/renames promote it to feat!: / major, and those don't belong on main anyway.
  • Don't hand-do any of the git work: the workflow's branch / commit / PR sequence is deliberately atomic and uses a bot identity. Replicating it locally just creates noise and parallel branches.

© wanteddev, 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 .claude/skills/sync-icons of wanteddev/montage-web.

Open the folder on GitHubat commit c564409

Compare with similar skills

Sync Icons 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.

Sync Icons compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Sync Icons this skillwanteddev/montage-web117—~1.9kAutomated safety check: PassMIT
Vrtmarigold-ui/marigold146—~787Automated safety check: PassMIT
Kill AI Slopyetone/kill-ai-slop1.3k—~1.4kAutomated safety check: PassApache-2.0
Design To CodeMigoXLab/coderio1142 repos~1.2kAutomated safety check: PassApache-2.0
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Fluent Icons Lookupcoltongriffith/fluenticons442—~492Automated safety check: PassNone

Similar skills

  • Vrt

    marigold-ui/marigold

    DST — Trigger the Visual-Regression-Tests (Chromatic) GitHub Actions workflow on the current or a given branch.

    146 GitHub stars~787 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Kill AI Slop

    yetone/kill-ai-slop

    Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.

    1.3k GitHub stars~1.4k tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed

  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 8 days ago
    Frontend & DesignAuto-check: notes

  • Fluent Icons Lookup

    coltongriffith/fluenticons

    Looks up Microsoft Fluent UI System Icons and their exact @fluentui/react-icons component names through the Fluent Icons MCP server or HTTP API, instead of guessing.

    442 GitHub stars~492 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Review UI Design

    ColourCloudSky/review-ui-design-skill

    评审单份或一组产品 UI 设计稿，像资深设计专家团一样从视觉质量、交互体验、设计系统三个方面发现问题并给出具体、可执行、按优先级排序的优化建议；在可行时默认生成与报告编号对应的问题标注图和优化建议图，并支持修改稿增量复评。Use when the user provides UI screenshots, icon sets, screen recordings, product flows…

    119 GitHub stars~1.4k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

More from wanteddev/montage-web

  • Montage React

    wanteddev/montage-web

    Guide for building UI with Montage (Wanted Design System) in React/Next.js projects.

    117 GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Create PR

    wanteddev/montage-web

    Create a GitHub pull request from the current branch. An agent skill from wanteddev/montage-web.

    117 GitHub stars~6.3k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about Sync Icons

What does Sync Icons do?

Sync icons from the Figma file into wds-icon and open a PR by dispatching the figma-icon-sync-code-connect.yml GitHub Actions workflow. Sync Icons is an agent skill from wanteddev/montage-web.yml GitHub Actions workflow.

When should I use Sync Icons?

Sync Icons fits situations like: the user says 아이콘 업데이트해줘; figma에서 아이콘 가져와줘; update icons from Figma; code connect publish.

How do I install Sync Icons in Claude Code?

Run `npx skills add wanteddev/montage-web --skill sync-icons -a claude-code`. Or copy the skill folder (.claude/skills/sync-icons in wanteddev/montage-web) into .claude/skills/sync-icons in your project. Claude Code loads it when a task matches its description.

How do I install Sync Icons in Codex?

Run `npx skills add wanteddev/montage-web --skill sync-icons -a codex`. Or copy the skill folder (.claude/skills/sync-icons in wanteddev/montage-web) into .agents/skills/sync-icons in your project. Codex loads it when a task matches its description.

Can I use Sync Icons 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 wanteddev/montage-web --skill sync-icons -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sync-icons, .gemini/skills/sync-icons, .github/skills/sync-icons and .opencode/skills/sync-icons in your project.

What does Sync Icons need to run?

Going by SKILL.md and its folder, Sync Icons needs the command-line tools its instructions call (gh and git) and credentials named FIGMA_TOKEN. Our summary lists: A credential in FIGMA_TOKEN.

Does Sync Icons access the network?

SKILL.md contains no URLs. Its commands use gh and git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Sync Icons 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 Sync Icons use?

Sync Icons 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 Sync Icons use?

About 1.9k tokens (SKILL.md is roughly 7.7k 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 Sync Icons?

Skills that share tags, products or a category with Sync Icons: Vrt (marigold-ui/marigold, 146 stars), Kill AI Slop (yetone/kill-ai-slop, 1.3k stars), Design To Code (MigoXLab/coderio, 114 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sync Icons?

wanteddev (a GitHub organization) maintains it in wanteddev/montage-web, which has 117 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 7, 2026.

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