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

name, description

name	description
極簡奢華風 UI 實作規範 (Minimal Luxury UI)	定義 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)

<div class="luxury-card p-6 rounded-2xl animate-luxury-in">
    <!-- 內容 -->
</div>

• 特效: 懸停時帶有 Y 軸平移與深度投影。

側邊導覽項 (Luxury Nav Item)

<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 (無背景，適用於取消、查看更多)

<!-- 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)？
• 文字色階是否符合：
  • 標題: text-slate-900 / dark:text-white
  • 副標/標籤: 最小應為 text-slate-500 / dark:text-slate-400（避免使用 slate-400 以下等級，以確保對比度足以閱讀）。
• 字體大小: 確保所有文字至少為 text-xs，重要的標籤建議為 text-sm。

5. 開發注意事項 (Important Notes)

技術限制備忘

• CSS 編譯: 複雜的 box-shadow 或漸層應直接寫原生 CSS 屬性，避免在 @apply 中使用帶空格的數值導致編譯失敗（詳見 KI: tailwind-luxury-ui-patterns）。
• 深色模式: 互動式按鈕在深色模式下必須強化文字亮度（dark:text-white），並輔以青色發光效果。

即時動態呈現規範

• 格式: #機台編號 動作內容 (例如 #V-001 執行出貨)。
• 脈絡: 必須呈現相對時間與機台位置。

6. 頁面佈局規範 (Page Layout)

標準寬版佈局 (Wide Layout)

@section('content')
<div class="space-y-6">
    <!-- Header: 標題與操作按鈕 -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight font-display">{{ __('Title') }}</h1>
            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Subtitle') }}</p>
        </div>
        <div class="flex items-center gap-3">
            <button class="btn-luxury-primary">...</button>
        </div>
    </div>

    <!-- Main Container: 卡片與表格 -->
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <!-- Table Content -->
            </table>
        </div>
    </div>
</div>
@endsection

佈局核心原則:

1. 移除重複內距: 根容器 div 應禁止使用 p-6 或 p-10，因為佈局基底已提供基礎間距。僅使用 space-y-6 (或 space-y-8) 控制區塊間隙。
2. 主容器樣式: 強制對齊為 luxury-card rounded-3xl p-8。
3. 標題排版:
   • 主標題需應用 font-display (Outfit)。
   • 描述文字需應用 uppercase tracking-widest font-bold 以呈現高級設計感。

7. 表單元件規範 (Form Elements)

針對輸入框與下拉選單，強制使用以下類別以確保深色模式質感。

輸入框與選單

• 類別: .luxury-input, .luxury-select
• 特性:
  • 深色模式下具備半透明背景與背景模糊效果。
  • 統一的 rounded-xl 圓角與 font-bold 字體。
  • 聚焦時帶有青色 (Cyan) 發光邊框。

<input type="text" class="luxury-input" placeholder="請輸入內容">

<select class="luxury-select">
    <option value="1">啟用</option>
    <option value="0">禁用</option>
</select>

8. 資料表格規範 (Data Tables)

為了確保管理後台資料的可讀性與精密感，表格內的所有文字級別必須對齊以下規範：

文字大小與權重 (Typography Hierarchy)

• 表頭 (Table Header):

  • 類別: text-[12px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest
  • 作用: 提供清晰的欄位定義而不奪取資料視覺焦點。

• 主標題 (Primary Item):

  • 類別: text-base font-extrabold text-slate-800 dark:text-slate-100
  • 範例: 公司名稱、機台標題。

• 次要資訊 (Secondary Info):

  • 類別: text-[11px] font-bold text-slate-400 dark:text-slate-500 tracking-[0.15em]
  • 範例: 機台序號 (SN)、公司代碼。

• 狀態標籤 (Status Badge):

  • 類別: text-[11px] font-black tracking-widest
  • 樣式: 在線 (emerald)、離線 (rose)。

• 時間訊號 (Signals/Time):

  • 類別: text-[13px] font-bold font-display tracking-widest
  • 作用: 解決數字黏滯感，提升判讀舒適度。

• 內距 (Padding): 單元格統一使用 px-6 py-6 以維持呼吸感。

• 懸停 (Hover): 表格行需具備 hover:bg-slate-50/80 (深色: dark:hover:bg-slate-800/40) 動態反饋。

分頁與列表控制項 (Pagination & Controls)

為了維持操作一致性，所有列表的分頁與切換組件必須遵循以下「Luxury Jump」模式：

• 統一高度: 所有控制項（按鈕、下拉選單）固定為 h-9 (36px)。
• 筆數切換 (Limit Selector):
  • 樣式: 使用 bg-slate-50 (深色: dark:bg-slate-800) 配合 text-[11px] font-black。
  • 位置: 位於表格右上方。
• 分頁導航 (Luxury Jump):
  • 模式: 捨棄傳統頁碼按鈕，全端統一使用「跳轉選單」。
  • 寬度: 下拉選單內部 Padding 為 pl-4 pr-10。
  • 字體: 使用 text-xs font-black tracking-widest。
• 指示文字:
  • 行動端隱藏多餘詞彙，僅保留「1 - 10 / 50」格式。
  • 數字顏色對齊 text-slate-600 (深色: text-slate-300)。

---
> [!IMPORTANT]
> **開發新功能前，必須確認 `app.css` 中的 `.btn-luxury-*` 系列組件是否滿足需求。**
> 嚴禁在 Blade 中寫入大量重複的 `bg-indigo-600` 等舊式類別。

---
> [!TIP]
> 當遇到未定義的 UI 區塊時，優先參考 `admin.dashboard.blade.php` 的卡片與即時動態實作方式進行衍生。