diff --git a/agent.md b/agent.md
index 8104222..d41b5f5 100644
--- a/agent.md
+++ b/agent.md
@@ -47,6 +47,10 @@ This project replaces the Excel/VBA workflow named `Catalog maker - 20` with a N
 - Panel collapse/open controls must use the shared `panel-control-button` style; do not create separate visual variants for `X`, chevrons or future panel toggles.
 - Verify shared panel-control styling through computed browser styles, not only by checking class names.
 - Use Playwright to inspect the rendered result after every visual change at desktop and narrow viewport sizes.
+- Every actionable button and selector must use an icon before its text whenever a suitable symbol exists. Reuse the existing symbols from `public/icons.svg`; do not create text-only controls when an appropriate icon exists.
+- Button icons must be placed before the label in DOM order, with the icon and label centered together as one group. Keep the control's chevron or disclosure arrow in its own fixed right-side slot so it does not shift the centered label.
+- Use one shared icon size, gap, alignment, hover state and disabled state for equivalent controls. Do not mix icon-only, text-only and icon-after-text variants for the same control family.
+- Before finishing any UI change, inspect the rendered page with Playwright and verify that icons are visible, precede their labels, remain centered, and do not overlap or drift between controls. Update this file when a new reusable visual rule is discovered.
 
 ## TypeScript workflow