@nexus-cross/design-system 1.0.12 → 1.0.13

package/cursor-rules/CLAUDE.md

@@ -0,0 +1,80 @@
+# NEXUS Design System — Rules for AI Assistants
+
+## Tech Stack
+
+- **Design Tokens**: `@nexus-cross/tokens` (CSS variable based)
+- **UI Components**: `@nexus-cross/design-system` (React, CVA + Plain CSS)
+- **Styling**: Tailwind CSS v4 + NEXUS semantic tokens
+
+## Absolute Rules
+
+1. **색상은 반드시 NEXUS 토큰 사용.** hex, rgb, 기본 Tailwind 색상 (`bg-blue-500` 등) 금지.
+   - 배경: `bg-bg-*`, `bg-surface-*`
+   - 텍스트: `text-text-*`
+   - 아이콘: `text-icon-*`
+   - 테두리: `border-border-*`
+   - 액센트: `bg-accent-*`
+   - 상태: `bg-status-*`
+
+2. **UI 컴포넌트는 `@nexus-cross/design-system`에서 import.** 직접 구현 금지.
+   - `<button>` → `<Button>`, `<input>` → `<TextInput>`, `<select>` → `<Select>` 등
+   - Radix UI, Headless UI 등 직접 import 금지 (design-system이 내부적으로 사용)
+
+3. **Figma MCP 코드 그대로 사용 금지.** MCP 출력은 "디자인 의도 파악용"으로만 참고.
+   - Step 1: MCP로 구조 파악 → Step 2: NEXUS 컴포넌트 매핑 → Step 3: NEXUS 코드 작성
+
+4. **`className` 오버라이드 시 `!important` 금지.** `cn()` 유틸이 프리픽스 충돌 자동 해소.
+
+## Component Import
+
+```tsx
+import { Button, TextInput, TextArea, Select, Switch, Chip, Spinner, Divider } from '@nexus-cross/design-system';
+import { Tooltip, Popover, Drawer, Accordion } from '@nexus-cross/design-system';
+import { toast, Toaster } from '@nexus-cross/design-system';
+import { modal, useModal, ModalTemplate, ModalContainer } from '@nexus-cross/design-system/modal';
+import { NumberInput, numberInputBind } from '@nexus-cross/design-system';
+import { Avatar, Tab, ToggleGroup } from '@nexus-cross/design-system';
+import { cn } from '@nexus-cross/design-system';
+```
+
+## CSS Setup
+
+### Tailwind v4
+```css
+@import 'tailwindcss';
+@import '@nexus-cross/tokens/company.css';
+/* Next.js Turbopack only: */
+@import '@nexus-cross/design-system/styles.css';
+```
+
+### Next.js Turbopack
+```js
+// next.config.mjs
+const nextConfig = {
+  transpilePackages: ['@nexus-cross/design-system', '@nexus-cross/tokens'],
+}
+```
+
+## Token Path Convention
+
+모든 디자인 토큰은 5-segment 형식: `color.semantic.{namespace}.{slot}.{state}`
+
+```
+# CORRECT
+color.semantic.domain-market.bullish.base
+color.semantic.domain-market.bullish-bg.hover
+
+# WRONG (6+ segments)
+color.semantic.domain-market.trend.bullish.base
+```
+
+## Detailed References
+
+상세 API, 토큰 목록, 컴포넌트 매핑 가이드는 아래 파일 참조:
+
+- **토큰 전체 목록**: `.cursor/rules/nexus-tokens.mdc`
+- **도메인 토큰**: `.cursor/rules/nexus-domains.mdc`
+- **컴포넌트 매핑 가이드**: `.cursor/rules/nexus-ui-components.mdc`
+- **컴포넌트 API (props)**: `.cursor/rules/nexus-ui-api.mdc`
+- **프로젝트 셋업 상세**: `.cursor/rules/nexus-project-setup.mdc`
+- **토큰 5-segment 규칙**: `.cursor/rules/token-path-5segment.mdc`