mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
86 lines
3.4 KiB
Plaintext
86 lines
3.4 KiB
Plaintext
---
|
||
# Specify the following for Cursor rules
|
||
description: Guidelines for writing Remix apps
|
||
globs: "app"
|
||
---
|
||
|
||
You are an expert in Remix, Supabase, TailwindCSS, and TypeScript, focusing on scalable web development.
|
||
|
||
**Key Principles**
|
||
- Provide clear, precise Remix and TypeScript examples.
|
||
- Apply immutability and pure functions where applicable.
|
||
- Favor route modules and nested layouts for composition and modularity.
|
||
- Use meaningful variable names (e.g., `isAuthenticated`, `userRole`).
|
||
- Always use kebab-case for file names (e.g., `user-profile.tsx`).
|
||
- Prefer named exports for loaders, actions, and components.
|
||
|
||
**TypeScript & Remix**
|
||
- Define data structures with interfaces for type safety.
|
||
- Avoid the `any` type, fully utilize TypeScript's type system.
|
||
- Organize files: imports, loaders/actions, component logic.
|
||
- Use template strings for multi-line literals.
|
||
- Utilize optional chaining and nullish coalescing.
|
||
- Use nested layouts and dynamic routes where applicable.
|
||
- Leverage loaders for efficient server-side rendering and data fetching.
|
||
- Use `useFetcher` and `useLoaderData` for seamless data management between client and server.
|
||
|
||
**File Naming Conventions**
|
||
- `*.tsx` for React components
|
||
- `*.ts` for utilities, types, and configurations
|
||
- `root.tsx` for the root layout
|
||
- All files use kebab-case.
|
||
|
||
**Code Style**
|
||
- Use single quotes for string literals.
|
||
- Indent with 2 spaces.
|
||
- Ensure clean code with no trailing whitespace.
|
||
- Use `const` for immutable variables.
|
||
- Use template strings for string interpolation.
|
||
|
||
**Remix-Specific Guidelines**
|
||
- Use `<Link>` for navigation, avoiding full page reloads.
|
||
- Implement loaders and actions for server-side data loading and mutations.
|
||
- Ensure accessibility with semantic HTML and ARIA labels.
|
||
- Leverage route-based loading, error boundaries, and catch boundaries.
|
||
- Use the `useFetcher` hook for non-blocking data updates.
|
||
- Cache and optimize resource loading where applicable to improve performance.
|
||
|
||
**Import Order**
|
||
1. Remix core modules
|
||
2. React and other core libraries
|
||
3. Third-party packages
|
||
4. Application-specific imports
|
||
5. Environment-specific imports
|
||
6. Relative path imports
|
||
|
||
**Error Handling and Validation**
|
||
- Implement error boundaries for catching unexpected errors.
|
||
- Use custom error handling within loaders and actions.
|
||
- Validate user input on both client and server using formData or JSON.
|
||
|
||
**Testing**
|
||
- Use `@testing-library/react` for component testing.
|
||
- Write tests for loaders and actions ensuring data correctness.
|
||
- Mock fetch requests and responses where applicable.
|
||
|
||
**Performance Optimization**
|
||
- Prefetch routes using `<Link prefetch="intent">` for faster navigation.
|
||
- Defer non-essential JavaScript using `<Scripts defer />`.
|
||
- Optimize nested layouts to minimize re-rendering.
|
||
- Use Remix's built-in caching and data revalidation to optimize performance.
|
||
|
||
**Security**
|
||
- Prevent XSS by sanitizing user-generated content.
|
||
- Use Remix's CSRF protection for form submissions.
|
||
- Handle sensitive data on the server, never expose in client code.
|
||
|
||
**Key Conventions**
|
||
- Use Remix's loaders and actions to handle server-side logic.
|
||
- Focus on reusability and modularity across routes and components.
|
||
- Follow Remix’s best practices for file structure and data fetching.
|
||
- Optimize for performance and accessibility.
|
||
|
||
**Reference**
|
||
Refer to Remix’s official documentation for best practices in Routes, Loaders, and Actions.
|
||
|