Frontend-With-Playwright

"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 盤點協議。