Awesome Cursor Rules Collection

Filter by:

Showing 1141-1152 of 2626 matches

JavaScript

You are an expert in JavaScript and Astro framework for scalable web development.

Key Principles

- Write concise, technical responses with accurate Astro examples.
- Leverage Astro's partial hydration and multi-framework support effectively.
- Prioritize static generation and minimal JavaScript for optimal performance.
- Use descriptive variable names and follow Astro's naming conventions.
- Organize files using Astro's file-based routing system.

Astro Project Structure

- Use the recommended Astro project structure:
  - src/
    - components/
    - layouts/
    - pages/
    - styles/
  - public/
  - astro.config.mjs

Component Development

- Create .astro files for Astro components.
- Use framework-specific components (React, Vue, Svelte) when necessary.
- Implement proper component composition and reusability.
- Use Astro's component props for data passing.
- Leverage Astro's built-in components like <Markdown /> when appropriate.

Routing and Pages

- Utilize Astro's file-based routing system in the src/pages/ directory.
- Implement dynamic routes using [...slug].astro syntax.
- Use getStaticPaths() for generating static pages with dynamic routes.
- Implement proper 404 handling with a 404.astro page.

Content Management

- Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
- Leverage Astro's built-in support for frontmatter in Markdown files.
- Implement content collections for organized content management.

Styling

- Use Astro's scoped styling with <style> tags in .astro files.
- Leverage global styles when necessary, importing them in layouts.
- Use SCSS and BEM for styling.
- Utilize CSS preprocessing with Sass or Less if required.
- Implement responsive design using CSS custom properties and media queries.

Performance Optimization

- Minimize use of client-side JavaScript; leverage Astro's static generation.
- Use the client:\* directives judiciously for partial hydration:
  - client:load for immediately needed interactivity
  - client:idle for non-critical interactivity
  - client:visible for components that should hydrate when visible
- Implement proper lazy loading for images and other assets.
- Utilize Astro's built-in asset optimization features.

Data Fetching

- Use Astro.props for passing data to components.
- Implement getStaticPaths() for fetching data at build time.
- Use Astro.glob() for working with local files efficiently.
- Implement proper error handling for data fetching operations.

SEO and Meta Tags

- Use Astro's <head> tag for adding meta information.
- Implement canonical URLs for proper SEO.
- Use the <SEO> component pattern for reusable SEO setups.

Integrations and Plugins

- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
- Implement proper configuration for integrations in astro.config.mjs.
- Use Astro's official integrations when available for better compatibility.

Build and Deployment

- Optimize the build process using Astro's build command.
- Implement proper environment variable handling for different environments.
- Use static hosting platforms compatible with Astro (Netlify, Vercel, etc.).
- Implement proper CI/CD pipelines for automated builds and deployments.

Styling with SCSS and BEM
// 1. Use nesting wisely
// Stick to 3-4 levels max to keep your code maintainable
.block {
&\_\_element {
&--modifier {
// Avoid nesting further
}
}
}

2. Follow BEM naming conventions - Use clear, descriptive names for blocks, elements, and modifiers
   .card {
   &\_\_title {
   // Styles for card title
   }

&--featured {
// Styles for featured card
}
}

3. Use single-responsibility principle - Each class should have a single, well-defined purpose. Avoid catch-all classes.

// Good
.button {
// Base button styles
}
.button--large {
// Large button styles
}

// Avoid
.button-large-red-uppercase {
// Too specific and inflexible
}

Testing

- Implement unit tests with Vitest and React Testing Library.

Accessibility

- Ensure proper semantic HTML structure in Astro components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.

Key Conventions

1. Follow Astro's Style Guide for consistent code formatting.
2. Implement proper error handling and logging.
3. Leverage Astro's RSS feed generation for content-heavy sites.
4. Use Astro's Image component for optimized image delivery.

Performance Metrics

- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
- Use Lighthouse and WebPageTest for performance auditing.
- Implement performance budgets and monitoring.

Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.

astro

golang

java

javascript

less

nestjs

netlify

react

+8 more

First seen in:

przeprogramowani/ai-workshops

015

Used in 1 repository

TypeScript

You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria.

Key Principles:
- Write concise, technical responses with accurate TypeScript examples.
- Use functional, declarative programming. Avoid classes.
- Prefer iteration and modularization over duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.
- Use the Receive an Object, Return an Object (RORO) pattern.

JavaScript/TypeScript:
- Use "function" keyword for pure functions. Omit semicolons.
- Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
- File structure: Exported component, subcomponents, helpers, static content, types.
- Avoid unnecessary curly braces in conditional statements.
- For single-line statements in conditionals, omit curly braces.
- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
- Prioritize error handling and edge cases:
  - Handle errors and edge cases at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Place the happy path last in the function for improved readability.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Use guard clauses to handle preconditions and invalid states early.
  - Implement proper error logging and user-friendly error messages.
  - Consider using custom error types or error factories for consistent error handling.

Dependencies:
- Next.js 14 App Router
- Wagmi v2
- Viem v2

React/Next.js:
- Use functional components and TypeScript interfaces.
- Use declarative JSX.
- Use function, not const, for components.
- Use Shadcn UI, Radix, and Tailwind Aria for components and styling.
- Implement responsive design with Tailwind CSS.
- Use mobile-first approach for responsive design.
- Place static content and interfaces at file end.
- Use content variables for static content outside render functions.
- Minimize 'use client', 'useEffect', and 'setState'. Favor RSC.
- Use Zod for form validation.
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: WebP format, size data, lazy loading.
- Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.
- Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.
- Use useActionState with react-hook-form for form validation.
- Code in services/ dir always throw user-friendly errors that tanStackQuery can catch and show to the user.
- Use next-safe-action for all server actions:
  - Handle errors gracefully and return appropriate responses using logAppErr.
  - Implement consistent error handling and success responses using ActionResult
  - Always use ok() from 'neverthrow' for success responses.
  - Example:
    ```typescript
    'use server'

    import type { ActionResult } from '@/app/actions/actions.d.ts'
    import { logAppErr } from '@/lib/errors/index'
    import { createSupabaseServerClient } from '@/services/supabase'
    import { type Tables, presaleDepositInsertSchema } from '@repo/supabase'
    import { ok } from 'neverthrow'
    import { createSafeActionClient } from 'next-safe-action'

    //Stores a deposit intent in the database, creating a pending transaction and a deposit record.
    export const savePresaleDepositIntent = createSafeActionClient()
      .schema(presaleDepositInsertSchema)
      .action(
        async ({
          parsedInput: transfer,
        }): Promise<ActionResult<Tables<'presale_deposit'>>> => {
          try {
            const supabase = await createSupabaseServerClient()

            const transaction = await supabase
              .from('transaction')
              .upsert(
                {
                  hash: transfer.deposit_hash,
                  trx_type: 'presale_deposit',
                  ...transfer,
                },
                { onConflict: 'hash' },
              )
              .select()

            if (transaction.error)
              return logAppErr('DB_OP_FAILURE', transaction.error)

            return ok(deposit.data[0])
          } catch (error) {
            return logAppErr('UNEXPECTED_ERROR', error)
          }
        },
      )

    ```


Key Conventions:
1. Rely on Next.js App Router for state changes.
2. Prioritize Web Vitals (LCP, CLS, FID).
3. Minimize 'use client' usage:
   - Prefer server components and Next.js SSR features.
   - Use 'use client' only for Web API access in small components.
   - Avoid using 'use client' for data fetching or state management.

Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices.

css

dockerfile

html

java

javascript

nestjs

next.js

plpgsql

+10 more

First seen in:

bitcashorg/smartsale

173

Used in 1 repository

Java

You are an expert in Java programming, Spring Boot, Spring Framework, Maven, JUnit, and related Java technologies.

Code Style and Structure

- Write clean, efficient, and well-documented Java code with accurate Spring Boot examples.
- Use Spring Boot best practices and conventions throughout your code.
- Implement RESTful API design patterns when creating web services.
- Use descriptive method and variable names following camelCase convention.
- Structure Spring Boot applications: controllers, services, repositories, models, configurations.

Spring Boot Specifics

- Use Spring Boot starters for quick project setup and dependency management.
- Implement proper use of annotations (e.g., @SpringBootApplication, @RestController, @Service).
- Utilize Spring Boot's auto-configuration features effectively.
- Implement proper exception handling using @ControllerAdvice and @ExceptionHandler.

Naming Conventions

- Use PascalCase for class names (e.g., UserController, OrderService).
- Use camelCase for method and variable names (e.g., findUserById, isOrderValid).
- Use ALL_CAPS for constants (e.g., MAX_RETRY_ATTEMPTS, DEFAULT_PAGE_SIZE).

Java and Spring Boot Usage

- Use Java 17 or later features when applicable (e.g., records, sealed classes, pattern matching).
- Leverage Spring Boot 3.x features and best practices.
- Use Spring Data JPA for database operations when applicable.
- Implement proper validation using Bean Validation (e.g., @Valid, custom validators).

Configuration and Properties

- Use application.properties or application.yml for configuration.
- Implement environment-specific configurations using Spring Profiles.
- Use @ConfigurationProperties for type-safe configuration properties.

Dependency Injection and IoC

- Use constructor injection over field injection for better testability.
- Leverage Spring's IoC container for managing bean lifecycles.

Testing

- Write unit tests using JUnit 5 and Spring Boot Test.
- Use MockMvc for testing web layers.
- Implement integration tests using @SpringBootTest.
- Use @DataJpaTest for repository layer tests.

Performance and Scalability

- Implement caching strategies using Spring Cache abstraction.
- Use async processing with @Async for non-blocking operations.
- Implement proper database indexing and query optimization.

Security

- Implement Spring Security for authentication and authorization.
- Use proper password encoding (e.g., BCrypt).
- Implement CORS configuration when necessary.

Logging and Monitoring

- Use SLF4J with Logback for logging.
- Implement proper log levels (ERROR, WARN, INFO, DEBUG).
- Use Spring Boot Actuator for application monitoring and metrics.

API Documentation

- Use Springdoc OpenAPI (formerly Swagger) for API documentation.

Data Access and ORM

- Use Spring Data JPA for database operations.
- Implement proper entity relationships and cascading.
- Use database migrations with tools like Flyway or Liquibase.

Build and Deployment

- Use Maven for dependency management and build processes.
- Implement proper profiles for different environments (dev, test, prod).
- Use Docker for containerization if applicable.

Follow best practices for:

- RESTful API design (proper use of HTTP methods, status codes, etc.).
- Microservices architecture (if applicable).
- Asynchronous processing using Spring's @Async or reactive programming with Spring WebFlux.

Adhere to SOLID principles and maintain high cohesion and low coupling in your Spring Boot application design.

docker

java

react

rest-api

solidjs

spring

First seen in:

kiriyadee/construction_managment

Used in 1 repository

JavaScript

You are an expert in Vite, React, JavaScript, ShadCn, Auth0, axios, lucide-react, Stream chat, Framer motion, face-api.js, tailwindcss, radixui, aceternity-ui, Express.js, Node.js, Mongoose, MongoDB, and OpenAI.

Key Principles
- Write concise, technical responses with accurate JavaScript examples.
- Use functional, declarative programming. Avoid classes.
- Prefer iteration and modularization over duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
- Use lowercase with dashes for directories (e.g., components/auth-modal).
- Favor named exports for components.
- Use the Receive an Object, Return an Object (RORO) pattern.

JavaScript
- Use "function" keyword for pure functions. Use semicolons.
- File structure: Exported component, subcomponents, helpers, static content.
- Avoid unnecessary curly braces in conditional statements.
- For single-line statements in conditionals, omit curly braces.
- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething();).

Error Handling and Validation
- Prioritize error handling and edge cases:
  - Handle errors and edge cases at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Place the happy path last in the function for improved readability.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Use guard clauses to handle preconditions and invalid states early.
  - Implement proper error logging and user-friendly error messages.
  - Consider using custom error types or error factories for consistent error handling.

React/Vite
- Use functional components.
- Use declarative JSX.
- Use function, not const, for components.
- Use ShadCn, Radix UI, and Aceternity UI for components and styling.
- Implement responsive design with Tailwind CSS.
- Use mobile-first approach for responsive design.
- Place static content at file end.
- Use content variables for static content outside render functions.
- Use Auth0 for authentication.
- Use axios for API requests.
- Use lucide-react for icons.
- Implement Stream chat for real-time messaging.
- Use Framer Motion for animations.
- Utilize face-api.js for facial recognition features.

Backend (Express.js/Node.js)
- Use Express.js for routing and middleware.
- Implement RESTful API design principles.
- Use Mongoose for MongoDB object modeling.
- Implement proper error handling middleware.
- Use environment variables for configuration.
- Implement input validation and sanitization.
- Use async/await for asynchronous operations.

MongoDB/Mongoose
- Design schemas with proper data types and validation.
- Use indexes for frequently queried fields.
- Implement data pagination for large datasets.
- Use aggregation pipelines for complex queries.

OpenAI Integration
- Implement proper error handling for API calls.
- Use streaming responses when appropriate.
- Implement rate limiting and usage tracking.

Key Conventions
1. Use Vite for fast development and optimized builds.
2. Prioritize Web Vitals (LCP, CLS, FID).
3. Implement proper state management (e.g., React Context, Redux).
4. Use proper security measures (e.g., CORS, helmet for Express).
5. Implement efficient data fetching and caching strategies.

Refer to the documentation of each technology for best practices and up-to-date information.

css

emotion

express.js

golang

html

java

javascript

mongodb

+10 more

First seen in:

SrijaAdhya12/prisma-ai

Used in 1 repository

Python

e-ticaret websitelerinden belirtilen mağazalardan belirtilen ürünlerini ve yorumlarını çekip bir veritabanında tutan bir proje.
projem bir python projesi. verileri directus sisteminde tutuyorum. 
bu verileri çekmek için python ile yazılmış py_directus diye bir paket kullanıyorum. bu paketin dökümantasyonuna buradan ulaşabilirsiniz: https://panos-stavrianos.github.io/py-directus/cheat_sheet/
directus sistemindeki collectionlardan veri çekip, veri yazıyorum.

dockerfile

javascript

python

typescript

First seen in:

yavuz/review-docker-system

Used in 1 repository

TypeScript

Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.

Project Context
这是一个实时监控多个加密货币交易所价格的Web应用系统。通过整合多个主流交易所（包括Binance、OKEx和Bybit）的API，为用户提供实时的加密货币价格比较和监控功能。

## 主要功能
- 实时价格监控
- 多交易所价格比较
- 支持现货和永续合约市场
- 搜索和筛选功能
- 分页显示
- 自动刷新（10秒间隔）

Code Style and Structure
Write concise, technical TypeScript code with accurate examples
Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure repository files as follows:
coin/
├── src/                # 源代码目录
│   ├── app/           # Next.js应用主目录
│   ├── types/         # TypeScript类型定义
│   └── ...
├── data/              # 数据存储目录
├── public/            # 静态资源
└── config/            # 配置文件
Tech Stack
- **前端框架**：Next.js (最新版本)
- **开发语言**：TypeScript
- **UI框架**：Tailwind CSS
- **数据库**：SQLite3 (使用 better-sqlite3)
- **API集成**：ccxt (加密货币交易所集成库)
- **HTTP客户端**：axios
Naming Conventions
Use lowercase  for directories (e.g., api/binance)
Favor named exports for components and utilities
Use PascalCase for component files (e.g., PriceCard.tsx)
Use camelCase with slash separators for utility files (e.g., data-sync-service.ts)
TypeScript Usage
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use const objects with 'as const' assertion
Use functional components with TypeScript interfaces
Define strict types for message passing between different parts of the extension
Use absolute imports for all files @/...
Avoid try/catch blocks unless there's good reason to translate or handle error in that abstraction
Use explicit return types for all functions
Use Manifest V3 standards
Implement proper message passing between components:
interface MessagePayload {
  type: string;
  data: unknown;
}
Implement proper error boundaries and fallbacks
Use lib/storage for storage related logic
For the async injected scripts in content/,
they must not close over variables from the outer scope
they must not use imported functions from the outer scope
they must have wrapped error handling so the error message is returned to the caller
State Management
Use React Context for global state when needed
Implement proper cleanup in useEffect hooks
Syntax and Formatting
Use "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals
Use declarative JSX
Implement proper TypeScript discriminated unions for message types
UI and Styling
Use Shadcn UI and Radix for components
use npx shadcn@latest add <component-name> to add new shadcn components
Implement Tailwind CSS for styling
Consider extension-specific constraints (popup dimensions, permissions)
When adding new shadcn component, document the installation command
Error Handling
Implement proper error boundaries
Log errors appropriately for debugging
Provide user-friendly error messages
Handle network failures gracefully
Testing
Write unit tests for utilities and components
Implement E2E tests for critical flows
Test memory usage and performance
Security
Implement Content Security Policy
Sanitize user inputs
Handle sensitive data properly
Implement proper CORS handling
Git Usage
Commit Message Prefixes:

"fix:" for bug fixes
"feat:" for new features
"perf:" for performance improvements
"docs:" for documentation changes
"style:" for formatting changes
"refactor:" for code refactoring
"test:" for adding missing tests
"chore:" for maintenance tasks
Rules:

Use lowercase for commit messages
Keep the summary line concise
Include description for non-obvious changes
Reference issue numbers when applicable
Documentation
Maintain clear README with setup instructions
Document API interactions and data flows
Don't include comments unless it's for complex logic
Document permission requirements
Development Workflow
Use proper version control
Implement proper code review process
Test in multiple environments
Follow semantic versioning for releases
Maintain changelog

css

golang

javascript

less

next.js

radix-ui

react

shadcn/ui

+3 more

First seen in:

t86/coin

Used in 1 repository

Svelte

You are a SvelteKit development expert. When writing or modifying code, follow these strict guidelines:

PROJECT SPECIFICATIONS:
- SvelteKit 5 project with TypeScript
- SvelteKit is already installed
- PWA-enabled with network-first caching strategy
- LocalStorage for data persistence
- Atomic Design pattern for components
- CSS-based styling (no Tailwind) with scoped component styles
- Minimize external dependencies - use vanilla JavaScript and built-in browser APIs when possible

CODING STANDARDS:
1. Component Structure:
- Place components in src/lib/components/{atomic-level}
- Follow atomic design hierarchy (atoms → molecules → organisms → templates → pages)
- Implement single responsibility principle
- Include proper props validation
- Add ARIA labels and semantic HTML

2. Styling:
- Use CSS variables from src/app.css
- Implement scoped styles for components
- Ensure responsive design
- Follow accessibility guidelines
- Use the established color system and typography variables

3. Best Practices:
- Implement error boundaries
- Include loading states
- Add form validation where needed
- Optimize for SEO
- Use code splitting when appropriate
- Implement proper event handling
- Follow PWA best practices

4. File Structure:
- Routes in src/routes
- Components in src/lib/components
- Utilities in src/lib/utils
- Stores in src/lib/stores
- Database operations in src/lib/db
- Static assets in src/static

When writing code:
1. Always include comments explaining complex logic
2. Implement proper error handling
3. Consider offline support requirements
4. Follow responsive design principles
5. Ensure accessibility compliance
6. Use proper state management patterns
7. Implement performance optimizations

For each component:
1. Include proper prop validation
2. Add meaningful comments
3. Implement error boundaries where needed
4. Include loading states
5. Add appropriate ARIA labels
6. Ensure responsive behavior
7. Include scoped styles

Output format:
- Provide clear code comments
- Include usage examples
- Explain any complex logic
- Note any dependencies required

css

html

java

javascript

svelte

tailwindcss

typescript

First seen in:

wavesforthemasses/emoto

Used in 1 repository

Python

# Cursor Rules for Bash Scripts


## Rule 1: Update README.md
- **Files**: [README.md]
- **Update File**: bash/README.md
- **Message**: "Update README.md in simplest format with table of latest script with .sh extension, no more information"

## Rule 2: Script Header Documentation
- **Files**: [**/*.sh]
- **Message**: "Every bash script must include a header with:
  - Script purpose
  - Usage instructions
  - Author information with this format [Muhammad Ardivan] ([muhammad.a.s.nugroho@gdplabs.id])
  - Dependencies
  - Date created/modified with current date in this format DD-MM-YYYY"

## Rule 3: Error Handling
- **Files**: [**/*.sh]
- **Message**: "Implement proper error handling:
  - Use set -e for exit on error
  - Use set -u for undefined variables
  - Include trap commands for cleanup"

## Rule 3: Script Permissions
- **Files**: [**/*.sh]
- **Message**: "Ensure correct script permissions:
  - Execute permission (chmod +x) for runnable scripts
  - Document any special permission requirements"

## Rule 4: Code Style
- **Files**: [**/*.sh]
- **Message**: "Follow bash scripting best practices:
  - Use shellcheck for linting
  - Use meaningful variable names
  - Add comments for complex logic
  - Use functions for reusable code"

## Rule 5: Environment Variables
- **Files**: [**/*.sh]
- **Message**: "Document and validate environment variables:
  - List required environment variables
  - Provide example .env file if needed
  - Validate variables at script start

python

shell

First seen in:

muhammad-asn/cursor-code-editor-explore

Used in 1 repository

TypeScript

I want to develop a NextJS v14 project in TypeScript.
I want to write my components with re-usable compound component approach.
This project must be developed with Zod, React Hook Form, TailwindCSS, shadcn/ui, and react query libraries.
Sustainability, maintainability and sticking to the design pattern is very important for me.
I want to use NextAuth v4 for authentication.
I want to use NextJS server actions for server side operations.
I want to use NextJS server components for server side rendering.
I want to use NextJS server actions for server side operations.
I want to use NextJS server components for server side rendering.
I want to use NextJS server actions for server side operations.
I want to use NextJS server components for server side rendering.

css

javascript

next.js

nextauth

react

shadcn/ui

tailwindcss

typescript

First seen in:

smrsln/NextJS-Ecommerce

Used in 1 repository

TypeScript

We are building a Blind Test game as a web application. Users can create a game session, then share the link with friends, who join by entering their username. The game’s flow should be inspired by kahoot.com:

1. **Game Creation & Sharing**

   - A “host” creates a new game session and selects a Spotify playlist to serve as the source of questions.
   - Once the session is created, a link is generated for players to join.
   - Players click the link, enter their username, and are registered for the session.

2. **Gameplay Mechanics**

   - The host starts the game, and a snippet of a song (from the chosen Spotify playlist) is played.
   - Each player has **X seconds** to guess the song. The longer they wait to answer, the fewer points they receive.
   - After each track, players can see their scores. The process repeats until the playlist segment or question set is complete.

3. **Technologies & Requirements**

   - **React (with Vite)**: Use a clean, modular structure.
   - **TypeScript**: Strict typing for reliable, maintainable code.
   - **Supabase**: Database & authentication in the back end.
   - **Spotify API**: Fetch and play song snippets for the blind test.
   - **Tailwind CSS**: Rapid UI styling.
   - **shadcn/ui**: UI components library for consistent styling and design.
   - **pnpm**: Package manager.
   - **zod**: Schema validation for form inputs and API responses.
   - **Tanstack**: Use Tanstack Query for data fetching and caching, Tanstack Router for navigation, Tanstack Form for form handling, ...
   - Follow best practices for folder structure, code style, and accessibility.

4. **Code & Quality Expectations**

   - Organize code into reusable React components.
   - Use Tailwind utility classes in combination with shadcn/ui components.
   - Validate all incoming/outgoing data with zod.
   - Ensure the project is built and run via `pnpm` scripts (e.g., `pnpm install`, `pnpm dev`, etc.).
   - Make sure the app is fully responsive and user-friendly.

5. **Deliverables**

   - A functioning web application where multiple players can join a game and compete in a timed “name that tune” style blind test.
   - Clean, typed, and tested code across the entire stack.

6. **Code Style & Naming Conventions**
   - All file names must follow kebab-case naming convention (e.g., `my-component.tsx`, `use-session.ts`).
   - Follow ESLint rules strictly for consistent code style and quality.
   - Run ESLint checks before committing code to ensure compliance.
   - Fix all ESLint warnings and errors before merging changes.

css

eslint

golang

html

javascript

npm

plpgsql

pnpm

+6 more

First seen in:

suiramdev/blindtest

Used in 1 repository

JavaScript

- don't use React
- don't do JS compilation
- don't use node_modules
- only import in head

html

javascript

react

First seen in:

h8rry/intuition

Used in 1 repository

TypeScript

Here are some recommended best practices for working with this code:

Code Style and Structure:
- Use TypeScript for type safety and tooling
- Structure code into small, single-purpose functions
- Prefer async/await over promises for async logic
- Use JSX for declarative UI code

Naming Conventions: 
- Use camelCase for variable and function names
- Use PascalCase for component names
- Name functions and variables based on their purpose

TypeScript Usage:
- Annotate function parameters and returns with types 
- Use interfaces and types for data models
- Enable strict mode for compile-time checks

Syntax and Formatting:  
- Use Prettier to auto-format code
- Favor single quotes for strings
- Use semicolons at ends of statements  

UI and Styling:
- Use CSS Modules for component-scoped styles
- Prefer styled-components over plain CSS
- Use UI library like Material UI for components

Performance Optimization:  
- Lazy load routes and components 
- Use memoization for expensive functions
- Check for unnecessary re-renders with React.memo

Key Conventions:
- Follow Hono conventions for routing and controllers
- Use bun for bundling and deployment
- Enable source maps for debugging  

Let me know if you need any clarification or have additional questions!

bun

prettier

react

styled-components

typescript

First seen in:

itsdillon/readmewriter-example

Used in 1 repository