skills.rest
paul-macfarlane
paul-macfarlaneCOMMUNITY
Explore all skills by this author →
GitHub

generate-icons

Generate light/dark SVG icons for Competiscore app components into public folders.

Updated Jan 17, 2026
Search Tags:#design#branding#frontend#svg#icon#team#avatar
One-click install
npx skills add https://github.com/paul-macfarlane/competiscore-web --skill generate-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-icons
Source: https://github.com/paul-macfarlane/competiscore-web/tree/main/.claude/skills/generate-icons
Command: npx skills add https://github.com/paul-macfarlane/competiscore-web --skill generate-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill delivers ready-to-use, brand-consistent SVG icons for Competiscore components (avatars, teams, game types, and tournaments), saving design and frontend teams time and effort.

Core Features & Use Cases

  • Light/dark mode friendly icons that avoid pure black or white fills and use accessible color palettes.
  • Per-type output organization: public/avatars, public/team-avatars, public/game-type-icons, public/tournament-icons.
  • SVG quality controls: fixed viewBox 0 0 100 100, no width/height attributes, minimal inline styles, and optional strokes for definition.

Quick Start

Run the icon generator to produce all avatars, team avatars, game-type icons, and tournament icons in their respective public folders.

Frequently Asked Questions about generate-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate SVG icons for avatars and teams?▼

To generate SVG icons for avatars and teams, run the icon generator to produce all avatars, team avatars, game-type icons, and tournament icons directly in their respective public folders.

What are the SVG requirements for light and dark mode friendly icons?▼

Light and dark mode friendly icons require a fixed viewBox of 0 0 100 100, no width or height attributes, no pure black or white fills, and minimal inline styles to ensure accessible color palettes.

Does this icon generator require any specific dependencies or components?▼

No specific dependencies or components are required to use this icon generator, making it straightforward to run and produce brand-consistent SVG files for your frontend design.

How are generated SVG icons organized for frontend projects?▼

Generated SVG icons are organized into specific output folders: public/avatars, public/team-avatars, public/game-type-icons, and public/tournament-icons for direct frontend integration.

Can I use these SVG icons for tournament and game-type branding?▼

Yes, you can use these generated SVG icons for tournament and game-type branding, as the output includes dedicated game-type and tournament icons with accessible color palettes for brand consistency.

Why should I avoid pure black and white fills in SVG icons?▼

You should avoid pure black and white fills in SVG icons to ensure they remain accessible and visually friendly across both light and dark mode user interfaces.

Related Skills

Explore More Design & Creative Skills→
endlessblinkendlessblink

svg-icon-craft

Generate cyberpunk SVG icons for Vue components with standardized templates.

Community
Intermediate
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
trusted-americantrusted-american

fontawesome

Register FontAwesome 7 icons and render them with the A3 Icon component.

Official
Intermediate
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic