Skip to content

Commit 14512e9

Browse files
apsinghdevapsinghdev
committed
chore: add cursorrules
1 parent 5fb2bb3 commit 14512e9

3 files changed

Lines changed: 185 additions & 0 deletions

File tree

‎.cursor/rules/genral_rules.mdc‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
alwaysApply: true
3+
---
4+
5+
# Opensox AI - Cursor Rules
6+
7+
## Code Style
8+
9+
### Comments
10+
- always use lowercase when writing comments
11+
- avoid unnecessary comments; code should be self-documenting when possible
12+
- use comments to explain "why", not "what"
13+
14+
15+
## Monorepo Structure
16+
- this is a turborepo monorepo
17+
- shared packages live in `packages/`
18+
- apps live in `apps/` (web, api, backend, docs)
19+
- respect package boundaries
20+
- use workspace dependencies properly
21+

‎apps/api/.cursor/rules/backend_rules.mdc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
alwaysApply: true
3+
---
4+

‎apps/web/.cursor/rules/frontend_rules.mdc‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
alwaysApply: true
3+
---
4+
## UI Component Guidelines
5+
6+
### Design System - CRITICAL
7+
**Always follow the design system defined in `apps/web/src/lib/design-tokens.ts` and `apps/web/tailwind.config.ts`**
8+
9+
#### Color Usage
10+
- **NEVER** use hardcoded hex values (e.g., `#5519f7`) directly in components
11+
- **ALWAYS** reference colors from the design token system using Tailwind classes
12+
- Use semantic color names that describe purpose, not appearance
13+
14+
#### Available Color Palettes
15+
16+
**Brand Colors:**
17+
- `bg-brand-purple` - primary brand color for ctas, highlights
18+
- `bg-brand-purple-light` - hover states
19+
- `bg-brand-purple-dark` - depth and contrast
20+
21+
**Background/Surface Colors (Landing Page):**
22+
- `bg-surface-primary` - main app background (#101010)
23+
- `bg-surface-secondary` - sidebar, secondary surfaces (#141414)
24+
- `bg-surface-tertiary` - content areas, cards (#1A1A1A)
25+
- `bg-surface-elevated` - elevated cards, modals (#1E1E1E)
26+
- `bg-surface-hover` - hover states for dark surfaces
27+
- `bg-surface-card` - card backgrounds
28+
29+
**Background/Surface Colors (Dashboard):**
30+
- `bg-dash-base` - page background (darkest)
31+
- `bg-dash-surface` - panels, cards, navbars
32+
- `bg-dash-raised` - buttons, inputs, interactive surfaces
33+
- `bg-dash-hover` - hover states for raised items
34+
- `bg-dash-border` - thin dividers, borders
35+
36+
**Border Colors:**
37+
- `border` or `border-border` - primary border (#252525)
38+
- `border-light` - lighter borders for nested elements
39+
- `border-dark` - darker borders
40+
- `border-focus` - focus states (brand purple)
41+
42+
**Text Colors:**
43+
- `text-text-primary` - primary white text (#ffffff)
44+
- `text-text-secondary` - secondary text (#e1e1e1)
45+
- `text-text-tertiary` - tertiary/muted text (#d1d1d1)
46+
- `text-text-muted` - very muted text (#a1a1a1)
47+
- `text-text-light` - light gray for copyright/footer
48+
49+
**Link Colors:**
50+
- `text-link` - default link color (blue-400)
51+
- `text-link-hover` - hover state (blue-300)
52+
53+
**Status Colors:**
54+
- Success: `bg-success-bg`, `text-success-text`, `border-success-border`
55+
- Error: `bg-error-bg`, `text-error-text`, `border-error-border`
56+
- Warning: `bg-warning-bg`, `text-warning-text`, `border-warning-border`
57+
- Info: `bg-info-bg`, `text-info-text`, `border-info-border`
58+
59+
#### Typography
60+
- Use `font-sans` for standard UI text (Geist Sans)
61+
- Use `font-mono` for code, technical content, or monospace needs (DM Mono)
62+
63+
#### Spacing
64+
- Follow Tailwind's spacing scale (0.25rem increments)
65+
- For section padding:
66+
- Mobile: `p-4` (1rem)
67+
- Desktop: `p-[60px]`
68+
69+
#### Border Radius
70+
- Small elements: `rounded-lg` (0.5rem)
71+
- Medium elements: `rounded-xl` (1rem)
72+
- Large elements: `rounded-2xl` (1.5rem)
73+
- Buttons: `rounded-[16px]`
74+
75+
#### Animations
76+
- Fast transitions: `duration-100` (0.1s)
77+
- Normal transitions: `duration-300` (0.3s)
78+
- Slow transitions: `duration-600` (0.6s)
79+
- Available custom animations:
80+
- `animate-accordion-down`, `animate-accordion-up`
81+
- `animate-scrollRight`, `animate-scrollLeft`
82+
- `animate-customspin`, `animate-spin-slow`, `animate-spin-slow-reverse`
83+
- `animate-marquee`, `animate-marquee-vertical`
84+
- `animate-shine`
85+
86+
### Component Structure
87+
- prefer functional components with typescript
88+
- use proper typescript types, avoid `any`
89+
- extract reusable logic into custom hooks
90+
- keep components focused and single-responsibility
91+
92+
### Props & State
93+
- use descriptive prop names
94+
- define prop types using typescript interfaces or types
95+
- prefer controlled components over uncontrolled
96+
- use zustand for global state (located in `src/store/`)
97+
98+
### Imports
99+
- organize imports: react → third-party → local components → utils → types
100+
- use absolute imports from `@/` prefix when available
101+
- remove unused imports
102+
103+
## File Organization
104+
- place shared components in `apps/web/src/components/`
105+
- place page-specific components near their page
106+
- co-locate tests with the code they test
107+
- keep utility functions in `apps/web/src/lib/` or `apps/web/src/utils/`
108+
109+
## Naming Conventions
110+
- components: PascalCase (e.g., `UserProfile.tsx`)
111+
- files/folders: kebab-case or camelCase for utilities
112+
- constants: UPPER_SNAKE_CASE
113+
- functions/variables: camelCase
114+
- types/interfaces: PascalCase with descriptive names
115+
116+
## Accessibility
117+
- include proper aria labels
118+
- ensure keyboard navigation works
119+
- maintain proper heading hierarchy
120+
- provide alt text for images
121+
122+
## Performance
123+
- use dynamic imports for code splitting when appropriate
124+
- optimize images (use next/image)
125+
- memoize expensive computations
126+
- avoid unnecessary re-renders
127+
128+
You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
129+
130+
- Follow the user’s requirements carefully & to the letter.
131+
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
132+
- Confirm, then write code!
133+
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
134+
- Focus on easy and readability code, over being performant.
135+
- Fully implement all requested functionality.
136+
- Leave NO todo’s, placeholders or missing pieces.
137+
- Ensure code is complete! Verify thoroughly finalised.
138+
- Include all required imports, and ensure proper naming of key components.
139+
- Be concise Minimize any other prose.
140+
- If you think there might not be a correct answer, you say so.
141+
- If you do not know the answer, say so, instead of guessing.
142+
143+
### Coding Environment
144+
The user asks questions about the following coding languages:
145+
- ReactJS
146+
- NextJS
147+
- JavaScript
148+
- TypeScript
149+
- TailwindCSS
150+
- HTML
151+
- CSS
152+
153+
### Code Implementation Guidelines
154+
Follow these rules when you write code:
155+
- Use early returns whenever possible to make the code more readable.
156+
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
157+
- Use “class:” instead of the tertiary operator in class tags whenever possible.
158+
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
159+
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
160+
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

0 commit comments

Comments
 (0)