About .cursorrules prompt file
What you can build
- Full-Stack Developer Tool Suite:
- A comprehensive full-stack development toolkit leveraging TypeScript, Node.js, Next.js, and Expo. This suite can include a boilerplate generator with pre-configured integrations like tRPC for API calls, Shadcn UI and Radix for UI components, and Tailwind for styling. It can come with Expo Router navigation and error handling utilities using Sentry.
- Mobile App Starter Kit:
- A starter kit for building mobile applications with Expo, utilizing NativeWind for styling, Lucide icons, and Expo notifications. The kit can offer pre-set configurations for authentication via Clerk and data fetching with Tanstack Query.
- Responsive Website Template Generator:
- A tool that generates responsive website templates with Tailwind CSS, implementing Shadcn UI, Radix components, and dynamic loading to enhance performance across devices. It also includes Server Actions for robust error handling and validation with Zod.
- Cross-Platform Authentication Module:
- A service providing robust authentication solutions with Clerk, seamlessly integrated for both Next.js and Expo applications, allowing developers to set up secure authentication flows rapidly.
- Type-Safe API Development Service:
- A platform allowing developers to design and test type-safe APIs using tRPC. This service offers built-in error handling and validation mechanisms with Zod, facilitating the development of reliable backend services.
- Error Monitoring and Logging Dashboard:
- A real-time error tracking service using Sentry, tailored for Next.js and Expo apps. It provides insights into performance issues, error types, and user feedback, helping developers optimize their applications effectively.
- Dynamic Image Optimization Plugin:
- A plugin for Next.js and Expo applications that automatically optimizes images with lazy loading and WebP conversion, improving page load speeds and enhancing user experiences.
- React Component Library Scaffold:
- A tool to create a reusable component library using Shadcn UI and Radix for design, integrated with type definitions in TypeScript, and styled with Tailwind CSS. This aids developers in maintaining consistent UI/UX across projects.
- Server Component Optimization Assistant:
- A tool that analyzes and optimizes the use of Server Components within Next.js projects, highlighting opportunities to minimize client-side JavaScript and improve rendering performance.
- Data Fetching and Caching Toolkit:
- An optimized configuration module for Tanstack Query, designed to manage caching and data fetching between client and server in both Next.js and Expo apps, ensuring data consistency and performance optimization.
Benefits
- Prioritize functional and declarative programming with TypeScript; prefer hooks and effects over classes for React components.
- Use Tailwind, Shadcn UI, and Radix for responsive and accessible styles across platforms; implement mobile-first designs.
- Implement performance optimizations like dynamic loading and lazy loading images; minimize JavaScript on client-side with Server Components.
Synopsis
Developers building a full-stack application with Next.js and Expo using TypeScript and modern UI libraries will benefit from improved code quality and performance optimization by adhering to these standards.
Overview of .cursorrules prompt
The .cursorrules file outlines coding standards and best practices for developing applications using TypeScript, Node.js, Next.js, Expo, and related technologies. It emphasizes writing concise and modular TypeScript code while utilizing functional programming patterns and avoiding classes. The file specifies naming conventions, TypeScript usage guidelines, and syntax preferences to maintain code consistency and readability. Error handling is prioritized with structured validation, logging, and user messaging. For UI, the file advocates using Shadcn UI, Radix UI, Tailwind CSS, and NativeWind for styling, ensuring responsive design with a mobile-first approach. API calls should be secure with tRPC and authentication managed by Clerk. The guide also includes performance optimization techniques, such as dynamic loading and image optimization, along with tailored approaches for Next.js and Expo environments, focusing on server-side rendering, data fetching, and native feature utilization. Developers are advised to follow the respective Next.js and Expo documentation for best practices.
