메뉴
Argus 前端 UI/UX 設計與實作準則（科技風 / 前台動效 / 前後台對應 / affordance / 返回導覽）。當你要新增或修改 Argus 任何前端介面時必讀——包含 frontend/src/App.jsx 的頁面與元件、styles.css 樣式、前台公開頁（public-shell）、React 後台（/admin/*）、新頁面或新元件、按鈕 / 導覽列 / 分頁 / 動畫 / 特效 / 配色 / 版面 / 互動、或任何「美化、調整版面、做動畫、改視覺」的需求時，先讀本 skill 再動手。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Argus 版本控制 / commit / push / 協作安全規範與部署現況。當你要在本 repo 做 git add / commit / push、或討論部署、上線、共用 repo、與組員協作時，**動手前必讀並照做**。內含：專案已公網上線、GitHub 與部署機共用、有其他組員同時開發，以及任何 push 前的強制檢查清單。
Argus 前端 UI/UX 設計與實作準則（科技風 / 前台動效 / 前後台對應 / affordance / 返回導覽）。當你要新增或修改 Argus 任何前端介面時必讀——包含 frontend/src/App.jsx 的頁面與元件、styles.css 樣式、前台公開頁（public-shell）、React 後台（/admin/*）、新頁面或新元件、按鈕 / 導覽列 / 分頁 / 動畫 / 特效 / 配色 / 版面 / 互動、或任何「美化、調整版面、做動畫、改視覺」的需求時，先讀本 skill 再動手。
Argus 專案「範圍與環境感知」強制規則。**必須主動呼叫**的情境：(a) 對話開始或接到新任務時的第一步；(b) 使用者問題含「整個 / 所有 / 每個 / 全部 / 列出 / 介紹專案」這類**全稱詞**，回答前先做；(c) 使用者糾錯、質疑、補充事實後（不論大小）；(d) 在 worktree 工作但要回答主 repo 全貌時；(e) `ls` / `find` / `grep` 後要做「總結性 / 全面性」回答前。核心鐵律：**先宣告檢查範圍與已知盲區，再回答內容**；視野有限就主動承認；使用者糾錯一次 → 同類型回頭掃一遍 → 修補規則本身。N+1 不同方法測試的循環細節見 AGENTS.md「QA 鐵則」。
Argus 版本控制 / commit / push / 協作安全規範與部署現況。當你要在本 repo 做 git add / commit / push、或討論部署、上線、共用 repo、與組員協作時，**動手前必讀並照做**。內含：專案已公網上線、GitHub 與部署機共用、有其他組員同時開發，以及任何 push 前的強制檢查清單。
Argus 專案「範圍與環境感知」強制規則。**必須主動呼叫**的情境：(a) 對話開始或接到新任務時的第一步；(b) 使用者問題含「整個 / 所有 / 每個 / 全部 / 列出 / 介紹專案」這類**全稱詞**，回答前先做；(c) 使用者糾錯、質疑、補充事實後（不論大小）；(d) 在 worktree 工作但要回答主 repo 全貌時；(e) `ls` / `find` / `grep` 後要做「總結性 / 全面性」回答前。核心鐵律：**先宣告檢查範圍與已知盲區，再回答內容**；視野有限就主動承認；使用者糾錯一次 → 同類型回頭掃一遍 → 修補規則本身。N+1 不同方法測試的循環細節見 CLAUDE.md「QA 鐵則」。
| name | argus-ui-design |
| description | Argus 前端 UI/UX 設計與實作準則（科技風 / 前台動效 / 前後台對應 / affordance / 返回導覽）。當你要新增或修改 Argus 任何前端介面時必讀——包含 frontend/src/App.jsx 的頁面與元件、styles.css 樣式、前台公開頁（public-shell）、React 後台（/admin/*）、新頁面或新元件、按鈕 / 導覽列 / 分頁 / 動畫 / 特效 / 配色 / 版面 / 互動、或任何「美化、調整版面、做動畫、改視覺」的需求時，先讀本 skill 再動手。 |
本 skill 是 Argus 前端的唯一視覺與互動規範。動手改任何畫面前先讀完「鐵則摘要」，再翻對應章節。本檔只談「設計怎麼做」；技術硬限制（單檔架構、build 工具等）以 frontend/CLAUDE.md 為準，兩者衝突時硬限制優先。
任一條成立就先讀本檔：
App.jsx 新增 / 修改任何頁面或元件styles.css（配色、版面、動畫、按鈕、卡片、導覽）.public-shell）或 React 後台（/admin/*）.public-shell；後台保持冷靜高效，只留狀態回饋。專案 styles.css 的 :root 已建立科技風語言，一律沿用、只擴充、不另起爐灶：
| 角色 | 既有 token / 值 | 用途 |
|---|---|---|
| 深空底 | --argus-navy-950 #050a1c / -900 #060b1f / -800 #0a1535 | 頁面與卡片底色 |
| 主色（科技藍） | --argus-cyan-dot #0ea5e9、cyan glow rgba(56,189,248,…) | 主要 CTA、focus、強調、連結 |
| 玻璃 / 邊光 | rgba(103,232,249,.45) border + 0 0 14px rgba(34,211,238,.45) glow | glassmorphism 卡片、hover 光暈 |
| 危險 | red / magenta rgba(239,68,68,…) | 刪除、取消掃描、失敗狀態 |
| 成功 | green | 完成、通過 |
| 警告 | amber | 注意、待處理 |
做法：
backdrop-filter: blur() + 半透明底 + 1px 內光邊（沿用既有 box-shadow inset 寫法）。.public-shell 的放大規則，不要縮小。樣式一律寫進
styles.css、用 CSS 變數、BEM-like 命名（.頁面-元素），禁止 inline style（動態計算值除外）。詳見frontend/CLAUDE.md。
前台公開頁（.public-shell：/project /team /purchase /reviews 等行銷頁）— 放手做複雜動效：
animation-delay 階梯式淡入上移，沿用既有 fade-up），一次高衝擊的 page-load 勝過一堆散亂微互動。transform / opacity / backdrop-filter），不要動會觸發 reflow 的 layout 屬性，維持 60fps。後台（/admin/*）— 動效克制：
無障礙（兩邊都要）：
@media (prefers-reduced-motion: reduce)：關閉動畫時顯示靜態版，不可只有動態版。目標：使用者不用試就知道哪裡能點、按了會發生什麼。
:hover / :active / :focus-visible 狀態 + cursor: pointer + 足夠對比。:focus-visible 樣式，可 Tab 到、可 Enter 觸發。原則：同一個業務功能，在前台與後台用同名分頁，使用者建立一套心智模型即可兩邊通用。
| 功能 | 前台（使用者） | 後台（staff /admin/*） |
|---|---|---|
| 掃描 | /scans、/scans/:id、/scans/:id/topology | /admin/scans、/admin/scans/:id |
| 評論 | /reviews | /admin/reviews |
| 內容 / CMS | /project、/team（公開呈現） | /admin/content |
| 方案 / 購買 | /purchase | /admin/plans |
| 交易 / 錢包 | 使用者錢包 | /admin/transactions |
| 使用者 | （個人資料） | /admin/users、/admin/users/:id |
導覽 bar：
PublicNav 橫向導覽列。/scans/:id、/admin/users/:id、/admin/scans/:id 等）一律放明確「← 返回上一層」+ breadcrumb。Esc 可關 + 點遮罩可關，且不留在 history 裡。frontend/CLAUDE.md，不可違反）App.jsx 是 6500+ 行單檔：改前先 grep 定位，禁止從頭瀏覽；路由在底部 <Routes> 區（約第 6460 行）。.jsx / .tsx 元件檔（單檔架構）。styles.css，BEM-like 命名，禁止 inline style（動態值除外）。cd frontend ; .\build-node22.ps1，禁止 npm run build（Node 24 + Rollup crash）。api.js 的 axios instance，禁止元件內直接 fetch / axios。