kubai087/kubai-icons

Kubai Icons

Dieses Skill enthält eine vollständige Implementierung: Engine, ein komplettes Set an Beispiellicons, eine Präsentationsseite, ein Selbsttest-Skript und ein Skript für statische Exporte. Deine Aufgabe ist es, neue Icons gemäß den Regeln zu schreiben, nicht die Engine neu zu schreiben.

Was enthalten ist

• PROMPT.md: Alle Designregeln, jede ist eine harte Anforderung. Lies sie vollständig, bevor du beginnst.
• src/engine.js: Die Engine. Farbableitung, Außenkontur-Maske, Farbverlauf für die Tiefe, Schatten- und Innenleuchten-Filter, Interpolationsanimationen, Farbpaletten sind hier enthalten. Verwende sie direkt, ändere sie nicht.
• src/icons.js: Beispiellicons. Neue Icons werden im gleichen Format hinzugefügt.
• src/app.js, index.html: Präsentationsseite. ORDER bestimmt, welche Icons angezeigt werden und in welcher Reihenfolge.
• scripts/check.mjs: Selbsttest-Skript. Es erzeugt im Headless-Chrome Standbilder, Hover-Zustände, Zwischenframes der Hover-Animation, 24px, 28px und alle Farbpaletten und liest Skriptfehler jeder Seite aus. Temporäre Dateien werden im Ausgabeverzeichnis abgelegt und nach Abschluss automatisch gelöscht.
• scripts/export.mjs: Statischer Export. Rendert Icons als unabhängige SVG-Dateien ohne Skript- und Stylesheet-Abhängigkeiten. Du kannst Farbpalette, Hauptfarbe und den Zustand (Ruhe oder Hover) angeben.

Arbeitsablauf

1. Lies PROMPT.md.

2. Bestimme die Lieferform. Wenn der Nutzer es nicht deutlich sagt, frage nach:

   • Dynamisch (Standard): SVG + JS, die sich beim Hover verformen und durch src/engine.js auf der Seite laufen. Geeignet für Webseiten und JS-fähige Oberflächen.
   • Statisch: Eigenständige .svg-Dateien ohne Animation, überall einsetzbar: Design-Tools, native Apps, Dokumente, <img>. Wenn der Nutzer Begriffe wie "Asset", "SVG-Datei", "in Figma einfügen" oder "in der App verwenden" erwähnt, ist es statisch.
   • Beides: Erstelle zuerst die dynamische Version und exportiere dann eine statische Kopie.

3. Bestimme den Arbeitsort:

   • Neues Set: Kopiere index.html, src/, scripts/ des Skills an den Zielort (ein neues Verzeichnis oder Repository) und arbeite in der Kopie. Behalte die Copyright-Hinweise am Anfang jeder Datei; PROMPT.md und SKILL.md bleiben nur im Skill, sie werden nicht kopiert (siehe LICENSE Abschnitt 3).
   • Erweiterung eines bestehenden Sets: Füge direkt in src/icons.js hinzu.
   • Hinzufügen zum Open-Source-Icon-Repository von kubai-icons: Jedes Icon als separate Datei in icons/, Format, Benennung und Badges siehe docs/authoring.md. Selbsttest mit node tools/check.mjs --only Name --with folder,mail,download. Die Regeln in PROMPT.md haben weiterhin Vorrang.
   • Nur statisch: Kopiere ebenfalls in ein Arbeitsverzeichnis zum Zeichnen und übergib dem Nutzer nur die exportierten SVGs.

4. Lies die Produktcode, um die Funktionen zu identifizieren. Für die dynamische Version schreibe für jede Funktion "Objekt + Hover-Aktion"; für die statische Version reicht es, das Objekt zu bestimmen (PROMPT.md Abschnitt 1).

5. Bevor du ein neues Icon erstellst, suche in src/icons.js ein oder zwei strukturell ähnliche Beispiele (z. B. für aufklappbare Dinge: Umschlag und Kalender; für herausschneidende Vorderteile: Download und Upload; für sich drehende: Zahnrad und Stern) und orientiere dich an deren Schreibweise.

6. Füge den Namen in ORDER in src/app.js hinzu. Nicht benötigte Beispiele werden nicht angezeigt, wenn sie nicht in ORDER stehen.

7. Führe den Selbsttest durch und vergleiche das neue Icon mit einigen vorhandenen:

   node scripts/check.mjs --only NeuesIconA,NeuesIconB --with Ordner,Email,Download
   

   Screenshots landen in check-out/. Überprüfe jeden Punkt aus der Checkliste in PROMPT.md Abschnitt 10. Wenn Skriptfehler auftreten, behebe sie zuerst. Für Hin- und Herbewegungen betrachte frames.png; für winzige Lücken verwende --scale 3; für Markierungen auf hellen Hauptfarben verwende --accent #F59E0B und setze alle Icons auf die gleiche Hauptfarbe. Ohne --only wird das gesamte Set überprüft. Für die statische Version reichen rest.png, size-24.png, size-28.png und palettes.png.

8. Wenn alles bestanden ist, aktualisiere die Icon-Anzahl in der README und die Spaltenanzahl pro Breakpoint auf der Präsentationsseite (die Spaltenanzahl muss die Gesamtzahl der Icons teilen; Breakpoints können hinzugefügt oder entfernt werden).

9. Für statische Exporte exportiere in das vom Benutzer angegebene Verzeichnis und teile dem Benutzer mit, welche Palette verwendet wurde:

   node scripts/export.mjs --only NeuesIconA,NeuesIconB --palette Bunt --out Zielverzeichnis
   

   --palette wählt die Palette nach Namen (Bunt, Blaugrau, Porzellan, Minze, Lavendel, Aprikose, Schwarz), --accent #hex setzt alle Icons auf eine Hauptfarbe, --state hover exportiert den Endzustand beim Hover, --size legt die Pixelgröße fest, --pad sorgt für Rand um den Schatten. Jedes Icon erhält eine Datei Name.svg.

Umgebung

• Node 18 oder höher sowie Chrome. Der Browser-Pfad kann mit der Umgebungsvariablen CHROME überschrieben werden.
• Alle Tests werden im Headless-Modus ausgeführt, es öffnet sich kein sichtbares Fenster und der Browser des Benutzers wird nicht beeinträchtigt.

---

Copyright (c) 2026 Kubai087. Lizenziert unter der Kubai Icons License; siehe LICENSE.