icon-design

What problem does it solve?

This Skill helps you choose the most semantically appropriate icons for your website or application, ensuring visual consistency and clear communication, and preventing the use of less professional emoji.

Core Features & Use Cases

• Concept-to-Icon Mapping: Quickly find the best icon for abstract concepts like "security," "speed," or "quality."
• Library Recommendations: Guides you to choose between Lucide, Heroicons, and Phosphor based on project needs.
• Template Examples: Provides ready-to-use React/HTML patterns for common UI elements like feature cards, buttons, and lists.
• Consistency Rules: Enforces best practices for sizing, styling, and tree-shaking to maintain a professional and performant UI.
• Use Case: When designing a new feature section, you can ask this skill to suggest icons for "user management," "data security," and "reporting," and it will provide the Lucide components and Tailwind CSS classes to implement them correctly.

Quick Start

Use the icon-design skill to select an icon for 'user profile' and provide the Lucide component code.