@turk.net/mui 3.0.7 → 3.0.8

package/DESIGN_TOKENS_MAP.md

@@ -0,0 +1,271 @@
+# OneHub Design Tokens Map
+
+> **Purpose:** Complete mapping of Figma design tokens to MUI theme paths and CSS custom properties.
+>
+> **Critical Rule:** ALL colors MUST be referenced via CSS custom properties (preferred) or `theme.vars.palette.*` paths. NEVER use raw hex values or RGB values directly in component code.
+
+---
+
+## Color System Architecture
+
+OneHub uses a **3-tier color architecture**:
+
+```
+Layer 1: Raw color tokens    (colors.ts)      → gray-2, primary-10, red-origin, ...
+Layer 2: Semantic palettes   (palettes.ts)     → neutral.background[1], brand.foreground[2], ...
+Layer 3: CSS custom props    (colorSchemes.ts) → --neutral-background-1-rest, --brand-foreground-2-rest, ...
+```
+
+### State Suffixes
+Every color token has **4 interaction states**:
+
+| State | Suffix | Usage |
+|-------|--------|-------|
+| **rest** | `-rest` | Default/normal state |
+| **hover** | `-hover` | Mouse hover |
+| **pressed** | `-pressed` | Active/clicked |
+| **selected** | `-selected` | Currently selected |
+
+---
+
+## Palette Categories
+
+### 1. Neutral Palette (`neutral`)
+
+Default UI elements: backgrounds, text, borders.
+
+#### Background (`neutral.background`)
+
+| Figma CSS Var | MUI Theme Path | Typical Color (Light) | Usage |
+|---------------|---------------|----------------------|-------|
+| `--neutral-background-1-rest` | `theme.vars.palette.neutral.background[1].rest` | `#ffffff` (white) | Primary surface: page bg, card bg, table row |
+| `--neutral-background-2-rest` | `theme.vars.palette.neutral.background[2].rest` | `#fafafa` | Secondary surface: table header, sidebar bg |
+| `--neutral-background-3-rest` | `theme.vars.palette.neutral.background[3].rest` | — | Tertiary surface |
+| `--neutral-background-4-rest` | `theme.vars.palette.neutral.background[4].rest` | — | Quaternary surface |
+| `--neutral-background-5-rest` | `theme.vars.palette.neutral.background[5].rest` | — | 5th level surface |
+| `--neutral-background-6-rest` | `theme.vars.palette.neutral.background[6].rest` | — | 6th level surface |
+| `--neutral-background-disabled-rest` | `theme.vars.palette.neutral.background.disabled.rest` | — | Disabled element bg |
+| `--neutral-background-inverted-rest` | `theme.vars.palette.neutral.background.inverted.rest` | `#000000` | Inverted background (dark bg on light) |
+| `--neutral-background-overlay-rest` | `theme.vars.palette.neutral.background.overlay.rest` | `rgba(0,0,0,0.40)` | Modal/dialog overlay |
+| `--neutral-background-static-rest` | `theme.vars.palette.neutral.background.static.rest` | — | Static background (doesn't invert) |
+| `--neutral-background-stencil-rest` | `theme.vars.palette.neutral.background.stencil.rest` | — | Skeleton/placeholder bg |
+| `--neutral-background-subtle-rest` | `theme.vars.palette.neutral.background.subtle.rest` | `rgba(255,255,255,0)` | Transparent bg (icon buttons) |
+
+#### Foreground / Text (`neutral.foreground`)
+
+| Figma CSS Var | MUI Theme Path | Typical Color (Light) | Usage |
+|---------------|---------------|----------------------|-------|
+| `--neutral-foreground-1-rest` | `theme.vars.palette.neutral.foreground[1].rest` | `#242424` | Primary text |
+| `--neutral-foreground-2-rest` | `theme.vars.palette.neutral.foreground[2].rest` | `#424242` | Secondary text, form labels |
+| `--neutral-foreground-3-rest` | `theme.vars.palette.neutral.foreground[3].rest` | — | Tertiary text |
+| `--neutral-foreground-4-rest` | `theme.vars.palette.neutral.foreground[4].rest` | `#707070` | Placeholder, disabled text |
+| `--neutral-foreground-disabled-rest` | `theme.vars.palette.neutral.foreground.disabled.rest` | — | Fully disabled text |
+| `--neutral-foreground-on-brand-rest` | `theme.vars.palette.neutral.foreground.on.brand.rest` | `#ffffff` | Text on brand-colored bg |
+
+#### Stroke / Border (`neutral.stroke`)
+
+| Figma CSS Var | MUI Theme Path | Typical Color (Light) | Usage |
+|---------------|---------------|----------------------|-------|
+| `--neutral-stroke-1-rest` | `theme.vars.palette.neutral.stroke[1].rest` | `#d1d1d1` | Primary border (inputs, outlined buttons) |
+| `--neutral-stroke-2-rest` | `theme.vars.palette.neutral.stroke[2].rest` | — | Secondary border |
+| `--neutral-stroke-3-rest` | `theme.vars.palette.neutral.stroke[3].rest` | `#f0f0f0` | Subtle divider (table borders) |
+| `--neutral-stroke-accessible-rest` | `theme.vars.palette.neutral.stroke.accessible.rest` | `#616161` | Accessible border (checkboxes, focus rings) |
+| `--neutral-stroke-disabled-rest` | `theme.vars.palette.neutral.stroke.disabled.rest` | — | Disabled element border |
+| `--neutral-stroke-focus-rest` | `theme.vars.palette.neutral.stroke.focus.rest` | — | Focus ring color |
+| `--neutral-stroke-subtle-rest` | `theme.vars.palette.neutral.stroke.subtle.rest` | — | Very subtle border |
+
+---
+
+### 2. Brand Palette (`brand`)
+
+Primary brand color (blue). Used for primary actions, selected states, brand elements.
+
+| Figma CSS Var | MUI Theme Path | Typical Color (Light) | Usage |
+|---------------|---------------|----------------------|-------|
+| `--brand-background-1-rest` | `theme.vars.palette.brand.background[1].rest` | `#2970ff` | Primary button bg, selected state |
+| `--brand-background-2-rest` | `theme.vars.palette.brand.background[2].rest` | `#e7efff` | Chip/Badge bg, filter tag bg |
+| `--brand-background-compound-rest` | `theme.vars.palette.brand.background.compound.rest` | `#2970ff` | Compound bg (checkbox fill, radio fill) |
+| `--brand-foreground-1-rest` | `theme.vars.palette.brand.foreground[1].rest` | — | Brand-colored text |
+| `--brand-foreground-2-rest` | `theme.vars.palette.brand.foreground[2].rest` | `#2362df` | Chip/Badge text on brand bg |
+| `--brand-foreground-compound-rest` | `theme.vars.palette.brand.foreground.compound.rest` | — | Compound foreground |
+| `--brand-stroke-1-rest` | `theme.vars.palette.brand.stroke[1].rest` | — | Brand border |
+| `--brand-stroke-2-rest` | `theme.vars.palette.brand.stroke[2].rest` | `#b7cfff` | Chip/Badge border |
+| `--brand-stroke-compound-rest` | `theme.vars.palette.brand.stroke.compound.rest` | — | Compound stroke |
+
+---
+
+### 3. Danger Palette (`danger`)
+
+Error, destructive actions, critical states. Uses red tones.
+
+| Figma CSS Var | MUI Theme Path | Usage |
+|---------------|---------------|-------|
+| `--danger-background-1-rest` | `theme.vars.palette.danger.background[1].rest` | Error button bg |
+| `--danger-background-2-rest` | `theme.vars.palette.danger.background[2].rest` | Error chip/badge bg |
+| `--danger-foreground-1-rest` | `theme.vars.palette.danger.foreground[1].rest` | Error text |
+| `--danger-foreground-2-rest` | `theme.vars.palette.danger.foreground[2].rest` | Error chip/badge text |
+| `--danger-stroke-1-rest` | `theme.vars.palette.danger.stroke[1].rest` | Error border |
+
+---
+
+### 4. Shared Palette (`shared`)
+
+Common semantic colors available as sub-palettes.
+
+| Sub-palette | Typical Use |
+|-------------|-------------|
+| `shared.red` | Error, destructive |
+| `shared.green` | Success, positive |
+| `shared.orange` | Severe warning |
+| `shared.yellow` | Warning |
+| `shared.purple` | Informational, special |
+| `shared.pink` | Accent |
+| `shared.cyan` | Info, link |
+| `shared.lime` | Success alternative |
+
+Each has `background`, `foreground`, and `stroke` properties with 4 states.
+
+---
+
+## Typography Token Map
+
+### Untitled UI System → MUI Variant → Figma Equivalent
+
+OneHub uses custom typography variants. MUI default `h1`-`h6`, `body1`, `body2`, `subtitle1`, `subtitle2`, `caption`, `button` are **DISABLED** and MUST NOT be used.
+
+#### Display Scale
+
+| MUI Variant | Font Size | Line Height | Font Weight(s) | Figma Class Equivalent |
+|-------------|-----------|-------------|----------------|----------------------|
+| `display.xl2.bold` | 72px | 90px | 700 | — |
+| `display.xl.bold` | 60px | 72px | 700 | — |
+| `display.lg.bold` | 48px | 60px | 700 | — |
+| `display.lg.semibold` | 48px | 60px | 600 | — |
+| `display.md.bold` | 36px | 38px | 700 | — |
+| `display.md.semibold` | 36px | 38px | 600 | — |
+| `display.sm.bold` | 30px | 38px | 700 | — |
+| `display.xs.bold` | 24px | 32px | 700 | — |
+| `display.xs.semibold` | 24px | 32px | 600 | — |
+
+#### Text Scale
+
+| MUI Variant | Font Size | Line Height | Font Weight(s) | Figma Equivalent |
+|-------------|-----------|-------------|----------------|-----------------|
+| `text.xl.medium` | 20px | 30px | 500 | `text-[20px] leading-[30px] font-medium` |
+| `text.xl.regular` | 20px | 30px | 400 | `text-[20px] leading-[30px] font-normal` |
+| `text.lg.medium` | 18px | 28px | 500 | `text-[18px] leading-[28px] font-medium` |
+| `text.lg.regular` | 18px | 28px | 400 | `text-[18px] leading-[28px] font-normal` |
+| `text.md.medium` | 16px | 28px | 500 | `text-[16px] leading-[28px] font-medium` |
+| `text.md.regular` | 16px | 28px | 400 | `text-[16px] leading-[28px] font-normal` |
+| `text.sm.semibold` | 14px | 20px | 600 | `text-[14px] leading-[20px] font-semibold` |
+| `text.sm.medium` | 14px | 20px | 500 | `text-[14px] leading-[20px] font-medium` |
+| `text.sm.regular` | 14px | 20px | 400 | `text-[14px] leading-[20px] font-normal` |
+| `text.xs.medium` | 12px | 18px | 500 | `text-[12px] leading-[18px] font-medium` |
+| `text.xs.regular` | 12px | 18px | 400 | `text-[12px] leading-[18px] font-normal` |
+
+### Usage Rules
+
+- **Page titles** MUST use `display.*` variants
+- **Section headers** MUST use `text.xl.*` or `text.lg.*`
+- **Body text** MUST use `text.md.*` or `text.sm.*`
+- **Table headers** MUST use `text.xs.medium`
+- **Labels, captions** MUST use `text.xs.*`
+- **NEVER use `variant="h1"`, `variant="body1"`, etc.** — these are disabled
+
+---
+
+## Spacing System
+
+### Base Grid: 4px
+
+MU theme uses **`spacing: 4`** instead of MUI default 8. All spacing values are multiples of 4.
+
+| Figma Value | MUI equivalent | Usage Pattern |
+|-------------|---------------|---------------|
+| 4px | `theme.spacing(1)` | Icon gaps, tight padding |
+| 8px | `theme.spacing(2)` | Standard gap between elements |
+| 12px | `theme.spacing(3)` | Button horizontal padding |
+| 16px | `theme.spacing(4)` | Card padding, section gap |
+| 24px | `theme.spacing(6)` | Large section gap |
+| 32px | `theme.spacing(8)` | Table cell horizontal padding |
+| 40px | `theme.spacing(10)` | — |
+| 48px | `theme.spacing(12)` | — |
+| 64px | `theme.spacing(16)` | Page padding |
+
+### Common Figma Spacing Patterns
+
+| Figma Pattern | MUI Code Equivalent |
+|---------------|-------------------|
+| `gap-[8px]` | `gap: theme.spacing(2)` or `sx={{ gap: 2 }}` |
+| `gap-[4px]` | `gap: theme.spacing(1)` or `sx={{ gap: 1 }}` |
+| `px-[32px]` (table cell) | `paddingLeft: theme.spacing(8), paddingRight: theme.spacing(8)` |
+| `py-[16px]` (section) | `paddingTop: theme.spacing(4), paddingBottom: theme.spacing(4)` |
+| `px-[8px]` (button icon) | `paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2)` |
+| `px-[12px]` (button text) | `paddingLeft: theme.spacing(3), paddingRight: theme.spacing(3)` |
+
+### Magic Number Rule
+
+> **MUST NOT use raw pixel values.** Every spacing value MUST pass through `theme.spacing(n)`.
+
+```typescript
+// ✅ CORRECT
+sx={{ padding: theme.spacing(2) }}
+
+// ❌ WRONG — Magic numbers
+sx={{ padding: '8px' }}
+sx={{ padding: 8 }}
+```
+
+---
+
+## Border Radius
+
+| Figma Value | MUI Equivalent | Usage |
+|-------------|---------------|-------|
+| `rounded-[4px]` | `theme.shape.borderRadius / 2` (4px) | Checkbox, small elements |
+| `rounded-[8px]` | `theme.shape.borderRadius` (8px) | Buttons, inputs, cards, radio buttons |
+| `rounded-[16px]` | `theme.shape.borderRadius * 2` (16px) | Chips, badges, filter tags |
+
+---
+
+## Shadow System
+
+25-level shadow system. Access via `theme.shadows[n]`.
+
+| Level | Figma Pattern | Usage |
+|-------|--------------|-------|
+| `shadows[0]` | `none` | Flat elements |
+| `shadows[1]` | — | MUI default (minimal shadow) |
+| `shadows[2]` | `0 0 2px rgba(0,0,0,0.12)` | Very subtle elevation |
+| `shadows[3]` | `0 0 4px rgba(0,0,0,0.12)` | Slight elevation |
+| `shadows[4]` | `0 0 8px rgba(0,0,0,0.12)` | Dropdowns, tooltips |
+| `shadows[5]` | `0 0 16px rgba(0,0,0,0.12)` | Dialogs |
+| `shadows[6]` | `0 0 28px rgba(0,0,0,0.12)` | Modals |
+| `shadows[7]` | `0 0 64px rgba(0,0,0,0.12)` | High elevation modals |
+| `shadows[8-13]` | Brand shadows (`rgba(0,0,0,0.3)` overlay) | Branded elevated elements |
+| `shadows[14-24]` | MUI defaults | — |
+
+---
+
+## Sizing System
+
+### Component Height Table (from Figma)
+
+| Component | Height | Notes |
+|-----------|--------|-------|
+| Button (medium) | `32px` | Standard action button |
+| Table Header | `40px` | — |
+| Table Row | `56px` | — |
+| Filter Button | `32px` | Same as button |
+| Checkbox/Radio | `16px` | Square (width = height) |
+
+---
+
+## Font Family
+
+| Property | Value |
+|----------|-------|
+| **Family** | Inter (`var(--font-inter)`) |
+| **Weights** | 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold) |
+| **Host Project Responsibility** | MUST define `@font-face` and set `--font-inter` CSS variable |
+| **Package** | Font files NOT distributed by `@turknet/onehub`. Host project must self-host. |

package/ESLINT_DESIGN_RULES.md

@@ -0,0 +1,392 @@
+# ESLint Design Rules — Specification
+
+> **Purpose:** Specification for a custom ESLint plugin that automates OneHub design rule enforcement.
+>
+> **Status:** Specification / future implementation. Currently enforced via `scripts/verify-design.js`.
+
+---
+
+## Overview
+
+This document defines ESLint rules that can automatically detect design violations in OneHub projects. Rules are divided into:
+
+1. **Auto-detectable** — Can be reliably detected by static analysis (ESLint)
+2. **Manual review required** — Needs human/AI judgment, cannot be fully automated
+
+---
+
+## Auto-Detectable Rules (ESLint)
+
+### `onehub/no-mui-default-typography`
+
+Detects usage of MUI default typography variants that are disabled in the theme.
+
+**Rule:** Disallow `variant="h1"` through `variant="h6"`, `variant="body1"`, `variant="body2"`, `variant="subtitle1"`, `variant="subtitle2"`, `variant="caption"`, `variant="button"`, `variant="overline"`.
+
+```json
+{
+  "onehub/no-mui-default-typography": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+<Typography variant="h1">Title</Typography>
+<Typography variant="body1">Text</Typography>
+<Typography variant="caption">Caption</Typography>
+
+// ✅ OK
+<Typography variant="display.lg.bold">Title</Typography>
+<Typography variant="text.md.regular">Text</Typography>
+```
+
+---
+
+### `onehub/no-inline-style`
+
+Detects inline `style={{}}` props on JSX elements.
+
+**Rule:** Disallow `style={{}` prop usage. Must use `sx` or `styled()`.
+
+```json
+{
+  "onehub/no-inline-style": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+<Button style={{ color: 'red' }}>Click</Button>
+<div style={{ padding: 20 }}>Text</div>
+
+// ✅ OK
+<Button sx={{ color: theme.vars.palette.danger.foreground[1].rest }}>
+<Box sx={{ padding: theme.spacing(5) }}>
+```
+
+---
+
+### `onehub/no-raw-hex-colors`
+
+Detects raw hex color values in JSX attributes and template literals.
+
+**Rule:** Disallow `#`-prefixed hex colors in `sx`, `css`, `styled` (unless inside `theme.vars.*` or `var(--*)` context).
+
+```json
+{
+  "onehub/no-raw-hex-colors": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+sx={{ color: '#242424' }}
+sx={{ backgroundColor: '#2970ff' }}
+
+// ✅ OK
+sx={{ color: 'var(--neutral-foreground-1-rest)' }}
+sx={{ bgcolor: theme.vars.palette.brand.background[1].rest }}
+```
+
+**Edge cases to handle:**
+- SVG fill values may legitimately use hex colors → exclude SVG elements
+- Storybook stories may use hex for demo purposes → allow in `.stories.tsx` files
+
+---
+
+### `onehub/no-magic-spacing`
+
+Detects raw pixel values and numeric spacing that should use `theme.spacing()`.
+
+**Rule:** Disallow string px values (`'8px'`) and raw number spacing values in `sx` and `css` props.
+
+```json
+{
+  "onehub/no-magic-spacing": ["error", { "allowedZero": true }]
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+sx={{ padding: '8px' }}
+sx={{ margin: '16px' }}
+sx={{ gap: '4px' }}
+
+// ✅ OK
+sx={{ padding: theme.spacing(2) }}
+sx={{ margin: theme.spacing(4) }}
+sx={{ gap: theme.spacing(1) }}
+sx={{ padding: 0 }}
+```
+
+---
+
+### `onehub/no-invalid-mui-color-prop`
+
+Detects MUI `color` prop values that are not valid for the specific component.
+
+**Rule:** Enforce valid `color` prop values per component based on theme definitions.
+
+```json
+{
+  "onehub/no-invalid-mui-color-prop": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+<Button color="success">Save</Button>      // Valid: primary, secondary, error
+<TextField color="primary" />                // Valid: neutral, brand, danger
+<Chip color="success" />                     // Valid: primary, secondary, error
+<Badge color="primary" />                    // Valid: default, brand, success, danger, ...warning, important
+
+// ✅ OK
+<Button color="primary" />
+<TextField color="neutral" />
+<Chip color="primary" />
+<Badge color="success" />
+```
+
+---
+
+### `onehub/no-invalid-mui-variant-prop`
+
+Detects MUI `variant` prop values that are not valid for the specific component.
+
+```json
+{
+  "onehub/no-invalid-mui-variant-prop": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+<Button variant="gradient">Click</Button>   // Valid: contained, outlined, text
+<Chip variant="soft" />                      // Valid: filled, tint, outline, ghost
+
+// ✅ OK
+<Button variant="contained" />
+<Chip variant="tint" />
+```
+
+---
+
+### `onehub/no-full-mui-import`
+
+Detects full library imports from `@mui/material`.
+
+```json
+{
+  "onehub/no-full-mui-import": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+import * as Mui from '@mui/material';
+
+// ✅ OK
+import { Button, Typography, Box } from '@mui/material';
+```
+
+---
+
+### `onehub/no-checkbox-radio-size-large`
+
+Detects `size="large"` on Checkbox and Radio components.
+
+```json
+{
+  "onehub/no-checkbox-radio-size-large": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+<Checkbox size="large" />
+<Radio size="large" />
+
+// ✅ OK
+<Checkbox size="small" />
+<Radio size="medium" />
+```
+
+---
+
+### `onehub/no-non-vars-palette`
+
+Detects usage of `theme.palette.*` (non-vars palette) instead of `theme.vars.palette.*`.
+
+```json
+{
+  "onehub/no-non-vars-palette": "error"
+}
+```
+
+**Detects:**
+```tsx
+// ❌ Error
+sx={{ color: theme.palette.primary.main }}
+sx={{ bgcolor: theme.palette.error.light }}
+
+// ✅ OK
+sx={{ color: theme.vars.palette.brand.foreground[1].rest }}
+sx={{ bgcolor: theme.vars.palette.danger.background[2].rest }}
+```
+
+---
+
+## Manual Review Required (Cannot be fully automated)
+
+These rules require human or AI judgment because context matters.
+
+| Rule | Why Manual |
+|------|-----------|
+| Typography variant matches content hierarchy | Page title vs section header — depends on intent |
+| Correct MUI component selected for Figma pattern | Requires visual comparison |
+| Form uses Formik + Yup | Can check imports but can't verify correct usage |
+| Data fetching uses React Query | Can check imports but can't verify correct pattern |
+| Icons from correct source | `@turknet/onehub/icons` vs `@mui/icons-material` can be checked by import source |
+| Accessibility (labels, keyboard nav) | Needs behavioral/visual verification |
+| Border radius matches element type | Context-dependent |
+| Shadow/elevation level appropriate | Context-dependent |
+| Layout component used correctly | Needs understanding of page structure |
+
+---
+
+## Configuration Format
+
+### `.eslintrc.json` Example
+
+```json
+{
+  "plugins": ["onehub"],
+  "rules": {
+    "onehub/no-mui-default-typography": "error",
+    "onehub/no-inline-style": "error",
+    "onehub/no-raw-hex-colors": "error",
+    "onehub/no-magic-spacing": "error",
+    "onehub/no-invalid-mui-color-prop": "error",
+    "onehub/no-invalid-mui-variant-prop": "error",
+    "onehub/no-full-mui-import": "error",
+    "onehub/no-checkbox-radio-size-large": "error",
+    "onehub/no-non-vars-palette": "error"
+  }
+}
+```
+
+### `eslint.config.mjs` (Flat Config) Example
+
+```js
+import onehub from 'eslint-plugin-onehub';
+
+export default [
+  {
+    plugins: { onehub },
+    rules: {
+      'onehub/no-mui-default-typography': 'error',
+      'onehub/no-inline-style': 'error',
+      'onehub/no-raw-hex-colors': 'error',
+      'onehub/no-magic-spacing': 'error',
+      'onehub/no-invalid-mui-color-prop': 'error',
+      'onehub/no-invalid-mui-variant-prop': 'error',
+
+      'onehub/no-full-mui-import': 'error',
+      'onehub/no-checkbox-radio-size-large': 'error',
+      'onehub/no-non-vars-palette': 'error',
+    },
+  },
+];
+```
+
+---
+
+## Integration Steps
+
+### 1. Install the ESLint plugin
+
+```bash
+yarn add -D eslint-plugin-onehub
+# or
+npm install --save-dev eslint-plugin-onehub
+```
+
+### 2. Add to ESLint config
+
+Add `"onehub"` to the `plugins` array and configure rules as shown above.
+
+### 3. Add lint script
+
+```json
+{
+  "scripts": {
+    "lint:design": "eslint --rule 'onehub/*: error' src/"
+  }
+}
+```
+
+### 4. CI Integration
+
+```yaml
+# bitbucket-pipelines.yml example
+design-lint:
+  - step:
+      name: Design Compliance Check
+      script:
+        - yarn lint:design
+        - node node_modules/@turknet/onehub/scripts/verify-design.js src/
+```
+
+---
+
+## Rule Priority & Adoption Order
+
+When implementing the ESLint plugin, prioritize rules in this order:
+
+| Priority | Rule | Reason |
+|----------|------|--------|
+| **P0** | `no-mui-default-typography` | High impact, easy to detect |
+| **P0** | `no-inline-style` | Common antipattern |
+| **P1** | `no-raw-hex-colors` | High impact, some edge cases |
+| **P1** | `no-magic-spacing` | High impact, some edge cases |
+| **P2** | `no-invalid-mui-color-prop` | Per-component validation |
+| **P2** | `no-invalid-mui-variant-prop` | Per-component validation |
+| **P2** | `no-full-mui-import` | Bundle size |
+| **P3** | `no-checkbox-radio-size-large` | Edge case |
+| **P3** | `no-non-vars-palette` | Edge case, may have legit uses |
+
+---
+
+## Current Enforcement (Until ESLint Plugin Ready)
+
+Until the custom ESLint plugin is implemented, use:
+
+1. **`scripts/verify-design.js`** — Runs in CI and pre-commit
+   ```bash
+   node scripts/verify-design.js src/
+   ```
+
+2. **`.opencode/rules/design-compliance.md`** — Always-apply rule for AI agents
+
+3. **`.opencode/skills/onehub-design-verification/SKILL.md`** — Manual verification checklist
+
+4. **Manual code review** — Check against DESIGN_RULES.md
+
+---
+
+## References
+
+- [ESLint Plugin Development Guide](https://eslint.org/docs/latest/extend/plugins)
+- [ESTree AST Spec](https://github.com/estree/estree) — For writing AST-based rules
+- [@typescript-eslint](https://typescript-eslint.io/) — TypeScript-aware linting
+- `DESIGN_RULES.md` — Complete design rule reference
+- `COMPONENT_MAP.md` — Valid prop combinations for all components
+- `COMPONENT_GLOSSARY.md` — Exhaustive component catalog