gsp-icons（普惠制图标）

This is a standalone composable skill. It works two ways:

1. Standalone — user runs /gsp-icons directly for icon system design
2. As a building block — the creative-director invokes /gsp-icons --enrich to add icon system specifics to creative direction

Icons are the functional glue of any interface. A consistent icon system is the difference between a polished product and a patchwork of mismatched visuals.

Input: Brand context (style, personality) or user requirements, OR --enrich mode Output: iconography.md chunk with library, sizing, containers, and custom SVG specs Agent: None — inline skill with structured questioning

<execution_context> @${CLAUDE_SKILL_DIR}/chunk-format.md </execution_context>

Step 1: Enrich mode (--enrich)

Read existing {BRAND_PATH}/identity/imagery-style.md. Extract iconography direction.

Enrich with:

• Specific library recommendation with npm package + import path
• Stroke width standardization
• Complete size system table (use case → size → example)
• Container treatment specs with CSS/Tailwind code
• Color rules (monochrome, brand-tinted, multi-color)
• Custom SVG specs if brand needs unique icons

Update the Iconography section of imagery-style.md. Preserve creative direction.

Step 2: Interactive mode

One AskUserQuestion at a time:

1. Brand personality — use AskUserQuestion:

- Clean & minimal — "thin strokes, geometric, restrained" - Bold & chunky — "thick strokes, filled, high impact" - Playful & rounded — "soft corners, friendly, approachable" - Technical & precise — "grid-aligned, systematic, detailed"

1. Library preference — use AskUserQuestion:

- Lucide — "clean, consistent, 1000+ icons, MIT — lucide-react" - Phosphor — "6 weights (thin→fill), 1500+ icons — @phosphor-icons/react" - Heroicons — "Tailwind ecosystem, outline/solid — @heroicons/react" - Radix Icons — "15x15 grid, minimal — @radix-ui/react-icons" - Custom SVG — "brand needs unique iconography"

1. Container style — use AskUserQuestion:

- Bare — "icon only, no container" - Circle — "rounded-full background" - Rounded square — "rounded-lg background" - Brand-tinted — "background uses brand color at low opacity"

Step 3: Define icon system

• Library: package name, import path, version guidance
• Weight/stroke: global standardization (e.g., strokeWidth={1.5})
• Size system:

• Container treatment: CSS/Tailwind for each container style
• Color rules: when to use foreground, brand color, muted, multi-color
• Custom SVG specs: grid (24x24), stroke cap/join, corner radius, export format

Step 4: Write output + completion

Write iconography.md chunk or update iconography section of imagery-style.md. Target: 60-90 lines.