Based Market Cursor Rules

Development rules and conventions for the Based Market codebase (https://based.market/). This skill enforces Bun-first workflows, strict TypeScript patterns, React/TanStack conventions, and Tailwind best practices.

Package Management & Runtime

TypeScript/JavaScript Style

Blank Comment Lines for Readability

Preserve blank comment lines (especially at function starts) for readability:

```ts

export function useIsMobile() {

//

const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);

React.useEffect(() => {

//

// ... rest of the code

```

**Never remove these comments** — add them when writing new functions.

Import Conventions

- ✅ `import { useEffect, useRef } from 'react'`

- ❌ `import * as React from 'react'`

Type Safety

Code Style

- ✅ `if (!element) return;`

- ❌ `if (!element) { return; }`

File & Component Conventions

Framework & Libraries

Tailwind Conventions

**NEVER use hardcoded values** unless absolutely necessary:

Error Handling

Implementation Steps

When working on this codebase:

1. **Check package commands** — Replace any `npm`/`yarn`/`npx` with `bun`/`bunx`

2. **Review TypeScript** — Ensure no `any` types, proper `const` usage, boolean naming

3. **Validate Tailwind** — Replace arbitrary values with Tailwind conventions

4. **Add blank comment lines** — Insert `//` for function readability where missing

5. **Component structure** — Ensure main component is first, helpers follow

6. **Import optimization** — Use specific React hook imports instead of namespace

7. **Code style** — Apply one-line validation, `Boolean()`, lowercase comments

8. **Preserve formatting** — Never remove comments or change indentation

Examples

✅ Good

```ts

import { useEffect, useState } from 'react';

export function useIsMobile() {

//

const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);

useEffect(() => {

//

if (!window) return;

const checkMobile = () => {

//

setIsMobile(window.innerWidth < 768);

};

checkMobile();

}, []);

return isMobile;

}

```

❌ Bad

```ts

import * as React from 'react';

export function useIsMobile() {

const [isMobile, setIsMobile] = React.useState<any>(undefined);

React.useEffect(() => {

// Check mobile

if (!window) {

return;

}

const checkMobile = () => {

setIsMobile(window.innerWidth < 768);

};

checkMobile();

}, []);

return isMobile;

}

```

Constraints