Generate cohesive, project-specific SVG icon sets for websites and applications. Use this skill whenever the user needs custom icons, an icon set for a website or app, icons for a client project, or mentions needing SVG icons that look consistent together. Also trigger when the user describes a project and icons would naturally be part of the deliverable — e.g. "I'm building a site for a plumber" implies they'll need service icons. Trigger on: "icons for", "icon set", "custom icons", "SVG icons", "make me icons", "I need icons", "website icons", "project icons", or any request for consistent visual assets for a web project. This skill produces individual SVG files with a consistent style engine, not generic icon library lookups.
Generates custom, cohesive SVG icon sets with consistent styling for web and application projects.
npx claudepluginhub jezweb/claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/industry-icons.mdreferences/preview-template.mdreferences/style-presets.mdreferences/svg-examples.mdGenerate custom, visually consistent SVG icon sets tailored to specific projects. Each set is built from a shared style specification so every icon looks like it belongs with the others — same stroke weight, same corner treatment, same visual density.
Generic icon libraries (Lucide, Heroicons) are great but every site using them looks similar. A custom icon set gives a project distinct visual identity. The hard part is consistency — drawing 20+ icons individually causes style drift. This skill solves that by defining style rules once and enforcing them across every icon.
Ask about the project. You need enough to suggest icons and pick a style:
A brief like "plumber in Newcastle, modern feel" is enough to proceed. Don't over-interview.
Read references/industry-icons.md for industry-specific suggestions. Organise into groups:
Present the list. Let the user add, remove, or rename before generating.
Read references/style-presets.md for full preset definitions. Pick one as starting point:
| Preset | Best For | Stroke | Caps/Joins | Corners |
|---|---|---|---|---|
| Clean | Most business sites | 1.5px | round/round | 2px |
| Sharp | Corporate/technical | 1.5px | square/miter | 0px |
| Soft | Friendly/approachable | 2px | round/round | 4px |
| Minimal | Elegant/editorial | 1px | round/round | 0px |
| Bold | High impact/accessible | 2.5px | round/round | 2px |
Tell the user which preset you're recommending and why, then confirm.
Generate every icon following the SVG Rules below. Output to an icons/ directory in the project root (or the user's preferred location).
Read references/svg-examples.md before generating — it contains reference implementations showing the right level of complexity and how to handle common icon shapes.
Generate in batches of ~5. After each batch, visually review for consistency before continuing. After all icons are done, create the preview page and style-spec.json.
Output structure:
icons/
├── style-spec.json
├── preview.html
├── home.svg
├── phone.svg
└── ...
Present preview.html first so the user sees the complete set visually.
Every icon in a set MUST follow all of these. Even small inconsistencies — a slightly different stroke width, a rounded corner where others are sharp — make the set look amateur.
Every icon uses this exact outer structure:
<svg xmlns="http://www.w3.org/2000/svg"
width="{grid}" height="{grid}"
viewBox="0 0 {grid} {grid}"
fill="none"
stroke="currentColor"
stroke-width="{strokeWidth}"
stroke-linecap="{strokeLinecap}"
stroke-linejoin="{strokeLinejoin}">
<!-- icon paths here -->
</svg>
currentColor only — Never hardcode colours. SVGs inherit colour from CSS. No fill="#000" or stroke="blue". If a shape needs fill, use fill="currentColor".
Identical viewBox — Every icon uses the same viewBox. No exceptions.
Identical root stroke attributes — stroke-width, stroke-linecap, stroke-linejoin on the <svg> element must match across all icons. Override on individual elements only when truly necessary.
No transforms on root — No translate, rotate, scale. Bake positioning into coordinates.
No IDs or classes — Keep SVGs clean for external styling.
Coordinate precision — Max 2 decimal places. Snap to half-pixel grid (e.g. 12, 12.5, not 12.333).
Consistent padding — Maintain configured padding from viewBox edge. For 24px grid with 2px padding, draw within 2–22 coordinate range.
Minimal elements — Fewest <path>, <circle>, <rect>, <line> elements practical. Simpler = smaller + faster rendering.
Visual centring — Appear visually centred, not just mathematically centred. A leftward arrow shifts slightly right. A house with a chimney adjusts for asymmetry.
Subtle but essential for professional results:
{
"name": "project-name-icons",
"preset": "clean",
"grid": 24,
"strokeWidth": 1.5,
"strokeLinecap": "round",
"strokeLinejoin": "round",
"cornerRadius": 2,
"padding": 2,
"opticalBalance": true,
"iconCount": 20,
"icons": ["home", "phone", "email"],
"generated": "2026-02-15"
}
Generate a self-contained HTML file displaying all icons for visual review. Read references/preview-template.md for the template. Requirements:
Verify every item before delivering:
viewBox, stroke-width, stroke-linecap, stroke-linejoincurrentColor exclusivelyarrow-right.svg)Read these before generating:
references/style-presets.md — Detailed preset definitions and selection guidancereferences/industry-icons.md — Industry-specific icon suggestionsreferences/preview-template.md — HTML template for the preview pagereferences/svg-examples.md — Example SVGs showing proper construction at various complexity levelsExpert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.