菜单
Use whenever adding, replacing, or referencing icons in this project. Central Icon System is the icon library of choice — Lucide is NOT installed. Central icon names differ significantly from Lucide/other libraries, so always verify names against the package exports before importing.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build multi-part UI component systems as namespaced, shadcn/Radix-style compound component families — a set of parts the consumer assembles — instead of one component with a big prop-driven API. Use when creating OR refactoring any component that has distinct layers, slots, or swappable pieces (a modal with slides, a device frame around a screen, a header/content/footer, a trigger + panel), when you catch yourself adding a 4th+ config prop or threading data/render objects through props, or when reviewing a component API for composability. Canonical in-repo pattern: app/ui/sidebar.tsx. Not needed for genuinely atomic components (Badge, Avatar).
Author or maintain a crescent UI registry component so it is indistinguishable from one shadcn shipped — dual Base UI + Radix variants, token-faithful styling, icon-library agnostic, correct layout/spacing/shadow/focus standards, and the registry.json wiring. Use whenever adding a new component to registry/, refactoring an existing one, or reviewing a component for shadcn-fidelity. Canonical reference: registry/base/ui/choicebox.tsx + registry/radix/ui/choicebox.tsx.
Animate UI with Motion (the library formerly named Framer Motion, npm package `motion`) in this project's React Router v7 showcase app. Use when adding or editing any animation, transition, scroll effect, gesture (hover/tap/in-view), layout/shared-element animation, or enter/exit transition; when importing `motion`, `AnimatePresence`, `useScroll`, `useTransform`, `useReducedMotion`, etc.; or when reviewing animation code for correctness, performance, or reduced-motion support. Covers our import convention, SSR setup, the core API, performance rules, and accessibility. This is a thin in-house summary of the public Motion docs (motion.dev) — verify against the live docs for anything beyond the basics.
Open a high-quality pull request for the crescent-ui repo. Use this skill whenever the user wants to open/create/raise a PR, "put this up for review", push a branch for review, or finalize a change for merge — even if they don't say the words "pull request". It covers branch naming (feat/fix/chore), the pre-PR checks, and the PR body template. Reach for it any time work is ready to become a PR.
Add or modify routes in this project's React Router v7 showcase app. Use when creating or editing a page, layout, or resource/api route under app/showcase/, or touching app/routes.ts. Covers the config-based route table (NOT flat-routes), the modular route-module pattern (route.ts barrel + route.component/route.loader), and common gotchas. This is the project-specific contribution layer on top of the generic react-router-framework-mode skill.
| name | central-icons |
| description | Use whenever adding, replacing, or referencing icons in this project. Central Icon System is the icon library of choice — Lucide is NOT installed. Central icon names differ significantly from Lucide/other libraries, so always verify names against the package exports before importing. |
This project uses Central Icon System (https://centralicons.com) as its only icon library. lucide-react is not installed — any component that imports it will fail to compile.
Two aliased packages are installed (see package.json):
"@central-icons/filled": "npm:@central-icons-react/round-filled-radius-2-stroke-2",
"@central-icons/outlined": "npm:@central-icons-react/round-outlined-radius-2-stroke-2"
@central-icons/outlined — the default for general UI (buttons, menus, empty states).@central-icons/filled — for emphasis, active/selected states, and solid badges.import { IconTrashCan, IconSettingsGear1 } from "@central-icons/outlined";
import { IconHeart } from "@central-icons/filled";
Every icon is a React component rendering an <svg>. Props: size?: string | number, ariaHidden?: boolean, ariaLabel?: string, plus all standard SVGProps<SVGSVGElement> (className, data-*, etc.). They are drop-in compatible with shadcn/ReUI [&_svg] sizing selectors and data-icon="inline-start" | "inline-end" slot attributes.
Icon + PascalCase: IconTrashCan, IconArrowLeft, IconMagnifyingGlass (~2000 icons per style).IconX, IconSettings, or IconTrash2.IconPlusSmall / IconPlusMedium / IconPlusLarge, IconCrossSmall / IconCrossMedium / IconCrossLarge, IconChevronDownSmall / IconChevronDownMedium. Default to Medium inside buttons and inputs.IconSettingsGear1–IconSettingsGear4, IconCalendar1–IconCalendar4, IconPencil/IconPencil2/IconPencil3. Pick one variant per concept and use it consistently app-wide.Top/Bottom in some families (IconChevronTop, IconChevronBottom) and Up/Down in others (IconArrowUp, IconArrowDown). Do not assume — check.Lucide instincts will produce wrong names. Before importing, confirm the export exists:
ls node_modules/@central-icons/outlined | grep -i <keyword>
If the obvious keyword misses, try synonyms (e.g. close → cross, search → magnifying-glass, settings → gear, x → cross, more → dots).
| Lucide | Central |
|---|---|
Plus | IconPlusMedium |
X (close) | IconCrossMedium |
Check | IconCheckmark1Medium |
Settings | IconSettingsGear1 |
SlidersHorizontal | IconSettingsSliderHor |
Trash / Trash2 | IconTrashCan |
Search | IconMagnifyingGlass |
Pencil / Edit | IconPencil (small edits: IconEditSmall1) |
Eye / EyeOff | IconEyeOpen / IconEyeClosed (or IconEyeSlash) |
ChevronDown | IconChevronDownMedium |
ChevronUp | IconChevronTopMedium |
ChevronLeft / ChevronRight | IconChevronLeftMedium / IconChevronRightMedium |
ArrowLeft / ArrowRight / ArrowUp / ArrowDown | IconArrowLeft / IconArrowRight / IconArrowUp / IconArrowDown |
Calendar | IconCalendar1 |
Clock | IconClock |
User | IconUser |
Users | IconUserGroup (or IconPeople) |
Home | IconHome |
Bell | IconBell |
Mail | IconEmail1 |
Send | IconSend |
Globe | IconGlobe |
Lock | IconLock |
Star | IconStar |
Heart | IconHeart |
Info | IconInfoSimple |
AlertTriangle | IconExclamationTriangle |
AlertCircle | IconExclamationCircle |
HelpCircle | IconCircleQuestionmark |
Loader | IconLoadingCircle |
components.json still declares "iconLibrary": "lucide" (shadcn has no Central option), so components installed via shadcn add arrive importing lucide-react. Immediately after installing any registry component, replace its Lucide imports with Central equivalents. Typecheck (bun run typecheck) will fail loudly until you do, since lucide-react is not installed.