скилл CX Codex

add-icon — скилл для Claude Code: что делает и как установить

Q: Как установить add-icon в Claude Code?

Выполните команду `npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code` в терминале. Также можно сохранить файл по пути `~/.claude/skills/add-icon/SKILL.md`.

Подбирает и вставляет иконки Font Awesome в проект с учётом установленного фреймворка и способа подключения.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code

Открыть на GitHub

Что делает add-icon

Скилл находит нужную иконку Font Awesome по имени или смысловому описанию и внедряет её прямо в код. Сначала инструмент проверяет наличие утилиты fa в системе. Если CLI не установлен, агент запускает локальные Python-скрипты из состава плагина.

Агент сам определяет способ подключения графики. Он ищет файл .font-awesome.md или сканирует package.json и разметку на наличие пакетов React, Vue либо CDN. Если точное имя иконки не найдено, запускается внутренний поиск альтернатив. Без утилиты fa версии 0.8.0 или выше проверить состав закрытого набора Kit не выйдет.

Какие задачи решает

подобрать символ Font Awesome по смысловому описанию
вставить компонент иконки в разметку React или HTML
проверить наличие глифа в персональном наборе Kit
заменить отсутствующую иконку на близкий аналог

Примеры запросов агенту

Вставь иконку cart-shopping в кнопку оформления заказа в src/components/Header.tsx
Добавь тонкую иконку кофейной чашки в навигационное меню
Подбери и добавь иконку профиля пользователя в компонент шапки

Как установить add-icon

1Через Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code

2Вручную: положить файлы

~/.claude/skills/add-icon/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/add-icon/

1Через Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a codex

2Вручную: положить файлы

.agents/skills/add-icon/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a cursor

2Вручную: положить файлы

.cursor/skills/add-icon/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install FortAwesome/fontawesome-agent-tools add-icon

2Вручную: положить файлы

.github/skills/add-icon/SKILL.md

1Через Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a gemini-cli

2Командой платформы

gemini skills install https://github.com/FortAwesome/fontawesome-agent-tools --path plugins/icons/skills/add-icon

Вручную: положить файлы

.devin/skills/add-icon/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о add-icon

Как установить add-icon в Claude Code?

Выполните команду npx skills add FortAwesome/fontawesome-agent-tools --skill add-icon -a claude-code в терминале. Также можно сохранить файл по пути ~/.claude/skills/add-icon/SKILL.md.

Что делает скилл add-icon?

Он определяет стек проекта, подбирает значок Font Awesome по названию или назначению и генерирует готовый код для импорта или вставки.

Обязательно ли устанавливать утилиту fa CLI?

Нет, базовый поиск работает через вспомогательные скрипты на Python. Но для проверки состава персонального набора Kit потребуется fa версии не ниже 0.8.0 с авторизацией через fa login.

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →

frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора4

suggest-icon Подбирает иконку Font Awesome под ситуацию, слово или понятие и проверяет, что она есть в вашей версии или Kit. CX Codex +1 551установок setup-fa Настраивает Font Awesome в проекте с нуля: определяет фреймворк, подбирает Kit или npm-пакеты и создаёт файл конфигурации .font-awesome.md. CX Codex +1 503установок fa-help Отвечает на вопросы о Font Awesome по официальной документации, а не по памяти модели. Полезен при настройке, стилизации и апгрейде иконок. CX Codex +1 498установок