refactor(rules): split ui-ux.md into index + references

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

shared/rules/ui-ux/references/visual-and-accessibility.md

@@ -0,0 +1,48 @@
+## Visual Design
+
+* Prefer modern, clean and restrained visual design.
+* Use a consistent design system.
+* Keep typography hierarchy clear.
+* Maintain sufficient contrast.
+* Use color intentionally.
+* Do not rely on color alone to communicate state.
+* Keep the number of accent colors limited.
+* Avoid excessive gradients, shadows and decorative effects.
+* Use rounded corners, borders and elevation consistently.
+* Keep icons stylistically consistent.
+* Use familiar icons for familiar actions.
+* Pair unclear icons with text labels.
+* Avoid tiny click targets.
+* Keep interactive targets large enough for comfortable use.
+* Maintain consistent alignment.
+* Avoid arbitrary spacing values.
+* Prefer reusable spacing and sizing tokens.
+
+## Accessibility
+
+* Accessibility is part of the default design, not an optional enhancement.
+* Use semantic controls and elements.
+* Ensure full keyboard usability.
+* Maintain visible focus indicators.
+* Use sufficient color contrast.
+* Do not rely solely on hover interactions.
+* Do not rely solely on color to indicate status.
+* Provide accessible names for controls.
+* Keep focus order logical.
+* Move focus intentionally after dialogs, navigation or major state changes.
+* Support screen readers where applicable.
+* Use ARIA only when native semantics are insufficient.
+* Respect reduced-motion and system accessibility preferences.
+* Avoid flashing or distracting content.
+
+## Responsive Design
+
+* Design for the available viewport instead of fixed screen sizes.
+* Prioritize important content on smaller screens.
+* Avoid horizontal scrolling unless the content genuinely requires it.
+* Keep controls usable on touch devices.
+* Do not simply shrink desktop layouts.
+* Adapt navigation and layout intentionally for smaller screens.
+* Preserve core functionality across supported screen sizes.
+* Avoid hiding important actions solely because space is limited.
+* Test common breakpoints and extreme content lengths.