Menu
Use this skill when making use of any icons in any part of the frontend.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Configure Django admin with Unfold and SiteAwareModelAdmin. Use when creating/modifying admin classes, working with inlines, or when the user mentions admin interface.
How to use Alpine.js for client-side interactivity. Use when adding interactive behaviour to templates such as toggles, dropdowns, modals, expand/collapse, dismissible elements, or any client-side state.
Create or modify branded HTML+text multipart emails for django-allauth flows. Use when working with email templates, email styling, or notification emails.
Create test data with factory_boy and SiteAwareFactory. Use when creating factories, writing test data setup, or when the user mentions factory_boy or test data.
Frontend styling with Tailwind including applying classes to templates and components, creating UI elements, reviewing markup, modifying component classes, and building Tailwind.
Reference this skill whenever you need to understand the worktree setup for this project.
| name | using-icons |
| description | Use this skill when making use of any icons in any part of the frontend. |
| allowed-tools | Read, Grep, Glob |
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.