gsp-icons

What problem does it solve?

Iconography across products often becomes inconsistent, mismatched, or unscalable, causing UI friction and undermining brand polish. This skill systematizes icon decisions — library selection, stroke/weight standardization, size tokens, container treatments, and custom SVG specs — so icons feel intentional and unified across interfaces.

Core Features & Use Cases

• Guided interactive design: an inline questionnaire that captures brand personality and yields a complete icon system specification.
• Enrich existing brand assets: reads an imagery-style.md and injects concrete iconography guidance, including exact npm package names and import paths.
• Deliverables & examples: produces an iconography.md chunk with library recommendation, global stroke width, a four-step size scale (inline, default, feature, hero), container CSS/Tailwind snippets, color rules, and custom SVG export specs.
• Use Case: standardize icons across a design system when onboarding new components or migrating an app to a design token workflow.

Quick Start

Design an icon system for my brand with a library recommendation, a single standardized stroke width, a size system (16/20/24/32+), and container CSS/Tailwind examples.