From 1b5ddac1e6af340daf4cf52b04cca0bd1c298b32 Mon Sep 17 00:00:00 2001 From: DanielS Date: Sat, 18 Jul 2026 03:55:52 +0200 Subject: [PATCH] docs: add UI/UX dos and donts to agents guidelines --- .agents/AGENTS.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 .agents/AGENTS.md diff --git a/.agents/AGENTS.md b/.agents/AGENTS.md new file mode 100644 index 0000000..0c3d375 --- /dev/null +++ b/.agents/AGENTS.md @@ -0,0 +1,15 @@ +# UI/UX Best Practices + +## UI/UX Dos +- **Prioritize Accessibility:** Ensure text has a high contrast ratio and include alternative text for all images. +- **Maintain Consistency:** Use uniform typography, spacing systems (e.g., 8-pixel grids), and color palettes across all pages to reduce user cognitive load. +- **Design Clear Visual Hierarchy:** Use size, weight, and strategic whitespace to make the primary action (CTA) stand out clearly. +- **Implement Single-Column Forms:** Keep form fields stacked in a single column for an easier, seamless input flow. +- **Optimize for Touch:** Ensure all buttons and clickable elements have a minimum hit target of 44 × 44 pixels so they are easy to tap on mobile. + +## UI/UX Don'ts +- **Don't Let Aesthetics Compromise Usability:** Avoid choosing fancy fonts, hidden navigation menus, or complex animations if they make it difficult for users to find information. +- **Don't Use Color Alone to Convey Meaning:** Always pair colors with labels or icons (e.g., in error states) to accommodate color-blind users. +- **Don't Auto-Play Videos with Sound:** This is highly disruptive; give users full control over media. +- **Don't Overcrowd the Interface:** Over-emphasizing every element dilutes the page's purpose. Leave ample whitespace around sections and text. +- **Don't Open Internal Links in New Tabs:** Let users control their own browsing journey instead of hijacking their back button.