About .cursorrules prompt file
What you can build
TypeScript Code Generator: Create a web-based tool that generates TypeScript code following best practices. It could take user input on the type of component or API route needed and create code snippets adhering to the prescribed coding guidelines.
Next.js Starter Kit: Offer a starter kit for Next.js projects that includes a pre-configured setup with Tailwind CSS, TypeScript, testing frameworks (Vitest, Testing Library), and Zod for validation. It would provide developers with boilerplate code that includes server-side rendering and static site generation.
Dynamic Routing Visualizer: Develop an app that visualizes the file-based routing of a Next.js project. Users could upload their directory structure, and the tool would display dynamic and catch-all routes visually, helping developers understand and optimize their route setup.
TypeScript Snippet Library: A searchable library of TypeScript code snippets that follow the outlined TypeScript usage patterns, including functional component examples, type interfaces, and API error modeling, ready for use in projects.
Tailwind Aria Component Library: Create an open-source library of accessible UI components styled with Tailwind CSS and enhanced with aria attributes, following a mobile-first design approach. This would help developers quickly implement responsive and accessible UI elements.
Cloudflare Pages Deployment Helper: A CI tool or service that assists developers in deploying Next.js sites on Cloudflare Pages, following the
@cloudflare/next-on-pagesconventions, and automatically implementing performance optimizations and image optimizations.Error Handling Workshop: An interactive online workshop that offers tutorials and coding exercises focused on error handling in Next.js with TypeScript. It would cover early returns, guard clauses, error boundaries, and logging strategies.
Zod Form Validator Extension: A VSCode extension that assists developers in writing and testing Zod validation schemas, offering autocomplete, error feedback, and best practices guidelines for form validation.
Image Optimization API: A service that takes image uploads and automatically converts them to optimal formats (e.g., WebP), generates size data, and provides lazy loading-ready versions for easy integration into Next.js projects.
Performance Optimization Dashboard: An online dashboard that analyzes a Next.js project's codebase to provide insights and recommendations on performance optimizations, such as SSR/SSG usage,
dynamicimports, andSuspensehandling.
Benefits
- Emphasizes functional programming, avoiding classes, favoring iteration and modularization with descriptive variable names.
- Leverages Next.js features like SSR, SSG, dynamic routing, and deploys using Cloudflare Pages standards.
- Focuses on performance optimization with server-side rendering, lazy loading, and image optimization using WebP and size data.
Synopsis
Developers building a scalable web application using TypeScript and Next.js with Cloudflare Pages would benefit, enabling them to create efficiently structured, optimized, and maintainable codebases.
Overview of .cursorrules prompt
The .cursorrules file outlines guidelines for writing TypeScript code, specifically tailored for use with Next.js. It emphasizes a functional programming approach, preferring functions and declarations over classes, and promotes code modularity and descriptive naming conventions. The file prescribes TypeScript for all development, advocating the use of interfaces and functional components while discouraging enums. For Next.js, it suggests using the `page router` architecture, server-side rendering, and Cloudflare Pages for deployment with attention to specific conventions. Syntax should be concise, leveraging async/await for asynchronous tasks, and prioritize error handling with early returns and form validation using Zod. UI should employ responsive design with Tailwind CSS, and image optimization through Next.js's `Image` component. Performance is enhanced by server-side rendering, static site generation, and minimizing client-side data fetching. Testing is conducted using vitest and testing-library with ui testing and dependency mocking.
