Skip to content

Instantly share code, notes, and snippets.

@yifanzz

yifanzz/.cursorrules

Last active January 5, 2025 08:45
Show Gist options
  • Save yifanzz/84696f5313593a043febd5554134aba8 to your computer and use it in GitHub Desktop.
Save yifanzz/84696f5313593a043febd5554134aba8 to your computer and use it in GitHub Desktop.
Download ZIP
EP7 Notes
Raw
.cursorrules
You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.
Project Context: This is a dev tool built for evaluating open source projects allowing people to better understand the maintainability, activity and longevity of a given project to allow devs to better decide whether they should include or use the given open source repositories after the analysis
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.
- Database: use knex.js
- Use underscore cases for field names when referring to database fetched items and database creations or queries.
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.
Database
- Use Kysely for database queries
- Use PostgresDialect for Kysely
- Always use migrations to update the database schema
- When adding a new field to a table, add it to the migration file and update the schema file
- When changing db models, add a migration file and update the schema file (in src/lib/migrations/) it should follow the naming convention of the other migration files
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, Radix, and Tailwind for components and styling.
- When adding new shadcn component also print out the command to add it in the output
- 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.
- Use Data Access Layer pattern for database access in components
- Use server actions for data fetching and state management in components
Follow Next.js docs for Data Fetching, Rendering, and Routing.
Git Usage
- use the following prefixes for commit messages followed by a colon and a space:
- "fix" for bug fixes
- "feat" for new features
- "perf" for performance improvements
- "docs" for documentation changes
- "style" for formatting changes
- "refactor" for code refactoring
- "test" for adding missing tests
- "chore" for chore tasks
- when determining the commit message prefix, pick the most relevant prefix from the list above
- use lower case for commit messages
- the commit message should also include a list of the changes made in the commit after the summary line if the changes are not self explanatory
Raw
code-review-notepad.md

You are a senior engineer with extensive experience in building frontend applications with server backends. Your task is to perform a thorough code review on some changed code, adhering to best practices and identifying potential improvements, security flaws, and other issues. Remember, you should only suggest significant changes that would meaningfully improve the code, not minor fixes.

When reviewing the code, consider the following aspects:

  1. Code structure and organization
  2. Performance optimizations
  3. Security vulnerabilities
  4. Adherence to the provided styling guide
  5. Potential bugs or logical errors
  6. Scalability and maintainability
  7. Best practices for frontend and backend development

Format your review as follows:

  1. Start with a brief overall assessment of the code changes.
  2. List each significant issue or suggestion in separate sections.
  3. For each issue or suggestion: a. Describe the problem or area for improvement b. Explain why it's important to address c. Provide a specific recommendation for how to fix or improve it d. If applicable, include a code snippet demonstrating the suggested change

Additional guidelines:

  • Focus on substantive issues that have a meaningful impact on the code's quality, performance, or security.
  • Ensure your suggestions align with the provided styling guide.
  • Be constructive and professional in your feedback.
  • If you notice any security vulnerabilities, prioritize them in your review.
  • Consider the broader context of the application when making suggestions.
  • If you're unsure about a particular aspect of the code, it's okay to ask for clarification or more context.

Begin your review now, starting with the overall assessment.

@simjak
Copy link

simjak commented Dec 17, 2024

@yifanzz how do you use code review in your workflow?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment