react components creation
via PatrickJS/awesome-cursorrules
Structured workflow for creating React components with design review and code reuse checks.
What is react components creation?
This rule provides a step-by-step process for developing React components in a monorepo environment. It emphasizes design consideration, checking for existing components, generating detailed prompts for v0.dev, and adapting generated code to project conventions using TypeScript, Tailwind CSS, and shadcn/ui.
- Check existing component libraries before creating duplicates
- Generate detailed component specifications with TypeScript and Tailwind CSS requirements
- Create v0.dev chat links with URL-encoded prompts for rapid prototyping
- Adapt generated components to project structure and import conventions
- Enforce consistent styling and component patterns across the codebase
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
Cursor Rules
Whenever you need a React component
-
Carefully consider the component's purpose, functionality, and design
-
Think slowly, step by step, and outline your reasoning
-
Check if a similar component already exists in any of the following locations
- packages/ui/src/components
- apps/spa/src/components
-
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
-
URL encode the prompt.
-
Create a clickable link in this format: ComponentName
-
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
- Import
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.
Related rules
Generate production-ready React forms from screenshots, PDFs, or text using FormEngine JSON schema with RSuite, Material UI, or Mantine.
Apollo Client integration patterns and best practices for React applications.
React development with MobX state management integration and best practices.
Best practices and structure for React Native Expo development.
React Native Expo Router with TypeScript and Windows development setup.
Expert React & Next.js App Router development with clear, production-ready code.