Here’s the fully updated v3 prompt. Here’s exactly what was clarified and added:
🔵 Floating Button — always visible on the frontend
- Fixed to the viewport edge (right or left, configurable from admin)
- A red badge shows how many features are currently active
CTRL+Ukeyboard shortcut also opens/closes the drawer
📋 The Drawer — all 12 features, wired to the frontend page
- Every tile click immediately injects/removes a CSS class on
<html>of the host WordPress page - No page reload needed — changes are instant and visible while the drawer is open
- Active tiles get a blue border + dot indicator; cycle features show their current level (1, 2, 3)
💾 localStorage persistence — full schema documented
- Toggle features: stored as
true(on) or absent (off) - Cycle features: stored as a number (0 = off, 1/2/3 = step)
- On every page load the state is restored automatically
⚡ Zero FOUC (Flash of Unstyled Content)
- The most important new addition — a tiny vanilla JS
<script>is injected into<head>at priority 1 (before CSS loads) that reads localStorage and applies all saved classes to<html>before React even mounts - This means if a user saved “dyslexia friendly + bigger text”, the font change happens before the first paint, not after
🛡 Widget exempted from its own filters
- The
filter: nonerule on#accessflow-widget-rootmeans the widget button/drawer won’t go grayscale or oversaturated when those features are active on the page