Why should I use this skill instead of just using emojis?

Proper icon components are more professional, fully customizable via CSS, and can be tree-shaken, whereas emojis render inconsistently across different operating systems.

How does this skill improve web performance?

It enforces explicit mapping patterns for icon components to prevent bundling entire libraries, ensuring that tree-shaking works correctly in production builds.

Can I use this with Tailwind CSS projects?

Yes, it includes standardized Tailwind classes for sizing (w-4 to w-16) and uses semantic color patterns like text-primary to ensure visual consistency.

Does it help with icon selection for abstract concepts?

Yes, it includes a semantic mapping guide and a decision tree to help you choose the most appropriate icon for concepts like security, speed, or expertise.

What icon libraries does this skill support?

The skill primarily supports Lucide, Heroicons, and Phosphor, providing specific mappings and React templates for each.

Icon Design System

Name: Icon Design System
Author: jezweb

byjezweb

•

169

•

디자인 도구

Streamlines the selection and implementation of semantically appropriate icons using Lucide, Heroicons, and Phosphor for modern web projects.

The Icon Design skill transforms Claude into a design-aware assistant that ensures your application's iconography is consistent, professional, and performant. It provides a robust framework for mapping abstract concepts to specific icons, enforces Tailwind CSS styling best practices for sizing and coloring, and implements critical React patterns to ensure effective tree-shaking. By guiding the selection process between popular libraries like Lucide, Heroicons, and Phosphor, this skill eliminates visual inconsistencies and technical debt associated with improper icon usage.

주요 기능

01Performance-optimized React implementation patterns for tree-shaking

02Semantic concept-to-icon mapping for major icon libraries

03Library comparison guides for Lucide, Heroicons, and Phosphor

04Tailwind CSS styling rules for consistent sizing and semantic coloring

05169 GitHub stars

06Style consistency enforcement for unified UI design

사용 사례

01Establishing a standardized icon design system for large-scale Tailwind projects

02Refactoring legacy icon implementations to modern, tree-shakeable React components

03Building professional feature grids and service sections with consistent iconography

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills icon-design

For use in Claude.ai and ChatGPT

Download Skill