Browse

UI Styling .cursorrules strategies

Filters

Tech

Clear

@ethsign/sp-sdk

PostCSS

ethers.js

CSS modules

C

Javascript

Torii

Sozo

Katana

blockchain technology

Starknet

ECS

Dojo Framework

AllowedMethodsEnforcer

TimestampEnforcer

delegator-core-viem

@codefi/delegator-core-viem

IdEnforcer

ValueLteEnforcer

AllowedTargetsEnforcer

BlockNumberEnforcer

NonceEnforcer

LimitedCallsEnforcer

ICaveatEnforcer

NativePaidEnforcer

Ethereum Virtual Machine

IERC721

solidity contracts

SomeContract

DeployedEnforcer

ERC20BalanceGteEnforcer

AllowedCalldataEnforcer

ERC20TransferAmountEnforcer

CaveatEnforcer

solidity

MetaMask Delegation Toolkit

ERC-4337

Supabase SDK

ASCII

SwiftUI

Swift

$bindable

$effect

$derived

$host

Snippets

$props

$state

$inspect

`createRawSnippet`

Nuxt UI Pro

Nuxt UI

Zunder UI

Unity 2021.3.18f1

C#

lambda expressions

SQL injection

Java reflection

Java collections

ExecutorService

streams

@FunctionalInterface

Javadoc

diamond operator (<>)

Optional

cross-site scripting

Log4j

CountDownLatch

Java concurrency utilities

Windows

MacOS

Vuejs

shadcn/u

ESModule

Anthropic APIs

NodeJS

Plain JS

Express

Remix

Yoga

Pothos

Pulumi

PandaCSS

VueMacroes

@testing-library/vue

Tiptap

@faker-js/faker

@tool-belt/type-predicates

Reactivity transform

vitest

Ollama

llama-index

langchain

WebPageTest

11ty

eleventy

Grid

LangGraph

Tremor

LangChain

Optimize TypeScript React Tailwind .cursorrules prompt file

You are an expert in TypeScript, React, Shadcn UI, Tailwind, Nuqs, Vitest, and Playwright.

Code Style and Structure

Write concise, functional TypeScript code with clear examples.
Prefer functional and declarative programming; avoid classes.
Prioritize modularization and iteration over duplication.
Use descriptive, self-explanatory variable names, particularly for boolean states (e.g., "isLoading", "hasError").
Organize files with a logical structure: components, subcomponents, helpers, static content, and types.

Naming Conventions

Use kebab-case for file and directory names (e.g., "components/auth-wizard.tsx").
Favor named exports for components and utilities.

TypeScript Guidelines

Type everything, including function parameters and return values.
Use types over interfaces for object structures.
Avoid any, unknown, and type assertions like "as"; instead, define proper types.
Avoid enums, using objects or maps instead.

Syntax and Formatting

Prefer the "function" keyword for all functions.
Use concise, declarative JSX for components.
Avoid unnecessary curly braces in conditionals; simplify statements where appropriate.
Follow the mobile-first approach when implementing responsive design with Tailwind CSS.

UI and Styling

Use Shadcn UI, and Tailwind for building and styling components.
Ensure UI components are responsive and consistent with Tailwind.

React Best Practices

Minimize the use of 'use client', useEffect, and setState; prioritize server-side logic where possible.
When necessary, use Nuqs for managing URL search parameters.
Add loading and error states to all data-fetching components.

Testing

Write unit tests using Vitest for each component, ensuring they cover edge cases.
Use Playwright for end-to-end tests, validating key user flows.
Follow the Arrange-Act-Assert (AAA) convention in all tests.

Performance and Optimization

Use dynamic loading and lazy loading for images and non-essential components.
Optimize assets: use WebP for images and lazy load large media.
Focus on reducing render times and Web Vitals (LCP, CLS, FID).

Security and Error Handling

Implement strong error handling with meaningful error messages and logging.
Review for potential security vulnerabilities in all code, especially around user inputs and state management.

stack: