Constructs.sh

React Components Creation

by curator

Whenever you need a React component

Cursor Rules

Whenever you need a React component

  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 any of the following locations

    1. packages/ui/src/components
    2. apps/spa/src/components

  4. If it doesn't exist, generate a detailed prompt for the component, including:

    • Component name and purpose
    • Desired props and their types
    • Any specific styling or behavior requirements
    • Mention of using Tailwind CSS for styling
    • Request for TypeScript usage

  5. URL encode the prompt.

  6. Create a clickable link in this format: ComponentName

  7. After generating, adapt the component to fit our project structure:

    • Import
      • common shadcn/ui components from <ui_package_alias>@repo/ui/components/ui/</ui_package_alias>
      • app specific components from <app_package_alias>@/components</app_package_alias>
    • Ensure it follows our existing component patterns
    • Add any necessary custom logic or state management

Example prompt 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 like <ui_package_path> and <app_package_alias> with the actual values used in your project.