[FEAT] 儀表板 UI 大改造、中文化與項目開發規範同步 (含深色模式修復)

.agents/skills/ui-minimal-luxury/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: 極簡奢華風 UI 實作規範 (Minimal Luxury UI)
+description: 定義 Star Cloud 管理後台的「極簡奢華風」設計規範，包含 CSS Tokens、常用組件樣式、動畫效果與互動模式，確保全站 15+ 模組的視覺一致性。
+---
+
+# 極簡奢華風 UI 實作規範 (Minimal Luxury UI)
+
+本文件定義了 Star Cloud 專案的核心視覺語言。所有新頁面與組件開發必須嚴格遵守此規範。
+
+## 1. 核心設計令牌 (Design Tokens)
+
+### 色彩系統 (CSS Variables)
+位於 `resources/css/app.css`：
+- `--color-luxury-deep`: `#0f172a` (深色背景)
+- `--color-luxury-card`: `#1e293b` (卡片背景)
+- `--color-accent`: `#06b6d4` (青色點綴，適用於按鈕與標示)
+
+### 字體 (Typography)
+- **內文字體**: `Plus Jakarta Sans`
+- **標題/顯示字體**: `Outfit`
+- **特性**: 標題需帶有 `letter-spacing: -0.02em` 以增強精密感。
+
+## 2. 核心組件樣式
+
+### 豪華卡片 (Luxury Card)
+```html
+<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
+    <!-- 內容 -->
+</div>
+```
+- **特效**: 懸停時帶有 Y 軸平移與深度投影。
+
+### 側邊導覽項 (Luxury Nav Item)
+```html
+<a href="#" class="luxury-nav-item active">
+    <i class="lucide-icon"></i>
+    <span>節點名稱</span>
+</a>
+```
+- **啟用狀態**: 左側帶有圓角直條指示器，並輔以青色發光陰影。
+
+### 按鈕組件 (Buttons)
+- **Primary**: `.btn-luxury-primary` (青色漸層，適用於建立、儲存)
+- **Secondary**: `.btn-luxury-secondary` (白色/深色背景，帶邊框，適用於編輯、篩選)
+- **Ghost**: `.btn-luxury-ghost` (無背景，適用於取消、查看更多)
+
+```html
+<!-- Primary -->
+<button class="btn-luxury-primary">
+    <i class="lucide-plus size-4"></i>
+    <span>建立新機台</span>
+</button>
+
+<!-- Ghost -->
+<button class="btn-luxury-ghost">取消</button>
+```
+
+## 3. 動畫與互動
+
+### 進場動畫
+- **`.animate-luxury-in`**: 所有的主內容區域或卡片在頁面載入時，應具備由下而上的淡入效果。
+
+### Alpine.js 互動模式 (以時間選擇器為例)
+- **互動原則**: 點擊觸發下拉選單時，必須使用 `x-transition` 且帶有 `scale` 偏移。
+- **樣式要求**: 選單背景需使用玻璃擬態 (Glassmorphism) 或帶透明度的深色背景。
+
+## 4. UI 檢查清單 (AI 助手執行前必讀)
+- [ ] 是否使用了正確的 `rounded-2xl` (或更圓) 的導角？
+- [ ] 所有的圖示是否一致使用 `lucide-react` 風格？
+- [ ] 卡片是否有適當的間距 (通常為 `p-6`)？
+- [ ] 文字色階是否符合：標題 (slate-900/white)、副標 (slate-500/slate-400)？
+
+## 5. 開發注意事項 (Important Notes)
+
+### 技術限制備忘
+- **CSS 編譯**: 複雜的 `box-shadow` 或漸層應直接寫原生 CSS 屬性，避免在 `@apply` 中使用帶空格的數值導致編譯失敗（詳見 KI: `tailwind-luxury-ui-patterns`）。
+- **深色模式**: 互動式按鈕在深色模式下必須強化文字亮度（`dark:text-white`），並輔以青色發光效果。
+
+### 即時動態呈現規範
+- **格式**: `#機台編號 動作內容` (例如 `#V-001 執行出貨`)。
+- **脈絡**: 必須呈現相對時間與機台位置。
+
+---
+> [!IMPORTANT]
+> **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
+> 嚴禁在 Blade 中寫入大量重複的 `bg-indigo-600` 等舊式類別。
+
+---
+> [!TIP]
+> 當遇到未定義的 UI 區塊時，優先參考 `admin.dashboard.blade.php` 的卡片與即時動態實作方式進行衍生。