Home / Cursor rules / Typescript Shadcn Ui Nextjs Cursorrules Prompt Fil
Typescript Shadcn Ui Nextjs Cursorrules Prompt Fil
Cursor rules for TypeScript development with shadcn/ui and Next.js integration.
Cursor rules (.mdc)Public domain (CC0)
–unranked
Install
mkdir -p .cursor/rules && curl -sL https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/b044f956f021b6e8877f16781bcfc466a6a120e9/rules/typescript-shadcn-ui-nextjs-cursorrules-prompt-fil.mdc -o .cursor/rules/typescript-shadcn-ui-nextjs-cursorrules-prompt-fil.mdcDownloads the file at commit b044f956f021 into .cursor/rules/.
To remove it later:
rm .cursor/rules/typescript-shadcn-ui-nextjs-cursorrules-prompt-fil.mdcContext cost: ≈535 tokens when used.
Rules file
--- description: "Cursor rules for TypeScript development with shadcn/ui and Next.js integration." globs: **/* alwaysApply: false --- 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 Error Handling and Validation: - Prioritize error handling: handle errors and edge cases early - Use early returns and guard clauses - Implement proper error logging and user-friendly messages - Use Zod for form validation - Model expected errors as return values in Server Actions - Use error boundaries for unexpected errors UI and Styling: - Use Shadcn UI, Radix, and Tailwind Aria for components and styling - Implement responsive design with Tailwind CSS; use a mobile-first approach 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 Data Fetching, Rendering, and Routing
Security
Scanned Nov 4, 2026 at commit b044f956f021, with Cisco's open-source skill-scanner.
None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.
A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan