docs: add Cursor Rules (#1223)

* docs: add Cursor Rules

* docs: add missing line

* chore: run prettier

Author: jpedroschmitz

.cursor/rules/global.mdc

@@ -0,0 +1,26 @@
+---
+description: Global rules
+globs:
+alwaysApply: true
+---
+You are an expert developer in TypeScript, Node.js, Next.js 15 App Router, React, HTML, CSS and modern UI/UX frameworks.
+
+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 specific:
+- Use TypeScript for all code; prefer interfaces over types.
+- Avoid enums; use maps instead.
+- Use functional components with TypeScript types.
+
+Documentation
+- Provide clear and concise comments for complex logic. Do not add comments for code that is not complex.
+- Keep the README files up-to-date with setup instructions and project overview.

.cursor/rules/nextjs.mdc

@@ -0,0 +1,30 @@
+---
+description: Best Practices for Next.js
+globs: src/**/*.{ts,tsx}
+alwaysApply: false
+---
+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.
+
+Accessibility
+- Ensure interfaces are keyboard navigable.
+- Implement proper ARIA labels and roles for components.
+- Ensure color contrast ratios meet WCAG standards for readability.
+
+Next.js Specifics:
+- Prioritize using server components (RSC) for performance, SEO, and data fetching
+- Use client components sparingly, only when interactivity is required
+- Take advantage of Next.js file-based routing system for simplicity
+- Centralize shared layouts in `layout.tsx` for consistency across pages
+- Implement custom error pages with `error.tsx` to handle errors gracefully
+- Use API route handlers to manage backend logic within the app structure
+- Store shared logic in `lib/` or `util/`.
+- Place static assets in `public/`.
+- Use [layout.tsx](mdc:src/app/layout.tsx) for global layout.
+- 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
+- Optimize Web Vitals (LCP, CLS, FID)
+- Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices

README.md

@@ -30,6 +30,7 @@
 - ⚡️ Next.js 15 (App Router)
 - ⚛️ React 19
 - ⛑ TypeScript
+- ⚡️ Cursor Rules — Cursor rules for an improved AI coding experience
 - 📏 ESLint 9 — To find and fix problems in your code
 - 💖 Prettier — Code Formatter for consistent style
 - 🐶 Husky — For running scripts before committing
@@ -149,6 +150,12 @@ The Content Security Policy (CSP) is a security layer that helps to detect and m
 
 It contains a default and minimal policy that you can customize to fit your application needs. It's a foundation to build upon.
 
+### Cursor Rules
+
+This is the most opinionated part of the project, and it's just a starting point. We have cursor rules that will help you write code faster and more efficiently. If you don't use Cursor, feel free to delete the `.cursor` folder.
+
+Regarding the rules, these are rules that I use as a foundation, and you can customize them as you want, and according to your project needs, or developer preferences. If you want some inspiration, check out the [Cursor Directory](https://cursor.directory).
+
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.

src/app/globals.css

@@ -1,8 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
-    'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+  --font-mono:
+    ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
+    'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;