"CSS"
- 在外部組件上加客製功能：以邊界為中心的方法選擇
客製外部組件穩定的程度取決於『離組件邊界多近』。本文用 Pagefind 整合到 Hugo theme 的三個情境（索引邊界、重置邊界、specificity 邊界）展開：在邊界上客製為什麼穩、各種替代方案的不足、以及下次提早辨識的訊號。
- 跨 viewport 雙模式 UI 的物理空間預算
Responsive 設計的 breakpoint 不該憑感覺取、該由元件的固有尺寸加總推算。本文展開「先列尺寸預算、再決定 breakpoint」的方法。
- 視覺對齊用單一真實來源
視覺對齊的本質是『同一條基準線在多個元素上重現』 — 任何元素的尺寸沒有來源明確的數字，整條線都靠不住。本文說明 CSS 變數 + 必要時 ResizeObserver 寫回，讓多處引用同一個值。
- 拓樸理解先行於 CSS 規則
寫 CSS 之前看真實 DOM tree、不靠 class name 推測層級。本文以『drawer 在 form 內、不是 form 的 sibling』這個假設錯誤為例，展開『拓樸理解 → CSS 規則』的順序。
- 客製 UI 留 framework 邊界外、用 CSS 控制視覺位置
Svelte / React 等框架對自己管轄的 DOM 子樹有完整渲染週期 — 客製 UI 注入這個子樹會被框架重繪清掉。本文展開「邊界外 + CSS 視覺定位」這條策略：為什麼 framework 會清外來節點、CSS 怎麼達到注入想要的視覺效果、什麼時候這條策略不適用。
- 置中元件與絕對定位元件並存：用疊層而非排擠
中央欄需要置中、側邊元件需要指定位置 — 兩者要共存，關鍵是讓側邊元件用 absolute 跳出 layout 流，中央欄完全感知不到它。本文展開疊層式並存的設計。
- 排版精度的工具選擇：CSS-only vs JS-assisted
CSS 適合 build-time 可決定的 layout、JS 適合 runtime 才知道的尺寸與 DOM 移動。混淆兩者會讓 layout 跟 framework 渲染週期競爭。本文展開選擇規則。
- CSS Layers 取代 specificity 戰
用 @import url('vendor.css') layer(vendor) 把外部組件 CSS 包進低權層、自家 CSS 留在 unlayered 自動贏 — 不論 specificity 數值。本文展開取代 !important 與雙寫的方法。
- CSS 變數定義位置統一
CSS 變數一次定義在離 root 最近的合適位置、其他地方只引用、不重複宣告。改 token 只動一處、避免散落多處難同步。
- 以 class toggle 取代 inline `display: none !important`
JS 用 `el.style.setProperty('display', 'none', 'important')` 是低層次 hack。在 CSS Layers 環境下、用語意化 class + JS toggle 可以更乾淨、更易 debug。
- Layout reflow / repaint 的可量化評估
Filter slot 切換、CSS 變數寫入、絕對定位重算 — 哪些操作觸發 reflow 而非僅 repaint、用什麼工具量、評估值落在哪個區間值得優化。
- 視覺輔助：對比度、放大、字型 zoom 的 layout 適配
色弱、低對比敏感、低視力使用者跟一般使用者「看到的不是同一個 UI」 — 對比度足夠嗎、絕對定位元件在放大模式下是否可達、字型放大 200% 後 layout 還好嗎。本文盤點視覺呈現面的 a11y 風險點。
- CSS / JS Boundary — CSS / JS 邊界與 specificity 處理
frontend-with-playwright reference：CSS-only vs JS-assisted 判準、class toggle 取代 inline style、CSS layers 取代 specificity 戰、variable 單一定義位置、檔案拆分。
- DOM Topology First — 寫 CSS 前先確認 DOM 結構
frontend-with-playwright reference：寫 CSS 前用 playwright/DevTools 量真實 DOM、selector 三維度設計、起點四選一、idempotency 兩選一。
- Frontend with Playwright — SKILL 入口
框架無關的前端開發 + Playwright 驗證 SKILL 入口：三大支柱、六大原則速查、六份情境 reference 的觸發路由。