Awesome Cursor Rules Collection

// React Native Expo .cursorrules

// React Native Expo best practices
const reactNativeExpoBestPractices = [
  "Use functional components with hooks",
  "Utilize Expo SDK features and APIs",
  "Implement proper navigation using React Navigation",
  "Use Expo's asset system for images and fonts",
  "Implement proper error handling and crash reporting",
  "Utilize Expo's push notification system",
];

// Folder structure
const folderStructure = `
app/              // expo-router pages
components/       // reusable components
assets/          // static assets
`;

// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety
2. Implement proper styling using StyleSheet
3. Utilize Expo's vector icons
4. Use Expo's secure store for sensitive data
5. Implement proper offline support
6. Follow React Native best practices for performance
7. Use Expo's OTA updates for quick deployments
8. Use functional components with TypeScript
9. Implement proper prop typing
10. Use expo-router for navigation
11. Follow proper component structure
12. Implement proper error handling
13. Use StyleSheet for styling
14. Follow proper naming conventions
15. Use proper type imports
16. Implement proper loading states
17. Use proper error boundaries
`;

You are an expert Elixir developer. We want to write clean, idiomatic, and maintainable code and follow the best practices. We can safely rely on the most recent Elixir version and the latest libraries. We make full use of Elixir's features and capabilities and prefer functional programming, pattern matching, pipes and other advanced features of Elixir. Before falling back to Erlang libraries, try to use Elixir libraries first.

When defining a function with a default argument, do not use pattern matching in the function head as it is not allowed by Elixir.

When setting up a GenServer, always use a __MODULE__ struct for storing the GenServer's state.

Project management:
When renaming files or moving them to other directories, use "git mv" instead of "mv" as it will update the git history.

If i am asking you a question without instructions to change the code, just answer the question.

Comments:
Always add a comment to the code when you are doing something that is not obvious. Make sure not to delete existing comments when applying a change that is not related to the task at hand.

1. Make two line gap between function and class definitions, but if a function is a method in a class, make one line gap.
2. Make two line gap between imports and code.

1. Code Style and Structure:
   - Use consistent indentation (e.g., 2 spaces or 4 spaces) throughout the codebase.
   - Prefer arrow functions for concise and clear code.
   - Organize imports alphabetically and group them based on their origin (e.g., external libraries, internal modules).
   - Use meaningful variable and function names to enhance code readability.

2. Naming Conventions:
   - Use camelCase for variable and function names.
   - Use PascalCase for class names.
   - Prefix boolean variables with "is" or "has" for clarity (e.g., `isActive`, `hasError`).

3. TypeScript Usage:
   - Enable strict mode in TypeScript compiler options for better type checking.
   - Define types for function parameters and return values to enforce type safety.
   - Utilize interfaces or types to define complex data structures.

4. Syntax and Formatting:
   - Use template literals for string interpolation instead of concatenation.
   - Prefer ES6 import/export syntax over CommonJS require/module.exports.
   - Use destructuring where applicable to extract values from objects or arrays.

5. UI and Styling:
   - Since there is no UI code in the provided repository, ensure to follow best practices for styling components in React using CSS-in-JS libraries like styled-components or CSS modules.

6. Performance Optimization:
   - Avoid unnecessary re-renders in React components by using PureComponent or memoization techniques.
   - Use lazy loading for components or modules that are not immediately needed.

7. Key Conventions:
   - Follow a consistent folder structure for organizing different types of files (e.g., components, helpers, services).
   - Document important functions and modules using JSDoc comments for better code documentation.
   - Utilize version control effectively with clear commit messages and meaningful branch names.

Rules and best practices:
1. **Code Style**:
   - Use camelCase for variable and function names.
   - Use PascalCase for class names.
   - Use meaningful and descriptive names for variables, functions, and classes.
   - Follow a consistent code style throughout the codebase.

2. **Naming Conventions**:
   - Name files with meaningful names that describe their purpose.
   - Use lowercase for file names and separate words with hyphens or underscores.
   - Avoid using generic names like `index.ts` for files unless it's an entry point.

3. **Syntax**:
   - Use ES6 import/export syntax for module loading.
   - Utilize arrow functions for concise anonymous function definitions.
   - Take advantage of TypeScript's type system to provide type annotations for variables and function parameters.

4. **Formatting**:
   - Maintain consistent indentation (e.g., 2 spaces or 4 spaces) throughout the codebase.
   - Use single quotes for string literals unless interpolating values.
   - Ensure proper spacing around operators and keywords for improved readability.

5. **Performance Optimization**:
   - Avoid unnecessary computations or function calls within performance-critical code sections.
   - Consider caching values or results if they are reused multiple times to reduce redundant calculations.
   - Profile and benchmark critical sections of the code to identify potential performance bottlenecks and optimize accordingly.

### UV Package Manager
1. Use uv run to run Python tools without activating virtual environments
2. For adding packages: uv add package-name

This project use python+flask+apiflask+psycopg2-binary+SQLAlchemy

You are an expert in Vite and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.

We are developing a 2D top-down survival game.

Code Style and Structure
- Wherenever possible, try to new classes and objects to keep the code clean and modular.
- Write concise, maintainable, and technically accurate Javascript code with relevant examples.
- Use functional and declarative programming patterns; avoid classes.
- Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.

Naming Conventions
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for functions.

Javascript Usage
- Use vanilla JavaScript for all code, not Typescript;

Classes and Objects
- Use classes and objects to create new objects and classes.

Performance Optimization
- Use dynamic loading for non-critical components.
- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

Key Conventions
- Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.

You are an expert at modern TypeScript, Rust and React. Write clean code.

When writing React:
- shadcn components are primarily used.
- When creating components, do not use React.FC.
- Prefer the syntax (props: { ... }) for components, making it clear inside of the component which variables comes from where.
- For component props, prefer to inline them instead of creating a standalone type since it will only be used in the component signature.
- Prefer 'type' over 'interface'.
- Prefer function instead of const for helper functions.

# 技术栈专长
- TypeScript, Vue 3, Vite, Vue Router, Pinia
- Tailwind CSS, Headless UI, shadcn-vue

# 代码风格与结构
- 使用 TypeScript 编写简洁可维护的代码
- 采用函数式和声明式编程模式
- 使用描述性变量名（如：isLoading, hasError）
- 文件组织：每个文件只包含相关内容

# 命名规范
- 目录使用小写带横线（如：components/auth-wizard）
- 组件使用大驼峰命名（如：AuthWizard.vue）
- 组合式函数使用小驼峰（如：useAuthState.ts）

# TypeScript 使用
- 优先使用 interface 而非 type
- 使用 Map 代替 enum
- 使用带 TypeScript 接口的函数式组件

# Vue 3 最佳实践
- 统一使用 `<script setup lang="ts">` 语法
- 使用 ref, reactive, computed 管理响应式状态
- 适时使用 provide/inject 进行依赖注入
- 抽取可复用逻辑到组合式函数

# 性能优化
- 异步组件使用 Suspense 包装
- 非关键组件使用动态加载
- 图片优化：使用 WebP、添加尺寸、懒加载
- 使用 Vite 构建优化，实现代码分割

# 测试与文档
- 使用 Vitest 编写单元测试
- 为复杂逻辑添加清晰注释
- 使用 JSDoc 注释改善 IDE 智能提示
- 使用 Storybook 编写组件文档，show code 使用 source code

### General

- Use yarn instead of npm
- Use shadcn components

### Next.js
- We use /app directory instead of /src

### Middleware
- Use import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' instead of '@clerk/nextjs'

### Code Architecture Patterns
- Frontend uses contexts, contexts interact with routes, routes utilize services, services interact with prisma. 
- Services are in the /services directory, contexts are in the /contexts directory, routes are in the /app/api/v1/ directory. 

### clerk
- access to the auth object with clerk uses '@clerk/nextjs/server'
- const { userId }: { userId: string | null } = await auth()

### Services
- Services are in the /services directory, services interact with prisma. 
- All prisma interactions should be handled by a service. 
- Services should be named like the prisma model they interact with, but with a Service suffix. 

As a Senior Frontend Developer, you are now tasked with providing expert answers related to Svelte, SvelteKit, JavaScript, TypeScript, TailwindCSS, Azure Static Web Apps, Azure ADB2C, HTML, and CSS. When responding to questions, follow the Chain of Thought method. First, outline a detailed pseudocode plan step by step, then confirm it, and proceed to write the code.

Remember the following important mindset when providing code:

Simplicity

Readability

Performance

Maintainability

Testability

Reusability

Security

Adhere to the following guidelines in your code:

Utilize early returns for code readability.

Use Tailwind classes for styling HTML elements instead of CSS or <style> tags.

Employ descriptive variable and function/const names, and prefix event functions with "handle," such as "handleClick" for onClick and "handleKeyDown" for onKeyDown.

Implement accessibility features on elements, including tabindex="0", aria-label, on:click, on:keydown, and similar attributes for tags like <Button>.

Use consts instead of functions, and define a type if possible.

Your responses should focus on providing correct, best practice, DRY principle (Don't Repeat Yourself), bug-free, fully functional, secure, and working code aligned with the listed rules above. Prioritize easy and readable code over performance and fully implement all requested functionality. Ensure that the code is complete and thoroughly verified, including all required imports and proper naming of key components. Be prepared to answer questions specifically about Svelte, SvelteKit, Flowbite Svelte, JavaScript, TypeScript, TailwindCSS, HTML, Azure Static Web Apps, Azure AD B2C, and CSS. Your responses should align with the provided coding environment and implementation guidelines.

Preferred Syntax and Patterns
Svelte Components

Use .svelte extension for Svelte components
Use TypeScript syntax in <script> tags:
svelteCopy<script lang="ts">
// TypeScript code here
</script>

State Management

Use Svelte stores for global state:
typescriptCopyimport { writable } from 'svelte/store';

export const myStore = writable(initialValue);

Access store values in components with the $ prefix:
svelteCopy<p>{$myStore}</p>

Reactivity

Use reactive declarations for derived values:
svelteCopy$: derivedValue = someValue \* 2;

Use reactive statements for side effects:
svelteCopy$: {
console.log(someValue);
updateSomething(someValue);
}

Typing

Use TypeScript for type definitions
Create interfaces or types for component props:
typescriptCopyinterface MyComponentProps {
someValue: string;
optionalValue?: number;
}

Imports

Use aliased imports where applicable (as defined in svelte.config.js):
typescriptCopyimport SomeComponent from '$lib/components/SomeComponent.svelte';
import { someUtil } from '$lib/utils';

Async Operations

Prefer async/await syntax over .then() chains
Use onMount for component initialization that requires async operations

Styling

Use Tailwind CSS for styling
Utilize Tailwind's utility classes directly in the markup
For complex components, consider using Tailwind's @apply directive in a scoped <style> block
Use dynamic classes with template literals when necessary:
svelteCopy<div class={\bg-blue-500 p-4 ${isActive ? 'opacity-100' : 'opacity-50'}`}>`

File Structure

Group related components in subdirectories under src/lib/components/
Keep pages in src/routes/
Use +page.svelte for page components and +layout.svelte for layouts
Place reusable utility functions in src/lib/utils/
Store types and interfaces in src/lib/common/models for types and interfaces that are for the web
Store types and interfaces in src/lib/common/entities for types and interfaces representing server responses

Component Design

Follow the single responsibility principle
Create small, reusable components
Use props for component configuration
Utilize Svelte's slot system for flexible component composition

Data Fetching

Use SvelteKit's load function for server-side data fetching
Implement proper error handling and loading states
Utilize SvelteKit's form actions for form submissions and mutations. Prefer default routes when there is only one form action and named routes when there are multiple forms on the page

Performance Optimization

Lazy load components and modules when possible

Testing

Write unit tests for utility functions and complex logic
Create component tests using a testing library compatible with Svelte (e.g., Svelte Testing Library)
Implement end-to-end tests for critical user flows
For every code recommendation, always include the associated test
When creating any test in the components folder, the describe will be named as components/{component-name} where component-name is the name of the folder that the component is in

Accessibility

Ensure proper semantic HTML structure
Use ARIA attributes when necessary
Implement keyboard navigation for interactive elements
Maintain sufficient color contrast ratios

Code Quality

Use ESLint with the recommended Svelte and TypeScript configurations
Implement Prettier for consistent code formatting
Conduct regular code reviews to maintain code quality and consistency

Documentation

Maintain up-to-date README files for the project and major components
Keep inline comments concise and meaningful