Cursor AI Rules for Interact Platform

Coding standards and best practices for the Interact employee engagement platform built with React 18, Vite 6, and Base44 SDK.

Project Context

Instructions

1. React Component Standards

**Use functional components with hooks only:**

**Component Example:**

```javascript

import { useState } from 'react';

import PropTypes from 'prop-types';

import { cn } from '@/lib/utils';

export const ActivityCard = ({ title, points, onJoin }) => {

const [isJoined, setIsJoined] = useState(false);

return (

<div className={cn("p-4 rounded-lg", isJoined && "bg-green-50")}>

<h3>{title}</h3>

<p>{points} points</p>

<button onClick={() => {

onJoin();

setIsJoined(true);

}}>

{isJoined ? 'Joined' : 'Join'}

</button>

</div>

);

};

ActivityCard.propTypes = {

title: PropTypes.string.isRequired,

points: PropTypes.number.isRequired,

onJoin: PropTypes.func.isRequired,

};

```

2. File Organization

Organize files according to project conventions:

3. Styling with TailwindCSS

4. Forms

5. Data Fetching with TanStack Query

**Custom Hook Pattern:**

```javascript

import { useQuery } from '@tanstack/react-query';

export const useActivities = () => {

return useQuery({

queryKey: ['activities'],

queryFn: () => api.get('/activities'),

});

};

```

6. Testing Requirements

7. Security Best Practices

8. Documentation

Constraints

Don't Do

Do

Related Documentation

Refer to these project files for additional context:

Example Usage

When generating new code for the Interact platform, this skill ensures:

1. React components follow functional patterns with proper PropTypes

2. TailwindCSS is used consistently with the `cn()` helper

3. Data fetching uses TanStack Query custom hooks

4. Forms use React Hook Form with Zod validation

5. Tests are written using Vitest and React Testing Library

6. Security best practices are followed

7. Code is properly documented and organized