القائمة
Use this skill when making use of any icons in any part of the frontend.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.