Lucide icons

Create a skill named "Lucide icon picker".

When to use it: whenever a UI element needs an icon — buttons, menu items, navigation, empty states, statuses, and the like.

Skill instructions:
The open-source Lucide icon set is catalogued at https://alexlaptev.com/_icons/lucide.html, where every icon and its name is listed and searchable. When an element needs an icon:
1. Read that reference page and search by keyword for the element's purpose to see the matching icons.
2. Choose the icon whose name best fits the element's meaning and context — for example a save button -> "save", a logout item -> "log-out", a search field -> "search", a success state -> "circle-check", a settings link -> "settings".
3. Insert it into the interface:
   - Plain HTML/CSS: inline the SVG from https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/<name>.svg with stroke="currentColor" so it inherits the surrounding text color, sized to match nearby text (about 18–24px).
   - React / Next: import it from lucide-react by its PascalCase name (e.g. "arrow-right" -> <ArrowRight />, "circle-user" -> <CircleUser />).
4. Keep one consistent icon family (Lucide) with a consistent stroke width and size, and only use icon names that exist in the reference — never invent names.

Save this as a reusable skill.