Oil Icon

生成风格统一的图标集合，通过宫格生图、切分和去背景交付透明 PNG。用户需要成套自定义图标、栏目图标或匹配品牌风格的图标时使用；不用于单个简单矢量图标或小尺寸密集功能符号。

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add oil-oil/oil-icon --skill oil-icon

Manual install

git clone --depth 1 https://github.com/oil-oil/oil-icon.git /tmp/oil-icon
mkdir -p ~/.claude/skills
cp -r /tmp/oil-icon/. ~/.claude/skills/oil-icon

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# oil-icon

Generate a **set** of icons that share one visual style, output as transparent PNGs.

Image generation runs on a flat grey backdrop as a 4×4 sheet — 16 icons in one generation, 有助于统一风格，但仍需逐个检查 — then each cell is sliced out and background-removed.

Agent owns the design decisions (which style, which palette, which metaphors, whether to match a brand); image generation and slicing are mechanical steps.

## API Key 配置入口

需要外部服务凭据时先读[API Key 配置与业务读取](references/api-key-setup.md)：复用已有安全入口；本机缺少 Key 时使用随附固定页面，保存后通过业务包装入口读取。内置能力与纯本地流程不要求配置 Key。

## Workflow

1. **Choose the style.** Either pick a built-in from `styles/` (table below), or **match the user's brand** by reading their project's design tokens / assets and deriving a custom style-spec — see `reference/style-adaptation.md`. Freeze the result as a style-spec with the same fields as the built-in JSONs; 后续批次复用同一规范，并检查生成偏差.
2. **List the icons.** Write each concept as `name — short concrete metaphor` (e.g. `settlement — a wallet with a coin`). One clear idea per icon; keep the detail level consistent across the set. 默认每张 **16** 格；明确选择 **9** 格时，提示词使用 3×3，切图命令必须同时传 `--grid 3`。 If the user asks for an exact count below 16, still use a **4x4 / 16-cell sheet**: place the requested icons first in row-major order, then explicitly ask the remaining cells to stay empty grey background.

Read the full skill on GitHub

Details

Skill name: oil-icon
Repository: oil-oil/oil-icon
License: MIT
Repo updated: 10 September 2026

FAQ

What does the Oil Icon skill do?

How do I install the Oil Icon skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add oil-oil/oil-icon --skill oil-icon. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Oil Icon popular?

It lives in oil-oil/oil-icon, which has 322 GitHub stars and 30 forks.

Related skills

Dashmotion

184

csthink/dashmotion

Create dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention "animated", "flowing", "dynamic", "alive", "GIF-like", or want a diagram for a landing page, README, docs, or product demo. Al

Frontend & DesignIn 2 lists16

Sanity Best Practices

194

sanity-io/agent-toolkit

Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, the App SDK, and Studios or apps running in the Sanity Dashboard (defineApplication). Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, event-driven content automation,

Frontend & DesignIn 1 list31

Anydesign

236

uxKero/anydesign

Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or reverse-engineer a visual design: its design system, palette, typography or style.

Frontend & DesignIn 1 list14

React Email

208

resend/resend-skills

Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.

Frontend & DesignIn 2 lists34

Naming

128

glacierphonk/naming

Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.

Frontend & DesignIn 3 lists14

D3 Viz

251

chrisvoncsefalvay/claude-d3js-skill

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

Frontend & DesignIn 3 lists25

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.