TanStack Start + Tailwind Frontend Template

Enforce strict code quality standards for TanStack Start projects with TypeScript, Tailwind CSS v4, ESLint, Prettier, and Vitest testing.

Project Structure

Organize code using feature-based architecture:

```

src/

├── features/

│ ├── shared/

│ │ └── components/

│ └── feature-name/

│ ├── index.ts

│ ├── types.ts

│ ├── components/

│ ├── hooks/

│ ├── lib/

│ └── utils/

├── routes/

├── test/

└── styles.css

```

Mandatory Code Quality Workflow

**ALWAYS run these commands after making significant changes:**

```bash

pnpm typecheck # Check TypeScript errors

pnpm lint # Fix code quality issues

pnpm test # Ensure tests pass

```

Pre-commit hooks enforce these automatically, but run manually during development.

Component Guidelines

1. **Always use default exports for components:**

```typescript

export default function ComponentName() {}

```

2. **Use functional components with TypeScript:**

- Provide explicit types for props and returns

- Avoid `any`, prefer `unknown`

3. **Alphabetical import ordering:**

- External libraries first

- Internal modules second

Import Rules

Example:

```typescript

import { useFeature } from '@/features/feature-name'

import { Button } from '@/features/shared/components'

```

Feature Export Pattern

Each feature must have an `index.ts` file exporting all public modules:

```typescript

// src/features/feature-name/index.ts

export * from './components'

export * from './hooks'

export * from './types'

export * from './utils'

export { default as FeatureProvider } from './hooks/FeatureProvider'

```

This enables clean imports: `import { useFeature, FeatureComponent } from '@/features/feature-name'`

File Naming Conventions

TypeScript Standards

Example:

```typescript

interface UserProps {

name: string

age: number

}

export default function User({ name, age }: UserProps): JSX.Element {

return <div>{name} is {age} years old</div>

}

```

Testing Guidelines

Styling Rules

Package Management

Git Workflow

Key Reminders

1. Run `pnpm typecheck`, `pnpm lint`, and `pnpm test` frequently

2. Use `@/` imports exclusively

3. Organize features in `src/features/feature-name/`

4. Export components as default

5. No `any` types

6. Alphabetical import ordering

7. Use `pnpm` only