Menu
Guidelines and instructions for using direct imports for Heroicons in the frontend to maintain a small bundle size and ensure tree-shaking.
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
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.