React Components Creation

1# Cursor Rules
2 
3## Whenever you need a React component
4 
51. Carefully consider the component's purpose, functionality, and design
6 
72. Think slowly, step by step, and outline your reasoning
8 
93. Check if a similar component already exists in any of the following locations
10   1. packages/ui/src/components
11   2. apps/spa/src/components
12 
134. If it doesn't exist, generate a detailed prompt for the component, including:
14   - Component name and purpose
15   - Desired props and their types
16   - Any specific styling or behavior requirements
17   - Mention of using Tailwind CSS for styling
18   - Request for TypeScript usage
19 
205. URL encode the prompt.
21 
226. Create a clickable link in this format:
23   [ComponentName](https://v0.dev/chat?q={encoded_prompt})
24 
257. After generating, adapt the component to fit our project structure:
26   - Import
27     - common shadcn/ui components from <ui_package_alias>@repo/ui/components/ui/</ui_package_alias>
28     - app specific components from <app_package_alias>@/components</app_package_alias>
29   - Ensure it follows our existing component patterns
30   - Add any necessary custom logic or state management
31 
32Example prompt template:
33"Create a React component named {ComponentName} using TypeScript and Tailwind CSS. It should {description of functionality}. Props should include {list of props with types}. The component should {any specific styling or behavior notes}. Please provide the full component code."
34 
35Remember to replace placeholders like <ui_package_path> and <app_package_alias> with the actual values used in your project.
36 
37