---
name: ui-element-best-practices
description: UI element guidelines (Smart Navbar, Accessible Inputs, SEO Accordions, Utility Badges).
---

# UI Element Best Practices Guidelines

*   **Smart Navbar:** Muss fixiert (`sticky top-0`) oder intelligent einblendbar sein. Der primäre CTA-Button platziert sich unübersehbar ganz rechts.
*   **Accessible Inputs:** Verwende in Formularen niemals verschwindende Platzhalter als Ersatz für Labels. Nutze feste Labels und markante Focus-Zustände (`focus:ring-2 focus:ring-sky-500`).
*   **SEO Accordions:** Nutze strukturierte Akkordeons (z. B. für FAQs) im Footer-Bereich, um die Seite visuell sauber zu halten, aber maximalen Text für das Google-Ranking bereitzustellen.
*   **Utility Badges:** Setze kleine, pillenförmige Indikatoren (`px-3 py-1 rounded-full text-xs`) über Headlines ein, um den Blick des Nutzers vorzufiltern.