27 lines
1.8 KiB
Plaintext
27 lines
1.8 KiB
Plaintext
---
|
|
description: General UI/UX design best practices for React components using Tailwind CSS.
|
|
globs: **/*.{tsx,jsx}
|
|
---
|
|
- Always design and implement for mobile screens first, then scale up to larger screens.
|
|
- Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) to adjust layouts for different screen sizes.
|
|
- Create a design system with consistent colors, typography, spacing, and component styles.
|
|
- Utilize Tailwind's configuration file (tailwind.config.js) to define your custom design tokens.
|
|
- Use React.lazy() and Suspense for code-splitting and lazy-loading components.
|
|
- Implement virtualization for long lists using libraries like react-window.
|
|
- Optimize images and use next/image for automatic image optimization in Next.js.
|
|
- Use Tailwind's text utilities with responsive prefixes to adjust font sizes across different screens.
|
|
- Consider using a fluid typography system for seamless scaling.
|
|
- Ensure proper color contrast ratios using Tailwind's text-* and bg-* classes.
|
|
- Use semantic HTML elements and ARIA attributes where necessary.
|
|
- Implement keyboard navigation support.
|
|
- Make interactive elements (buttons, links) at least 44x44 pixels for easy tapping.
|
|
- Implement touch gestures for common actions (swipe, pinch-to-zoom) where appropriate.
|
|
- Implement proper error boundaries in React.
|
|
- Provide clear feedback for user actions (loading states, success/error messages).
|
|
- Use subtle animations to enhance UX (e.g., page transitions, micro-interactions).
|
|
- Utilize Tailwind's transition utilities or consider libraries like Framer Motion.
|
|
- Use libraries like Formik or react-hook-form for efficient form management.
|
|
- Implement proper form validation with clear error messages.
|
|
- Implement pull-to-refresh for content updates.
|
|
- Use smooth scrolling and momentum scrolling.
|
|
- Consider using libraries like react-spring for physics-based animations. |