Instruction file imported from alienfacepalm/tabocalypse (.cursor/rules/extension-lucide-icons.mdc). Copyright stays with the author.

Extension UI: Lucide icons

• lucide-react is the icon set for the extension new tab and related UI.
• When to use icons instead of short button text: header/toolbar actions (e.g. open settings), submit actions clearly tied to an adjacent field (search, add todo), per-row destructive or secondary actions (remove one item) where the row already carries the label context.
• When to keep text: dialogs, multi-step flows, destructive confirmations, legal/acknowledgment copy, and anywhere the action is ambiguous without words.
• Accessibility: icon-only controls must have a plain-language aria-label. For hover/focus hints, use HudTip (styled HUD font) instead of raw title — see hud-interaction-tooltips.mdc. Do not rely on the icon shape alone. Avoid exposing raw internal keys in those strings; see user-facing-copy.mdc.
• Styling: use the Tailwind-backed component classes .btn plus .icon-only / .sm as defined in apps/extension/entrypoints/newtab/tailwind.css so touch targets stay consistent; size icons around 18px in dense rows, 20px in primary actions unless the layout needs otherwise. Hover and active feedback are required for every button—see extension-button-interaction-states.mdc and tailwind-btn-states.test.ts.