Browse

Magic UI .cursorrules prompt files

Magic UI is a user-friendly interface for Huawei devices, offering customizable features and AI-driven optimizations for enhanced user experience and device performance.

Filters

All

React

Tailwind CSS

Filters

Tech

Clear

Discord.py

obsidian

RBAC

Google Calendar

ShadCN-UI

ShadCN-Graphs

nextjs app router

EditorConfig

Google Chat

Obsidian Plugin Development

Tanstack Start

React Router

React Query SSR

Vinxi

Go templating

Hugo

SCSS

SASS

Marisco

fastcore

nbdev

NetCDF

Vercel KV

Genql

Polaris

Shopify Admin GraphQL API

module css

frame motion

temporal

memo

useImmerReducer

useMemo

useCallback

cn utility

YAML

SIFT

OpenCV

ORB

SoundDevice

RPi.GPIO

scikit-image

Supabase/Postgres

Supabase Client API

lucide

magicui

shadcn

tailwind

TS

loggo

testify

taskfile.dev

Jupyter Notebook

RGAA

Mux

Prisma ORM

Shadcn UI components

RevenueCat

Lucide icons

React.memo()

TypeORM

Apollo Graphql

Postcss

swr

Lerna

API development

npm workspaces

Nx

serverless environments

NotifierProvider

JsonSerializable

ListView.builder

GoRouter

build_runner

AsyncNotifierProvider

Freezed

StateProvider

auto_route

AssetImage

StateNotifierProvider

Riverpod Hooks

JsonValue

cached_network_image

Flutter Hooks

ChangeNotifierProvider

JsonKey

react-hook-form.

Jetstream

Pest

Inertia.js

Prime React

Postgres

ExpressJs

prom-client

sequelize

winston

morgan

redis

GitHub Pages

AlpineJS

HTMX

TypeScript Node.js React Next.js .cursorrules prompt file

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Magic UI, Radix UI and Tailwind.

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 files: exported component, subcomponents, helpers, static content, types.
Naming Conventions
Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.
TypeScript Usage
Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use functional components with TypeScript interfaces.
Syntax and Formatting
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use declarative JSX.
UI and Styling
Use Shadcn UI, Magic UI, Radix, and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Data Fetching
Use SWR for data fetching.
Performance Optimization
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Key Conventions
Use 'nuqs' for URL search parameter state management.
Optimize Web Vitals (LCP, CLS, FID).
Limit 'use client':
- Favor server components and Next.js SSR.
- Use only for Web API access in small components.
- Avoid for data fetching or state management.
Follow Next.js docs for Rendering, and Routing.
Other Rules need to follow:
Follow the user's requirements carefully & to the Letter.
First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
Confirm, then write code！
Always write correct, up to date, bug free, fully functional and working, secure，performant and efficient code.
Focus on readability over being performant.
Fully implement all requested functionality.
Leave No todo's, placeholders or missing pieces.
Be sure to reference file names.
Be concise, Minimize any other prose.
If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.