crescent-ui

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.

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.