Development rules for Based Market: Bun-first, type-safe React/TanStack project with Tailwind and strict code style conventions
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.
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 { useEffect, useRef } from 'react'`
- ❌ `import * as React from 'react'`
- ✅ `if (!element) return;`
- ❌ `if (!element) { return; }`
**NEVER use hardcoded values** unless absolutely necessary:
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
```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;
}
```
```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;
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/based-market-cursor-rules/raw