Browse

UI/UX .cursorrules strategies

Filters

Tech

Clear

agency_swarm

openai

1. HTML

HTMX

AlpineJS

GitHub Pages

redis

morgan

winston

sequelize

prom-client

ExpressJs

Postgres

Prime React

Inertia.js

Pest

Jetstream

react-hook-form.

JsonKey

ChangeNotifierProvider

Flutter Hooks

cached_network_image

JsonValue

Riverpod Hooks

StateNotifierProvider

AssetImage

auto_route

StateProvider

Freezed

AsyncNotifierProvider

build_runner

GoRouter

ListView.builder

JsonSerializable

NotifierProvider

serverless environments

Nx

npm workspaces

API development

Lerna

swr

Postcss

Apollo Graphql

TypeORM

React.memo()

Lucide icons

RevenueCat

Shadcn UI components

Prisma ORM

Mux

RGAA

Jupyter Notebook

taskfile.dev

testify

loggo

TS

tailwind

shadcn

magicui

lucide

Supabase Client API

Supabase/Postgres

scikit-image

RPi.GPIO

SoundDevice

ORB

OpenCV

SIFT

YAML

cn utility

useCallback

useMemo

useImmerReducer

memo

temporal

frame motion

module css

Shopify Admin GraphQL API

Polaris

Genql

Vercel KV

NetCDF

nbdev

fastcore

Marisco

SASS

SCSS

Hugo

Go templating

Vinxi

React Query SSR

React Router

Tanstack Start

Obsidian Plugin Development

Google Chat

EditorConfig

nextjs app router

ShadCN-Graphs

ShadCN-UI

Google Calendar

React Components Creation .cursorrules prompt file

# 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](https://v0.dev/chat?q={encoded_prompt})
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.

stack:

React

Tailwind CSS

TypeScript