npx claudepluginhub preludetech/django-craftThis skill is limited to using the following tools:
Use this skill when adding, modifying, or working with icons in templates.
Renders SVG icons in Symfony Twig templates from Iconify sets (Lucide, Heroicons, Tabler, etc.), local files, or custom aliases. Supports display, styling with CSS, production locking, and importing.
Creates icon system specs with grid, sizing, naming conventions, categories, SVG/Figma delivery, accessibility rules, and maintenance best practices.
Provides Iconsax icon library with Linear, Bold, Two-tone styles and AI generation for premium, consistent UI icons in navigation menus, toolbars, and action buttons.
Share bugs, ideas, or general feedback.
Use this skill when adding, modifying, or working with icons in templates.
All icons use the <c-icon /> Cotton component, backed by the Heroicons library. The component is defined in freedom_ls/base/templates/cotton/icon.html and internally uses the icon registry from freedom_ls/base/icons.py.
{# Use semantic names from the registry #}
<c-icon name="next" class="size-5 text-blue-500" />
<c-icon name="success" variant="solid" class="size-6" />
{# Escape hatch for one-off heroicon names #}
<c-icon name="arrow-right" force="true" class="size-5" />
{# When the icon name comes from a template variable, use :name #}
<c-icon :name="activity.icon" class="size-5" />
{# With aria label for standalone informative icons #}
<c-icon name="success" aria_label="Completed" />
<c-icon name="semantic_name" /> in templates{% icon %}, {% heroicon_* %}, or {% load icon_tags %} directly in templates. These are internal to the Cotton component.ICONS dict in freedom_ls/base/icons.py when new concepts need iconsfa-, fas, far)size-3 -- extra compact (inside badges, deadlines)size-4 -- compact (inside lists, small UI elements)size-5 -- standard (buttons, most UI) -- this is the defaultsize-6 -- emphasis (modal close buttons)size-8 -- large (loading spinners)size-12 -- extra large (lightbox close)size-16 -- hero (success/error result pages)Since <c-icon /> is server-side, for Alpine.js dynamic toggling use x-show on wrapper spans:
<span x-show="expanded" x-cloak><c-icon name="expand" class="size-4" /></span>
<span x-show="!expanded"><c-icon name="collapse" class="size-4" /></span>
For directional flips, use rotate-180 on a wrapper:
<span :class="sidebarOpen ? '' : 'rotate-180'">
<c-icon name="menu_close" class="size-5" />
</span>
aria-hidden="true" is added automaticallyaria_label parameter: <c-icon name="success" aria_label="Completed" />aria-label on the button element, keep icon decorativeThe icon registry is in freedom_ls/base/icons.py. See the ICONS dict for all available semantic names.