kubai087/kubai-icons

Kubai Icons

This skill includes a complete implementation: engine, full set of example icons, preview page, self-check script, and static export script. Your job is to write new icons following the rules, not rewrite the engine.

What's in the package

• PROMPT.md: All design rules; each is a hard requirement. Read it fully before starting.
• src/engine.js: The engine. Color derivation, outer stroke mask, gradient thickness, drop shadow and inner glow filters, interpolation animations, and palettes are all here. Reuse directly, do not modify.
• src/icons.js: Example icons. Append new icons in the same format.
• src/app.js, index.html: Preview page. ORDER determines which icons are shown and in what order.
• scripts/check.mjs: Self-check script. In a headless Chrome, it captures screenshots of rest state, hover state, intermediate frames, 24px, 28px, and all palettes, and reads script errors from each page. Temporary files are placed in the output directory and cleaned up automatically.
• scripts/export.mjs: Static export. Renders icons as standalone SVG files independent of scripts and stylesheets. You can specify palette, accent color, and rest or hover state.

Workflow

1. Read PROMPT.md.

2. Determine the delivery format. If the user hasn't specified, ask:

   • Dynamic (default): SVG + JS, morphs on hover, runs via src/engine.js in the page. Suitable for web and JS-capable interfaces.
   • Static: Standalone .svg files, no animation, usable anywhere: design tools, native apps, documentation, <img>. If the user says "export image", "SVG file", "put in Figma", "use in app", etc., this is the format.
   • Both: Start with dynamic, then export a static version.

3. Determine where to work:

   • New set: Copy index.html, src/, scripts/ from this skill to the target location (a new directory or repository). Work in that copy. Keep copyright notices at the top of each file; leave PROMPT.md and SKILL.md in the skill only, do not copy them (see LICENSE section 3).
   • Add to an existing set: Append directly to that copy's src/icons.js.
   • Add to the Kubai Icons open-source library: Each icon goes in a separate file under icons/. Format, naming, and badges are in docs/authoring.md. Self-check with node tools/check.mjs --only name --with folder,mail,download. Rules still follow PROMPT.md.
   • Static only: Same—copy to a working directory to draw, then hand over only the exported SVGs to the user.

4. Read the product code and list the features. For dynamic icons, write each feature as "object + hover action"; for static icons, just determine the object (PROMPT.md section 1).

5. Before writing each icon, find one or two structurally similar examples in src/icons.js (e.g., for opening things check envelope and calendar; for cut-out front pieces check download and upload; for rotating items check gear and star) and follow their pattern.

6. Add the name to the ORDER array in src/app.js. Unused example icons won't appear if not in ORDER.

7. Run the self-check, comparing the new icon against several existing ones:

   node scripts/check.mjs --only newIconA,newIconB --with folder,mail,download
   

   Screenshots go to check-out/. Check each item against the checklist in PROMPT.md section 10; fix script errors first. For reciprocating actions, look at frames.png; for checking hairline gaps, add --scale 3; for checking marks on light accent colors, add --accent #F59E0B to override all icons to the same accent. Without --only, it checks the full set. For static icons, rest.png, size-24.png, size-28.png, and palettes.png are sufficient.

8. Once all checks pass, update the icon count mentioned in the README and the number of columns per breakpoint on the preview page (columns must divide the total icon count; breakpoints can be added or removed).

9. For static export, export to the user's specified directory and tell them which palette was used:

   node scripts/export.mjs --only newIconA,newIconB --palette color --out targetDir
   

   --palette selects a palette by name (color, blue-gray, celadon, mint, lavender, apricot, black); --accent #hex overrides all icons to a single accent color; --state hover exports the hover end state; --size sets pixel dimensions; --pad adds margin for drop shadows. Each icon becomes a name.svg file.

Environment

• Node 18+ and Chrome. The browser path can be overridden via the environment variable CHROME.
• All checks run headless—no visible windows will open, and the user's browser will not be affected.

---

Copyright (c) 2026 Kubai087. Licensed under the Kubai Icons License; see LICENSE.