القائمة
Guidelines and instructions for using direct imports for Heroicons in the frontend to maintain a small bundle size and ensure tree-shaking.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Guidelines and instructions for validating code modifications by running lint, build, and test suites via Nx.
Guidelines and information on backend architecture (Node.js, Fastify, Prisma 7), database client configuration, and starting the development server.
Guidelines and instructions for administrative tasks, including approving beta users and disabling user synchronization.
Guideline and instructions for reducing and avoiding the use of 'any' in TypeScript codebase, and properly annotating acceptable usages with eslint-disable comments.
| name | optimize-heroicons |
| description | Guidelines and instructions for using direct imports for Heroicons in the frontend to maintain a small bundle size and ensure tree-shaking. |
To maintain a small bundle size and ensure effective tree-shaking, always use direct file path imports for Heroicons. Avoid top-level imports from the icon sets.
import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
import TrashIcon from '@heroicons/react/16/solid/TrashIcon';
import { PlusIcon } from '@heroicons/react/24/outline';
The apps/web-ui/next.config.js is configured with optimizePackageImports: ['@heroicons/react'] as a fallback, but direct imports remain the primary standard for the codebase to ensure consistency across both apps and packages.