Cursor rule

1---
2description: Standards and patterns for creating React components
3globs: src/components/**
4alwaysApply: false
5---
6 
7# React Component Development Guidelines
8 
9## Folder & File Structure
10 
11- Each component must reside in its own folder named in PascalCase.
12- The main implementation should be in a file matching the folder name (e.g., `ExampleComponent/ExampleComponent.tsx`).
13- Export the component via an `index.ts` file using default export:
14```ts
15  import ExampleComponent from "./ExampleComponent";
16  export default ExampleComponent;
17```
18 
19## Props & Types
20 
21- Define the props interface as `iComponentNameProps`.
22- Define and export any supporting complex types/interfaces in the same file.
23- Props should be typed strictly using TypeScript.
24- Use destructuring to access props.
25 
26## Styling & Responsiveness
27 
28- Components must be responsive by default.
29- Prefer Tailwind CSS utility classes over custom styles.
30- Avoid hardcoded layout values unless necessary.
31 
32## Code Structure
33 
34- Use PascalCase for component and file names.
35- Ensure code is readable and maintainable.
36- Use internal render functions for modularizing JSX when needed.
37- Avoid nested conditionals.
38- Minimize conditionals using early returns, ternaries, or extracted helpers.
39 
40## Documentation
41 
42- Add inline comments for sections, explaining the logic and structure.
43- When using useState, useEffect, or variables:
44  - Use self-explanatory variable names.
45  - Add comments describing the state’s purpose and usage.
46 
47## Example
48 
49```tsx
50type iExampleComponentProps = {
51  id?: ComponentIdType;
52  label: string;
53};
54 
55const ExampleComponent: FC<iExampleComponentProps> = ({ id, label }) => {
56  return (
57    <div id={id}>
58      <text>Example Component {label}</text>
59    </div>
60  );
61};
62```
63 
64## Reusability
65 
66- Create wrapper components instead of altering library defaults (e.g., ShadCN).
67- Ensure all public-facing components are composable.
68