Better Icons
CLI do przeszukiwania ponad 200 zestawów ikon Iconify i pobierania SVG; wyjście wymaga usunięcia atrybutów fill
Działa po konfiguracji
Co robi ten skill
Otacza CLI `better-icons` npm, dzięki czemu Claude może przeszukiwać ponad 200 kolekcji ikon Iconify (lucide, mdi, tabler, heroicons, phosphor, solar) i pobierać ikony SVG za pomocą identyfikatora `prefix:name`. Uruchamia się, gdy zadanie obejmuje znajdowanie, wybieranie lub dodawanie ikon do projektu, zamiast ręcznego pisania ścieżk SVG z pamięci. Dokumentuje flagi CLI plus opcjonalny serwer MCP eksponujący narzędzia do wyszukiwania, pobierania wsadowego, rekomendowania i skanowania projektów.
Raport z testu
INSTALACJA 5/5: frontmatter parsowany z name+description; treść nie odwołuje się do żadnych lokalnych plików, tylko do pakietu npm i Iconify API — wyrywkowo sprawdzono registry.npmjs.org/better-icons (200, najnowsza wersja 1.0.4, bin obecny), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Brak twardo zakodowanych ścieżek, brak curl|sh, brak base64, brak eksfiltracji sekretów, brak tekstu iniekcji. Uwaga o pochodzeniu: jest to skopiowana wersja — autor upstream to better-auth/better-icons, nie dtsola. TRIGGER 5/5, wszystkie ocenione poprawnie. POWINIEN zadziałać: "Potrzebuję dobrej ikony kosza/usuwania dla tego paska narzędzi, znajdź mi jedną" (tak); "Jakie zestawy ikon mają wypełnioną ikonę dzwonka? Daj mi SVG" (tak); "Dodaj ikonę zębatki ustawień do komponentu paska bocznego Vue" (tak). NIE POWINIEN: "Wygeneruj ikonę/logo aplikacji dla mojej aplikacji macOS w rozmiarze 1024x1024" (nie — generowanie logo, nie wyszukiwanie w bibliotece); "favicon.ico zwraca 404 w produkcji" (nie — błąd serwowania zasobów statycznych). Uwaga: początkowa klauzula "Używaj podczas pracy z ikonami w dowolnym projekcie" jest zbyt szeroka; tylko drugie zdanie zapobiega fałszywemu wyzwoleniu przypadku 4. WYNIK 6/10, autentycznie zmierzony. Zadanie: dostarczyć wbudowane ikony SVG `search` + `settings` o rozmiarze 24px z jednego spójnego zestawu dla aplikacji Vue. WERSJA BAZOWA (tylko frontmatter): `search` zapamiętałem poprawnie, ale NIE MOGŁEM przypomnieć sobie ścieżki `settings` Lucide i musiałbym ją skrócić lub wrócić do dodania zależności lucide-vue-next. UMIEJĘTNOŚĆ: `npx better-icons@1.0.4 search settings --prefix lucide`, a następnie `get` zwróciło dokładną geometrię upstream — prawdziwa wygrana w tym, w czym wersja bazowa zawiodła. ALE CLI wstrzykuje `fill="currentColor"` (lub wartość `--color`) do elementów podrzędnych path/circle wewnątrz `<g fill="none">`, czego upstream Iconify nie robi. Rasteryzowałem oba za pomocą rsvg-convert: ikona wyszukiwania CLI = 46,1% ciemnych pikseli vs 19,4% upstream; wizualnie lupa renderuje się jako solidny dysk, a zębatka jako bezkształtna bryła bez centralnego otworu. Tak więc ścisłe przestrzeganie umiejętności dostarcza uszkodzone ikony konturowe dla większości kolekcji, które sama rekomenduje. Jednoliniowy sed usuwający atrybuty fill elementów podrzędnych przywraca poprawne renderowanie (zweryfikowane). Również `--limit 3` i `--limit 8` zostały zignorowane w niefiltrowanym wyszukiwaniu (zwracały 32 za każdym razem); `--prefix` działa. DOKUMENTACJA 4/5: SKILL.md jest krótki i dokładny co do kształtu poleceń, a twierdzenie o ponad 200 bibliotekach / Iconify jest prawdziwe. Traci punkt, ponieważ udokumentowana flaga `--limit` nie działa, wada wstrzykiwania fill jest nieudokumentowana, a tabela MCP z 8 narzędziami jest przedstawiona jako dostępna, ale jest niemożliwa do zweryfikowania z dokumentacji (brak linku do repozytorium upstream, brak README w katalogu umiejętności). WERDYKT: konfiguracja zamiast zaliczenia: bramki numeryczne są spełnione (20 ogółem, instalacja 5, trigger 5, outputMeasured true), ale podstawowy wynik wymaga ręcznej korekty przy każdym wywołaniu `get`, co jest rzeczywistym tarciem przy każdym użyciu.
Testowano: 2026-07-21 · Claude Code 2.x (agent harness)
Instalacja
npm install -g better-icons # or: bun add -g better-icons # (or skip the install and prefix every command with npx/bunx) mkdir -p ~/.claude/skills/better-icons curl -sL https://raw.githubusercontent.com/dtsola/xiaoyaosearch/HEAD/.claude/skills/better-icons/SKILL.md \ -o ~/.claude/skills/better-icons/SKILL.md # verify better-icons search settings --prefix lucide better-icons get lucide:settings # REQUIRED post-step: the CLI injects fill= onto child elements, which fills # outline icons solid. Strip it: better-icons get lucide:settings | sed -E 's/(<(path|circle|rect|line|polyline|polygon)) fill="[^"]*"/\1/g'
Komendy i przykładowe prompty
/better-iconsCLI do przeszukiwania ponad 200 zestawów ikon Iconify i pobierania SVG; wyjście wymaga usunięcia atrybutów fill
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Find a shopping cart icon for this buttonSearch for a settings gear icon in IconifyGet the SVG for this Material icon