skills.rest
jubscodes
jubscodesCOMMUNITY
Explore all skills by this author →
GitHub

gsp-icons

Generate an iconography.md chunk with npm import paths, stroke widths, size tokens, and container CSS/Tailwind rules.

49|4|Updated Feb 20, 2026
Search Tags:#ui#npm#icons#svg#tailwind#design-system#iconography
One-click install
npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsp-icons
Source: https://github.com/jubscodes/get-shit-pretty/tree/main/gsp/skills/gsp-icons
Command: npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about gsp-icons

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

FAQPage Schema
How do I standardize UI icon stroke weights and sizes for a design system?▼

You can standardize UI icon systems by defining a global stroke width and a four-step size scale (16/20/24/32+). This approach generates an iconography.md chunk with size tokens and container CSS/Tailwind rules to ensure consistent iconography across interfaces.

How do I generate npm import paths for SVG icons in Tailwind?▼

Generating npm import paths for SVG icons involves reading a brand style file and outputting concrete package names. The resulting iconography specification injects exact import paths alongside container CSS/Tailwind snippets for direct integration.

Can I use this to create a custom SVG icon spec for my brand identity?▼

Yes, you can create a custom SVG icon spec for your brand identity. It captures your brand personality through an interactive questionnaire and outputs custom SVG export specifications, color rules, and container treatments.

What's the best way to unify inconsistent icon libraries across web and mobile?▼

Unifying inconsistent icon libraries requires systematizing decisions around library selection, stroke weights, and size tokens. This process yields a complete icon system specification that standardizes iconography across web and mobile interfaces.

Do I need an existing imagery-style.md file to define iconography rules?▼

No, you do not need an existing imagery-style.md file to define iconography rules. You can use a guided interactive questionnaire to capture brand context, or use enrich mode to read existing brand assets and generate the specification.

When should I not use a standardized icon library for my UI components?▼

You should reconsider a standardized icon library if your UI project lacks defined brand context or design tokens. Without foundational brand context or an existing imagery-style.md, generating consistent iconography specifications is not possible.

Related Skills

Explore More Design & Creative Skills→
civictechdccivictechdc
1

visual-design-foundations

Creates visual systems with typography, color, spacing, and iconography guidelines.

Official
Intermediate
flpbaladaflpbalada
280

css-container-queries

Implement container-based responsiveness with CSS container queries.

Community
Intermediate
icyzhicyzh
1

concept-diagrams

Generate self-contained SVG diagrams using a standardized flat design system.

Community
Intermediate
1k-off1k-off
1

umbraco-icons

Register custom SVG icons for the Umbraco backoffice via extension manifest.

Community
Intermediate