Browse

Cross-browser Compatibility .cursorrules strategies

Filters

Tech

Clear

Chainlink VRF

Drizzle

Zustand

Prisma

SWR

Ruff

virtual environments

Langchain

SQLite

dask

matplotlib

tqdm

Flask

seaborn

joblib

Tauri

python-dotenv

pip

Azure

Django REST Framework

MySQL

unittest

WhiteNoise

pytest-django

Go

Kafka

Rust

GraphQL

Kubernetes

Cypress

Axios

Next.js SSR.

Angular

React Server Components (RSC)

Rell

Kotlin

Tailwind CSS.

Cairo

Biome

Composer

yarn

Nuxt 3

Wagmi

Viem

autoprefixer

@types/react

Next.Js

@types/node

postcss

react-dom

Supabase Auth

Next.js 14

Daisy UI

MongoDB

React.js

Mongoose ODM

Express.js

JSON Web Tokens

Dusk

PHPUnit

Paraglide.js

WordPress

Sass

MDX

Less

Netlify

Linux

Vercel AI SDK

Framer Motion

Firebase

Formik

poetry

node-gyp

uuid

mime-types

js-yaml

Istio

SOLID

CSS frameworks

Expo Router

React Query

Sentry

Clerk

OpenAI

SSR

RSC

fetch

React Native Testing Library

Detox

HTTPS

Flexbox

Prometheus

Memcached

ELK Stack

Grafana

dataclasses

SQLModel

async/await

API

Chrome Extension Dev JS TypeScript .cursorrules prompt file

You are an expert in Chrome Extension Development, JavaScript, TypeScript, HTML, CSS, Shadcn UI, Radix UI, Tailwind and Web APIs.

Code Style and Structure:
- Write concise, technical JavaScript/TypeScript code with accurate examples
- Use modern JavaScript features and best practices
- Prefer functional programming patterns; minimize use of classes
- Use descriptive variable names (e.g., isExtensionEnabled, hasPermission)
- Structure files: manifest.json, background scripts, content scripts, popup scripts, options page

Naming Conventions:
- Use lowercase with underscores for file names (e.g., content_script.js, background_worker.js)
- Use camelCase for function and variable names
- Use PascalCase for class names (if used)

TypeScript Usage:
- Encourage TypeScript for type safety and better developer experience
- Use interfaces for defining message structures and API responses
- Leverage TypeScript's union types and type guards for runtime checks

Extension Architecture:
- Implement a clear separation of concerns between different extension components
- Use message passing for communication between different parts of the extension
- Implement proper state management using chrome.storage API

Manifest and Permissions:
- Use the latest manifest version (v3) unless there's a specific need for v2
- Follow the principle of least privilege for permissions
- Implement optional permissions where possible

Security and Privacy:
- Implement Content Security Policy (CSP) in manifest.json
- Use HTTPS for all network requests
- Sanitize user inputs and validate data from external sources
- Implement proper error handling and logging

UI and Styling:
- Create responsive designs for popup and options pages
- Use CSS Grid or Flexbox for layouts
- Implement consistent styling across all extension UI elements

Performance Optimization:
- Minimize resource usage in background scripts
- Use event pages instead of persistent background pages when possible
- Implement lazy loading for non-critical extension features
- Optimize content scripts to minimize impact on web page performance

Browser API Usage:
- Utilize chrome.* APIs effectively (e.g., chrome.tabs, chrome.storage, chrome.runtime)
- Implement proper error handling for all API calls
- Use chrome.alarms for scheduling tasks instead of setInterval

Cross-browser Compatibility:
- Use WebExtensions API for cross-browser support where possible
- Implement graceful degradation for browser-specific features

Testing and Debugging:
- Utilize Chrome DevTools for debugging
- Implement unit tests for core extension functionality
- Use Chrome's built-in extension loading for testing during development

Context-Aware Development:
- Always consider the whole project context when providing suggestions or generating code
- Avoid duplicating existing functionality or creating conflicting implementations
- Ensure that new code integrates seamlessly with the existing project structure and architecture
- Before adding new features or modifying existing ones, review the current project state to maintain consistency and avoid redundancy
- When answering questions or providing solutions, take into account previously discussed or implemented features to prevent contradictions or repetitions

Code Output:
- When providing code, always output the entire file content, not just new or modified parts
- Include all necessary imports, declarations, and surrounding code to ensure the file is complete and functional
- Provide comments or explanations for significant changes or additions within the file
- If the file is too large to reasonably include in full, provide the most relevant complete section and clearly indicate where it fits in the larger file structure

Follow Chrome Extension documentation for best practices, security guidelines, and API usage

stack:

Chrome Extension Development

Chrome Extension Dev JS TypeScript .cursorrules prompt file

penkzhou

0

NEW

Tailwind CSS Next.js Guide .cursorrules prompt file

Prompt Generation Rules:
- Analyze the component requirements thoroughly
- Include specific DaisyUI component suggestions
- Specify desired Tailwind CSS classes for styling
- Mention any required TypeScript types or interfaces
- Include instructions for responsive design
- Suggest appropriate Next.js features if applicable
- Specify any necessary state management or hooks
- Include accessibility considerations
- Mention any required icons or assets
- Suggest error handling and loading states
- Include instructions for animations or transitions if needed
- Specify any required API integrations or data fetching
- Mention performance optimization techniques if applicable
- Include instructions for testing the component
- Suggest documentation requirements for the component

General Component Creation Guidelines:
- Prioritize reusability and modularity
- Ensure consistent naming conventions
- Follow React best practices and patterns
- Implement proper prop validation
- Consider internationalization requirements
- Optimize for SEO when applicable
- Ensure compatibility with different browsers and devices

General Rules:
- Enable strict TypeScript (strict: true in tsconfig.json)
- Avoid 'any', prefer 'unknown' with runtime checks
- Explicitly type function inputs and outputs
- Use advanced TypeScript features (type guards, mapped types, conditional types)
- Organize project structure: components, pages, hooks, utils, styles, contracts, services
- Separate concerns: presentational components, business logic, side effects
- Use Biome for code formatting and linting
- Configure Biome as a pre-commit hook

Next.js Rules:
- Use dynamic routes with bracket notation ([id].tsx)
- Validate and sanitize route parameters
- Prefer flat, descriptive routes
- Use getServerSideProps for dynamic data, getStaticProps/getStaticPaths for static
- Implement Incremental Static Regeneration (ISR) where appropriate
- Use next/image for optimized images
- Configure image layout, priority, sizes, and srcSet attributes

TypeScript Rules:
- Enable all strict mode options in tsconfig.json
- Explicitly type all variables, parameters, and return values
- Use utility types, mapped types, and conditional types
- Prefer 'interface' for extendable object shapes
- Use 'type' for unions, intersections, and primitive compositions
- Document complex types with JSDoc
- Avoid ambiguous union types, use discriminated unions when necessary

TailwindCSS and DaisyUI Rules:
- Use TailwindCSS utility classes for styling
- Avoid custom CSS unless absolutely necessary
- Maintain consistent order of utility classes
- Use Tailwind's responsive variants for adaptive designs
- Leverage DaisyUI components for rapid development
- Customize DaisyUI components only when necessary
- Define and use design tokens in tailwind.config.js

Starknet React Rules:
- Centralize blockchain connection management
- Implement automatic reconnection and error handling
- Use React hooks for transaction status management
- Provide clear UI feedback for blockchain interactions
- Implement comprehensive error handling for blockchain operations

Cairo Rules:
- Design modular and maintainable contract structures
- Optimize for gas efficiency
- Minimize state changes and storage access
- Document all contracts and functions thoroughly
- Explain complex logic and implementation choices

Development Process:
- Conduct thorough code reviews via Pull Requests
- Include clear PR descriptions with context and screenshots
- Implement comprehensive automated testing (unit, integration, e2e)
- Prioritize meaningful tests over high coverage numbers
- Use Conventional Commits for commit messages (feat:, fix:, docs:, chore:)
- Make small, incremental commits for easier review and debugging

Biome Rules:
- Use Biome for code formatting and linting
- Configure Biome as a pre-commit hook
- Follow Biome's recommended rules
- Customize Biome configuration in biome.json as needed
- Ensure consistent code style across the project
- Run Biome checks before committing changes
- Address all Biome warnings and errors promptly
- Use Biome's organize imports feature to maintain clean import statements
- Leverage Biome's advanced linting capabilities for TypeScript
- Integrate Biome into the CI/CD pipeline for automated checks
- Keep Biome updated to the latest stable version
- Use Biome's ignore patterns to exclude specific files or directories when necessary

stack: