description: Standardized UI Component Selection & Implementation

UI Design Workflow: Component Discovery

This workflow ensures that the application maintains a premium, consistent design by leveraging established component patterns instead of ad-hoc UI development.

Steps

1. Identify Component Need

Before writing any UI code, clearly define what element is needed (e.g., "A date picker that allows selecting year first", "A modal for error messages", "A multi-select dropdown").

2. Search Documentation

// turbo 1. Use search_web with the query: flowbite [component name] tailwind react. 2. Visit the official Flowbite Documentation. 3. Look for "interactive" or "standard" versions that match our requirements.

3. Review Implementation Details

• Check if the component requires additional libraries (e.g., flowbite-react or just vanilla Tailwind).
• Ensure it is compatible with the existing main.css and Tailwind configuration.

4. Adapt to Theme

• Theme: Apply the "Stone/Cormorant" palette (Dark glassmorphism, subtle borders).
• Structure: Keep the accessibility attributes (ARIA labels, roles) from the source library.
• Verification: Run npm run dev and visually verify that the component behaves correctly and looks premium.

Rules

• NEVER build a complex input (like a clock or date picker) from scratch if a library version exists.
• DO NOT add heavy secondary libraries without checking the current package.json first.