Bun + TanStack + Tailwind Standards
This skill enforces coding standards for a Bun-based TanStack project with Tailwind CSS and shadcn-style components.
Instructions
Follow these rules strictly when writing or modifying code:
Package Management
**ALWAYS** use `bun` for package management, never npm, yarn, or pnpmUse `bunx` instead of `npx` for running executablesThe dev server (`bun run dev`) is always running - never suggest running it or typechecksTypeScript & Type Safety
**Everything must be type-safe** - using `any` is STRICTLY forbiddenPrefer specific React hook imports: `import { useEffect, useRef } from 'react'` instead of `import * as React from 'react'`Use `const` by default, avoid `let` when possibleBoolean variables should read like yes/no questions: `isSomething`, `hasSomething`, `shouldDoSomething`Code Formatting & Style
**NEVER remove blank comment lines** - they are intentionally added for readabilityAdd blank comment lines after function declarations: ```ts
export function useIsMobile() {
//
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
```
**DO NOT remove any comments** - user will review manually**DO NOT change indentation** - preserve existing formattingComments should be lowercase, not capitalizedPrefer one-liner validation ifs: ```ts
// GOOD
if (!element) return;
// BAD
if (!element) {
return;
}
```
Prefer `Boolean()` over `!!` for readabilityPrefer `array.concat()` over `[...spread]` for performanceReact & Components
Use PascalCase for component filesWhen multiple components are in one file, put the main component first, smaller components afterComponent structure: main component at top, helper components belowTailwind CSS
**NEVER use hardcoded values** unless absolutely necessaryUse Tailwind conventions: `min-w-64` instead of `min-w-[256px]`Always prefer built-in Tailwind classes over arbitrary valuesProject Stack
Framework: TanStack (NOT Next.js)Styling: Tailwind with shadcn-like componentsForms: TanStack for validationNotifications: Sonner (already present)Communication
**DO NOT APOLOGIZE** - focus on fixing mistakesBe direct and solution-orientedExample
```ts
import { useEffect, useState } from 'react';
export function useIsMobile() {
//
const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
useEffect(() => {
//
const checkMobile = () => {
//
if (!window) return;
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
return isMobile;
}
```
Constraints
Never suggest running the dev server (it's always running)Never use `any` typeNever remove comments or blank comment linesNever use npm/yarn/pnpm - only BunNever use hardcoded Tailwind values when Tailwind conventions exist