"Frontend-With-Playwright" 2026-04-26
Accessibility and Focus — A11y 三道防線
frontend-with-playwright reference:鍵盤可達性三要素、focus management on DOM move、aria-live 動態廣播、Native HTML > ARIA、視覺 / motor a11y。 2026-04-26
CSS / JS Boundary — CSS / JS 邊界與 specificity 處理
frontend-with-playwright reference:CSS-only vs JS-assisted 判準、class toggle 取代 inline style、CSS layers 取代 specificity 戰、variable 單一定義位置、檔案拆分。 2026-04-26
Data Flow and Filter Composition — Filter × Source 層錯位與五策略
frontend-with-playwright reference:Filter / sort / count / transform stream 操作的層錯位識別 + 五策略合成。原則跨前端 / 後端 / 演算法 / DB 通用、playwright 驗證模板。 2026-04-26
DOM Topology First — 寫 CSS 前先確認 DOM 結構
frontend-with-playwright reference:寫 CSS 前用 playwright/DevTools 量真實 DOM、selector 三維度設計、起點四選一、idempotency 兩選一。 2026-04-26
Framework Coexistence — 跟 framework-managed DOM 共處
frontend-with-playwright reference:framework 邊界辨識、JS 操作四級安全度、客製 UI 注入到邊界外、外部組件四層合作(公共介面 → 邊界 → 邊界 DOM → 內部結構)。 2026-04-26
Frontend with Playwright — SKILL 入口
框架無關的前端開發 + Playwright 驗證 SKILL 入口:三大支柱、六大原則速查、六份情境 reference 的觸發路由。 2026-04-26
Playwright in the Development Loop — 開發循環的三個位置
frontend-with-playwright reference:Playwright 三個位置(假設 / 行為 / 互動驗證)的 evaluate 範例、寫成 layout test 的時機與模板、最低門檻 setup。 2026-04-26
Reactive Performance — Reactive 效能盤點與優化
frontend-with-playwright reference:MutationObserver 三維度、polling → observer、iteration / regex 成本、layout reflow、resource 載入時序、reactive listener 盤點協議。 Tarragon (CC BY 4.0) | 使用 hugo 製作