About .cursorrules prompt file
What you can build
React Optimization Toolkit: A service or app that helps developers optimize their React components by providing suggestions on using
memo,useMemo, anduseCallbackeffectively, along with best practices for separating business logic and view components.Form and API Validation Builder: A tool that uses Zod for generating and validating forms, APIs, and AI responses, ensuring developers can create robust validation schemas easily.
Tailwind CSS Animated Generator: An application that helps developers create complex animations using Tailwind CSS and Frame Motion, while suggesting when to use module CSS with variables for intricate animations.
State Management Advisor: A service that assists developers in choosing the right state management strategy, suggesting
useImmerReducerwhen components become too complex, with a focus on maintaining simpler, more readable code.Component Accessibility Checker: A tool to help ensure React components are accessible, automatically checking for and suggesting necessary ARIA labels and enhancements for better accessibility.
CSS Class Name Organizer: An app that optimizes CSS class names usage by breaking apart long lists into multiple lines and using the
cnutility function for conditional class names, improving code readability.UI Theme Customizer: A website that allows developers to customize their UI themes using the shadcn/ui components, with an emphasis on using the zinc and indigo color palettes for backgrounds, text, and primary actions.
Component Export Formatter: A developer tool that formats component exports to follow the best practice of using
export default function ComponentName() {}, ensuring consistent code style across projects.
Benefits
- Prioritize performance by leveraging memoization hooks like
useMemoanduseCallbackand optimize React component rendering for efficiency. - Maintain a clean and modular code structure by separating view and business logic components using
useImmerReducerfor complex state management. - Ensure consistent, accessible styling using TailwindCSS,
cnfor conditional classes, and following a color palette strategy withshadcn/ui.
Synopsis
React developers can utilize this prompt to create efficient, structured, and accessible applications with optimized rendering and seamless animations.
Overview of .cursorrules prompt
The .cursorrules file provides a set of coding guidelines and best practices for developing in a React environment. It includes naming conventions such as using kebab case for file names, and suggests optimization techniques like using memoization for component rendering. The file advocates using tools like Zod for validation, Tailwind CSS for styling, and Framer Motion for animations. It emphasizes the separation of view and business logic in components and recommends efficient state management using `useImmerReducer` for complex cases. The file also advises using the conditional class name utility `cn`, breaking long class name lists, and utilizing a specific color palette for UI components. Additionally, it stresses accessibility through ARIA labels and specifies practices for exporting components.
