React Component Creation Workflow

# React Component Creation Rules

## Component Planning Process

1. Carefully consider the component's purpose, functionality, and design
2. Think slowly, step by step, and outline your reasoning
3. Check if a similar component already exists in:
   - packages/ui/src/components
   - apps/spa/src/components

## Component Generation Workflow

4. If component doesn't exist, generate a detailed prompt including:
   - Component name and purpose
   - Desired props and their types
   - Specific styling or behavior requirements
   - Mention of using Tailwind CSS for styling
   - Request for TypeScript usage

5. URL encode the prompt and create a clickable link:
   [ComponentName](https://v0.dev/chat?q={encoded_prompt})

## Component Integration

6. After generating, adapt the component to fit project structure:
   - Import common shadcn/ui components from appropriate packages
   - Import app-specific components from @/components
   - Ensure it follows existing component patterns
   - Add necessary custom logic or state management

## Example Template

"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."

Remember to replace placeholders with actual values used in your project.