ClaudeMap

Kubai Icons

A Claude skill that draws icons that look like one designer made them: 66 worked examples set the tone, with hover motion or static SVG export — rules, engine and a headless self-check all ship in the repo (source-available, not open source)

Skills & Commandsiconssvgdesignclaude code skillui
Visit projectkubai087/kubai-icons

kubai-icons is a Claude Code skill that turns a consistent icon set from per-icon hand-tuning into a pipeline: the repo ships PROMPT.md hard rules (canvas and keylines, layers, corners and outside outlines, light, colour, marks and motion), a src/engine.js colour and gradient engine, 66 structured example icons, and a scripts/check.mjs headless self-check — a new icon starts from the structurally closest example, reuses the engine, and keeps iterating against screenshots until the checklist passes. Output comes in two shapes: dynamic by default (SVG + JS that moves the way the object itself would on hover — a folder opens, an envelope unseals, a calendar turns a page), or self-contained static SVGs for design tools, Figma and image tags. The author developed and blind-tested it on Claude Opus 5.5, and the README recommends starting with claude --model claude-opus-5-5 for the most consistent results; the self-check needs Node 18+ and Chrome running headless. Install is a clone into ~/.claude/skills/ plus a Claude Code restart, or unzipping kubai-icons-v1.0.1.zip from releases. The 66 ready-made icons are free to use, and the live gallery sits on kubai.design. 257 stars as of writing (2026-11-08).

What it does

  • One consistent style from a rules file (PROMPT.md), a colour and gradient engine, and 66 worked examples to start from
  • Dynamic by default: SVG + JS that animates on hover, each part limited to two keyframes (rest and hover) doing what the object itself does
  • Static export via node scripts/export.mjs with palette, accent colour, size, padding and hover-state flags
  • Headless self-check (scripts/check.mjs, Node 18+ and Chrome) compares the new icon beside existing ones and iterates until every checklist item passes
  • Developed and blind-tested with Claude Opus 5.5, which the README recommends via claude --model claude-opus-5-5

When to use it

For giving a product or site a full set of interface icons in one style: drawing new icons for a feature list, extending an existing set, or taking the 66 ready-made ones — with hover motion or as plain static SVG.

Getting started

# clone into your skills directory, then restart Claude Code
git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

# or from releases (latest v1.0.1): unzip kubai-icons-v1.0.1.zip -d ~/.claude/skills/
# marketplace variant: kubai-icons-v*-platform.zip carries version and display names in SKILL.md frontmatter

# recommended model per the README:
claude --model claude-opus-5-5

# export existing icons as static SVG:
node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/

Things to know

Source-available, not open source: the custom Kubai Icons License lets you keep every icon you draw (commercial use fine, no credit required) and ship the engine inside your own icon project with copyright notices intact, but you cannot sell the skill, distribute modified or translated PROMPT.md/SKILL.md, or republish the 66 examples as a standalone icon pack. The skill was tuned on Claude Opus 5.5 — weaker models may need more correction rounds. The self-check needs Chrome installed (headless), and the README's animation tooling additionally needs ffmpeg and img2webp. The Kubai and Lumno names and logos are not licensed for reuse. 257 stars as of writing (2026-11-08).

Repository

kubai087/kubai-icons

Charted

Related on the map

  • SureForge

    Skill

    An instruction-only skill that makes agents research before they ask, plan before they build, and verify before they call anything done.

    • workflow
    • verification
    • quality
    • skill
    View

  • guizang-product-video-skill

    Skill

    Guizang's agent skill turns your repo's recent updates into a finished promo video — real components, code-rendered animation, an original code-written soundtrack — no video editor involved.

    • agent-skill
    • video
    • promo
    • marketing
    View

  • geo-sleuth

    Skill

    An agent skill that geolocates a photo with nothing readable in it — OSM geometry, elevation skylines and satellite tiles turn “where was this taken?” into a measured answer with an error radius.

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
    View