Icon Forge

Was macht Icon Forge?

Zeichne benutzerdefinierte Icons, die wie aus einem professionellen Set wirken, und liefere sie ohne Laufzeitabhängigkeiten aus. Du bist fertig, wenn jedes Icon den Lint besteht, du dir die 16-/20-/24-Px-Vorschau angesehen hast (sie ist auf hellem und dunklem Hintergrund klar und konsistent lesbar) und die generierten Komponenten mit barrierefreier Nutzung eingebunden sind.

<skill> bedeutet das Verzeichnis, das diese Datei enthält (z. B. .claude/skills/icon-forge, .cursor/skills/icon-forge, .agents/skills/icon-forge). Skripte benötigen Node ≥ 18 und keine Projektabhängigkeiten.

Wann verwenden / wann nicht

• Verwenden: Eine Sidebar, Navbar, ein Dashboard, eine Einstellungsseite, ein leerer Zustand oder eine Toolbar benötigt Icons; der Benutzer fragt nach einem benutzerdefinierten oder fehlenden Icon; der Benutzer möchte Emoji/Platzhalter-Icons oder ein schweres Icon-Paket durch ein eigenes, kleines Set ersetzen.
• Nicht verwenden: Logos und Markenzeichen (Markenrecht; benötigt einen Designer), Favicons/App-Icons, Illustrationen oder Spot-Art, Fotos/Rastergrafiken, animierte Lottie-Animationen. Wenn der Benutzer explizit die Installation einer Bibliothek wünscht (z. B. „nimm einfach Lucide“), erfülle seine Bitte; dieser Skill existiert für den benutzerdefinierten Weg.

Harte Regeln (und warum)

1. Zeichne jedes Icon selbst; füge keine Icon-Bibliotheks-Abhängigkeit hinzu. Der Benutzer hat sich für eigene Icons entschieden – wegen der Bundle-Größe und eines einzigartigen Looks. Kopiere keine Pfaddaten von Lucide, Heroicons, Material usw. (Lizenz und Originalität). Verwende references/glyph-cookbook.md (Originalzeichnungen) als Ausgangsgeometrie.
2. Wenn das Projekt bereits eine Icon-Bibliothek verwendet, passe Raster, Strich, Enden und Radius an (siehe scripts/detect.mjs und Design-Regeln §10). Neue Icons müssen neben bestehenden sitzen, ohne fremd zu wirken.
3. Ein Set, ein Stil. Gleiches Raster, gleiche Strichstärke, gleiche Enden/Verbindungen, gleiche Radien-Skala, gleiches Padding und Detailniveau für jedes Icon. Konsistenz ist wichtiger als jedes einzelne clevere Icon.
4. Präsentationsattribute leben nur auf dem Wurzel-<svg>, Farbe ist currentColor, und Quellen enthalten keine IDs, Styles, Klassen, Transformationen oder <g>. Sonst brechen Theming, Dark Mode, die strokeWidth-Eigenschaft und Inlining.
5. Behaupte nie, ein Icon sei gut, ohne es zu rendern und das PNG zu betrachten. Geometrie, die im Code richtig aussieht, versagt regelmäßig bei 16 Pixeln: Kleckse, geschlossene Lücken, außermittige Formen, ungleiche Strichstärken.
6. Führe die Skripte aus; implementiere sie nicht neu. Lint, Optimierung, Vorschau und Codegenerierung sind deterministisch. Bearbeite niemals generierte Dateien von Hand; ändere icons/src/ und baue neu.
7. Modifiziere nicht die Abhängigkeiten des Benutzers. Die Vorschau-Tools installieren sich in ~/.cache/icon-forge (--install); SVGO läuft über npx, falls nicht vorhanden. Frage, bevor du ein Paket zum Projekt hinzufügst.
8. Standardmäßig barrierefrei. Icons sind aria-hidden, es sei denn, sie sind beschriftet; Nur-Icon-Steuerelemente erhalten aria-label; interaktive Ziele ≥44px; aussagekräftige Icons ≥3:1-Kontrast.

Workflow

1. Stack und vorhandenen Stil erkennen

node <skill>/scripts/detect.mjs .

Notiere das Framework, TypeScript, Tailwind, eine eventuell vorhandene Icon-Bibliothek (und deren Stilvorgabe), lokale SVG-Icons und das vorgeschlagene Ausgabeverzeichnis. Wenn ein bestehendes Set existiert, öffne 2–3 seiner SVGs und kopiere deren Wurzel-Zahlen. Andernfalls verwende den Standard: 24er Raster, Strichstärke 2, runde Enden/Verbindungen.

2. Liste planen: Bedeutung → Metapher → Dateiname

Erstelle vor dem Zeichnen eine kurze Tabelle: Bezeichnung | Metapher (was gezeichnet wird) | Dateiname | Cookbook-Startpunkt. Beispiel: Projekte | Kanban-Board | kanban.svg | kanban. Wähle gängige Metaphern (Design-Regeln §7) und eine Metapher pro Bedeutung. Benenne Dateien nach dem Objekt, in kebab-case. Frage den Benutzer nur, wenn eine Bezeichnung mehrdeutig ist und die Wahl die UI-Bedeutung ändert; ansonsten entscheide und nenne die Wahl.

3. Auf dem 24er Raster zeichnen

Erstelle icons/src/<name>.svg mit der kanonischen Wurzel (svg-code-rules.md). Für jedes Icon:

• Beginne mit der passenden Keyline: Kreis r10, Quadrat 18 (x/y 3), Hochformat 16×20, Querformat 20×16. Keylines sind Strichmittellinien.
• Halte die Außenkante des Strichs ≥1 Einheit vom Canvas-Rand entfernt. Verwende Radius 2 für große Ecken und 1–1,5 für kleine; halte Lücken ≥2 Einheiten Freiraum.
• Verbinde Teile entweder exakt oder halte einen deutlichen Abstand. Verwende ganzzahlige Koordinaten für 2-Px-Striche. Verwende so wenige Elemente wie möglich (≤6 ist typisch).
• Beginne mit dem nächstgelegenen Eintrag in references/glyph-cookbook.md und passe ihn dann an. Kopiere die Geometrie aus <skill>/assets/cookbook/<name>.svg, wenn ein Glyph unverändert passt.
• Berechne wiederholte Geometrie (Zähne, Strahlen, Sternspitzen) mit ein paar Zeilen JavaScript, anstatt zu raten. Zeichne zuerst das gesamte Set, dann verfeinere es. Konsistenz wird im Seitenvergleich beurteilt.

4. Linten

node <skill>/scripts/lint.mjs icons/src

Behebe jedes ✖. Behandle ⚠ gap, density, scale und bounds als Designprobleme, nicht als Rauschen. Notiere jedes ℹ gap und überprüfe es in Schritt 6; enge parallele Striche (Balken, Linien) verschmieren bei 16 Pixeln, es sei denn, sie sitzen 4 Einheiten auseinander. Wiederhole, bis PASS ohne nicht gerechtfertigte Warnungen erscheint. Flags: --grid, --padding, --mode fill, --strict, --json.

5. Optimieren

node <skill>/scripts/optimize.mjs icons/src icons/svg

Dies rundet Zahlen, führt SVGO aus (lokale Installation oder npx svgo@4; offline wird auf den integrierten Kanonisierer zurückgegriffen), ordnet Wurzelattribute neu und gibt Bytes pro Icon sowie die Gesamtgröße nach Gzip aus. Linte die Ausgabe ebenfalls: node <skill>/scripts/lint.mjs icons/svg.

6. Vorschau ansehen UND ANSCHAUEN, dann iterieren

node <skill>/scripts/preview.mjs icons/svg --out icons/preview.png \
  --sidebar "dashboard:Dashboard,kanban:Projekte" --active dashboard   # füge --install beim ersten Mal hinzu, wenn kein PNG-Engine vorhanden ist

Betrachte die PNGs mit deinem Bildbetrachter, in dieser Reihenfolge:

1. icons/[email protected]: das Set-Band und die Sidebar-Mocks. Es ist klein genug, um es im Detail zu sehen.
2. icons/[email protected]: jedes Icon in jeder Größe, plus die Inspektionsansicht. Es ist hoch, also beschneide es, wenn dein Betrachter runterskaliert.
3. icons/preview.png: echte 1× Pixel.

Zusammen zeigen sie:

• ein 24/16-Px-Band auf hellem und dunklem Hintergrund;
• einen Sidebar-Mock mit aktivem Element und eingeklappter Leiste;
• pro Icon Zeilen bei 16/20/24/48;
• eine 4×-Inspektionsansicht mit Raster, blauen Keylines und der roten 1-Px-Padding-Grenze.

Beantworte die Selbstüberprüfungsfragen in Design-Regeln §12. Typische Korrekturen:

Du siehst	Korrektur
Ein Icon wirkt heller/kleiner im Band	Auf seine Keyline vergrößern oder einen Rahmen/eine Achse hinzufügen (offene Glyphen wirken hell)
Eins wirkt schwerer/voller	Details entfernen; ≤3 Balken, ≤6 Zähne, ≤2 Textzeilen
Eine Verschmierung, wo Teile bei 16 Pixeln aufeinandertreffen	Exakt verbinden oder den Abstand auf ≥2 Einheiten öffnen
Form liegt in der Inspektionsansicht an einer Seite	Neu zentrieren oder 0,5–1 Einheit für das optische Gleichgewicht verschieben
Metapher in der eingeklappten Leiste unklar	Wähle eine wörtlichere Metapher (Schritt 2)

Wiederhole die Schritte 3–6, bis ein zweiter Blick nichts zu korrigieren findet. Meist 1–3 Durchläufe.

7. Framework-Ausgabe generieren

node <skill>/scripts/build.mjs icons/svg --out src/components/icons --framework react --lang ts \
  --labels "kanban:Projekte,dashboard:Dashboard"

--framework react|vue|svelte|html|all; --lang ts|js; --package @app/icons schreibt ein sideEffects:false-package.json. Die Ausgabe ist ein pro Icon baum-schüttelbares Modul, eine gemeinsame Basiskomponente (size, color, strokeWidth, absoluteStrokeWidth, title, className), index-benannte Exporte und icons.json. HTML liefert sprite.svg + usage.html. Details: references/output-formats.md.

Führe dann eine Typüberprüfung oder einen Build des Projekts durch, falls es ein Skript gibt (npx tsc --noEmit, npm run build) und behebe alle Fehler.

8. Mit barrierefreier Nutzung einbinden

Verwende das Muster aus references/accessibility-and-usage.md:

• <nav aria-label>; aria-current="page" plus Farbe und Hintergrund für das aktive Element;
• Icon size-5 shrink-0 und dekorativ;
• ein aria-label auf Nur-Icon-Buttons; Logout als <button>;
• ≥44px Zeilen; gedämpfte Farben, die trotzdem 3:1 erreichen.

Ausgabeformat

Schließe mit einem kurzen Bericht an den Benutzer:

1. Icons: Tabelle Bezeichnung → Komponente → Metapher und die Verzeichnispfade (icons/src, icons/svg, generiertes Verzeichnis).
2. Prüfungen: Lint-Ergebnis (Fehler/Warnungen), Optimierungsgesamtwerte (durchschn. B/Icon, gzip gesamt) und die Vorschaupfade, die du inspiziert hast, plus was du nach dem Anschauen geändert hast.
3. Nutzungsausschnitt für das verwendete Framework, mit A11y-Attributen.
4. Hinweise: Stilentscheidungen (Raster/Strich/Vorgabe abgeglichen), zu spiegelnde RTL-Icons und alles, was du nicht verifizieren konntest.

Beispiel

Benutzer: „Brauche Sidebar-Icons für Dashboard, Projekte, Team, Einstellungen in meiner Next.js + Tailwind App.“ → erkennen: React (Next) + TS + Tailwind, keine Icon-Bibliothek → planen: dashboard/kacheln, kanban, benutzer, einstellungen/zahnrad → aus dem Cookbook zeichnen und anpassen → lint PASS → optimieren: 4 Icons, durchschn. ~340 B, ~0,4 KB gzip → Vorschau: Projekte wirkte hell, also Balken hinzugefügt; erneut prüfen → build --framework react nach src/components/icons → <DashboardIcon className="size-5 shrink-0" /> in der Nav mit aria-current.

Referenzen

Öffne, wenn du …	Lies
Größen, Keylines, Radien, Lücken, Metaphern wählen oder ein Vorschauproblem beheben musst	references/design-rules.md
SVG-Markup schreiben oder debuggen oder einen Lint-Fehler verstehen musst	references/svg-code-rules.md
Von bewährter Geometrie für ein gängiges UI-Icon ausgehen möchtest (56 gezeichnete Glyphen)	references/glyph-cookbook.md + assets/cookbook/*.svg
React-/Vue-/Svelte-/Angular-/HTML-Ausgabe generieren oder manuell anpassen oder die Bundle-Größe reduzieren willst	references/output-formats.md
Den Nutzungsausschnitt schreiben willst: Nav-/Sidebar-Muster, aktiver Zustand, Bezeichnungen, Kontrast, RTL	references/accessibility-and-usage.md
Die Form der generierten Komponenten ändern willst (Props, Klassennamen, A11y-Standards)	templates/<framework>/, die build.mjs liest; dort bearbeiten, niemals in der Ausgabe
Änderungen an diesem Skill testen willst	evals/evals.json

Überprüfungs-Checkliste (alles muss erfüllt sein, bevor du die Fertigstellung meldest)

• Keine Icon-Bibliothek hinzugefügt; jedes Icon für diese Aufgabe gezeichnet oder aus dem Cookbook angepasst.
• Stil stimmt mit den vorhandenen Icons des Projekts überein (oder mit der Standardvorgabe) im gesamten Set.
• lint.mjs PASS für icons/src und icons/svg; verbleibende Warnungen im Bericht begründet.
• Du hast das Vorschaubild PNG nach deiner letzten Änderung betrachtet; 16-Px-Zeilen auf hell/dunkel sind sauber; kein Icon ist schwerer, heller oder größer als seine Geschwister.
• Komponenten wurden von build.mjs generiert; Projekt-Typüberprüfung/Build bestanden (wenn verfügbar).
• Nutzung: dekorative Icons versteckt, Nur-Icon-Steuerelemente beschriftet, aktiver Zustand nicht nur farblich, Ziele ≥44px, Kontrast ≥3:1.
• Bericht enthält Größen (durchschnittliche Bytes/Icon, gzip gesamt) und den Vorschaupfad.