Tailwind React Firebase

Cursor-Regel für React-Apps mit Firebase-Backend und Tailwind-Styling, ideal für schnelle MVPs.

Original-Beschreibung der Autoren: Cursor rules for Tailwind development with React and Firebase integration.

Die Regel

---
description: "Cursor rules for Tailwind development with React and Firebase integration."
globs: **/*
alwaysApply: false
---
Here are some best practices and rules to follow for creating a high-quality, mobile-first web app with excellent UI/UX using Tailwind, React, and Firebase:

Mobile-First Design:
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.

Consistent Design System:
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.

Performance Optimization:
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.

Responsive Typography:
Use Tailwind's text utilities with responsive prefixes to adjust font sizes across different screens.
Consider using a fluid typography system for seamless scaling.

Accessibility:
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.

Touch-Friendly UI:
Make interactive elements (buttons, links) at least 44x44 pixels for easy tapping.
Implement touch gestures for common actions (swipe, pinch-to-zoom) where appropriate.

USE THE IMAGES IN THE MOCKUPS FOLDER AS EXAMPLE OF HOW TO STYLE THE APP AND CREATE THE LAYOUT

WHEN CREATING A FILE DON'T CONFLICT IT WITH .TSX AND .JSX FILES

Firebase Best Practices:
Implement proper security rules in Firebase.
Use Firebase SDK's offline persistence for better performance and offline support.
Optimize queries to minimize read/write operations.

Error Handling and Feedback:
Implement proper error boundaries in React.
Provide clear feedback for user actions (loading states, success/error messages).

Animation and Transitions:
Use subtle animations to enhance UX (e.g., page transitions, micro-interactions).
Utilize Tailwind's transition utilities or consider libraries like Framer Motion.

Form Handling:
Use libraries like Formik or react-hook-form for efficient form management.
Implement proper form validation with clear error messages.

Code Organization:
Follow a consistent folder structure (e.g., components, hooks, pages, services).
Use custom hooks to encapsulate and reuse logic.

Native-like Features:
Implement pull-to-refresh for content updates.
Use smooth scrolling and momentum scrolling.
Consider using libraries like react-spring for physics-based animations.

Here’s a concise prompt for a language model to help you with the logic for creating AI-powered medication insights in your app:

Prompt:
Design a feature for a pill management app that tracks user interactions with medications (Take/Skip) and generates monthly adherence reports.

The app should:

User Interface:
Display pills for "Morning," "Afternoon," and "Night" with buttons for "Take" and "Skip."
Show a confirmation modal for user actions.

Data Collection:
Log user interactions (pill ID, action, timestamp, notes) in a database.

Monthly Report:
Aggregate data to calculate total pills scheduled vs. taken, adherence percentage, and trends (e.g., frequently skipped pills).

AI Insights:
Use basic statistical analysis to generate personalized suggestions based on user feedback (e.g., side effects, missed doses).

Dashboard:
Create a section for users to view their monthly reports, including adherence percentage, trends, and AI-generated suggestions.

This prompt provides a clear and structured request for assistance in developing the feature, focusing on key components and functionality.

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Regel kombiniert React-Frontend-Konventionen mit Tailwind-Styling und Firebase als Backend – deckt also Auth, Firestore-Zugriffe und Hosting-Besonderheiten zusammen mit UI-Konventionen ab. Praktisch für kleine bis mittlere Projekte oder MVPs, die schnell ein Backend brauchen, ohne einen eigenen Server aufzusetzen. Der Vorteil gegenüber getrennten Regeln: Der Assistent kennt typische Firebase-Fallstricke (z. B. Security Rules, Realtime-Listener-Cleanup) direkt im React-Kontext. Für Projekte mit eigenem REST- oder GraphQL-Backend ist diese Regel weniger passend, dort eignet sich eher eine reine React-Tailwind-Regel ohne Firebase-Bindung.

Praxis-Tipp

Für Firebase-MVPs einsetzen, z. B. “Baue eine React-Komponente, die Nutzerdaten aus Firestore lädt und mit Tailwind-Karten darstellt”.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …