refactoring-the-assembled-uilisted

Edit, split or share the CSS and JavaScript under plugins/audit/scripts/ui/ — files Python concatenates into one inline <style> and one inline <script> carrying code, in a self-contained page opened over file://. Covers the assembly contract and the byte-level pins in plugins/audit/tests/ that guard it, why the split must be an order-preserving cut rather than a regrouping, the index-slice assertions that make section-marker comments load-bearing, the counts that currently enforce duplication, choosing a feature a report may use (Baseline plus a file:// gate), one dialect and one shared layer across both surfaces, CSS token and naming conventions, and the browser gates that must stay green. Use when touching anything under scripts/ui/ or _ui_theme.py, when extracting a shared partial or module, when a rule or helper exists twice, or when a selftest pin goes red after a UI edit.
AleksandarBisevac/claude-plugins · ★ 4 · Code & Development · score 77

Install: claude install-skill AleksandarBisevac/claude-plugins

# Refactoring the assembled UI `scripts/ui/` does not hold standalone files. It holds **ordered parts of one artifact**. `_report_ui.py`, `_panel_ui.py` and `panel-server.py` read them at import and join them into a single self-contained HTML page. Almost every surprise in this area comes from forgetting that. ## The assembly contract - **One inline `<style>`, and one inline `<script>` *carrying code*.** The tags live in the Python modules, never in the assets — selftests pin both, and pin that the `.js` files carry no `<script>` tags of their own. *Carrying code* is not hedging. The panel emits one of each; **the shipped report emits three `<script>` tags** — `window.AUDIT_USAGE` (2.6 KB of data), `window.AUDIT_MD_B64` (the 6.9 KB base64 Markdown twin), and the code (81 KB). Check the artifact, not this sentence: `grep -c '<script' examples/acme-store/acme-store-audit.html` prints 3. The pin that reads `SCRIPT.count("<script>") == 1` counts tags in a **Python string** — the code block alone — not in the page. It has never contradicted the above, which is exactly why the wrong version of this bullet survived: the pin that looked like it was guarding the claim was guarding something else. - **No external resources, ever.** CI asserts the rendered report contains no `<script src`, `<img `, `<link `, `<iframe` or `url(http`. No CDN, no web font, no separate stylesheet. - **A module script, but no cross-file `import`.** The report's code block is `<sc