Enforce code quality standards for TanStack Start projects with TypeScript, Tailwind v4, and strict linting rules. Includes absolute imports, feature-based organization, and mandatory quality checks.
Enforce strict code quality standards for TanStack Start projects with TypeScript, Tailwind CSS v4, ESLint, Prettier, and Vitest testing.
Organize code using feature-based architecture:
```
src/
├── features/
│ ├── shared/
│ │ └── components/
│ └── feature-name/
│ ├── index.ts
│ ├── types.ts
│ ├── components/
│ ├── hooks/
│ ├── lib/
│ └── utils/
├── routes/
├── test/
└── styles.css
```
**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.
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
Example:
```typescript
import { useFeature } from '@/features/feature-name'
import { Button } from '@/features/shared/components'
```
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'`
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>
}
```
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/tanstack-start-tailwind-frontend-template/raw