feat(skill/frontend-design): ban emojis, enforce icon system in frontend-design

[Juan-Severiano]

What

Adds an Icons, not Emojis guideline to the frontend-design skill.

Why

Emojis in UI components and code documentation create visual inconsistency and break the production-grade aesthetic the skill is designed to enforce. A proper icon system provides better scalability, theming control, and design cohesion across components.

How

• Added a new bullet point under Frontend Aesthetics Guidelines
• The rule instructs Claude to:
  • Never use emojis in UI or code comments/docs
  • Check the existing codebase for an already-imported icon library and reuse it
  • If none exists, introduce a tree-shakeable, aesthetically consistent one (Lucide, Heroicons, Font Awesome, Bootstrap Icons, Material Icons, Phosphor, etc.)
  • Treat icons as first-class design elements — properly sized, colored, and spaced

Scope

Applies to all frontend components and HTML-based content generated when this skill is active.

[Copilot]

Pull request overview

Adds a new “Icons, not Emojis” rule to the frontend-design skill to enforce consistent, production-grade UI aesthetics by preferring icon libraries over emojis.

Changes:

• Introduced an explicit guideline banning emojis in UI and code comments/docs when the skill is active
• Added guidance to reuse an existing icon library when present, or introduce a tree-shakeable icon library when not

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.