メニュー
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.