{"filename":"react-components-creation-cursorrules-prompt-file.mdc","content":"---\ndescription: \"Cursor rules for React component creation and development.\"\nglobs: **/*\nalwaysApply: false\n---\n# Cursor Rules\n\n## Whenever you need a React component\n\n1. Carefully consider the component's purpose, functionality, and design\n\n2. Think slowly, step by step, and outline your reasoning\n\n3. Check if a similar component already exists in any of the following locations\n   1. packages/ui/src/components\n   2. apps/spa/src/components\n\n4. If it doesn't exist, generate a detailed prompt for the component, including:\n   - Component name and purpose\n   - Desired props and their types\n   - Any specific styling or behavior requirements\n   - Mention of using Tailwind CSS for styling\n   - Request for TypeScript usage\n\n5. URL encode the prompt.\n\n6. Create a clickable link in this format:\n   [ComponentName](https://v0.dev/chat?q={encoded_prompt})\n\n7. After generating, adapt the component to fit our project structure:\n   - Import\n     - common shadcn/ui components from <ui_package_alias>@repo/ui/components/ui/</ui_package_alias>\n     - app specific components from <app_package_alias>@/components</app_package_alias>\n   - Ensure it follows our existing component patterns\n   - Add any necessary custom logic or state management\n\nExample prompt template:\n\"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.\"\n\nRemember to replace placeholders like <ui_package_path> and <app_package_alias> with the actual values used in your project.\n"}