← ClaudeAtlas

tanstack-conventionslisted

Auto-enforce cross-cutting TanStack conventions and import patterns. Activates on all TanStack development to ensure consistent project structure, imports, and integration patterns across Router, Query, Form, Table, and Virtual.
smicolon/ai-kit · ★ 3 · AI & Automation · score 67
Install: claude install-skill smicolon/ai-kit
# TanStack Conventions This skill enforces cross-cutting conventions across all TanStack libraries for consistent, maintainable React SPA development. ## Project Structure ### Feature-Based Organization ``` src/ ├── features/ │ ├── posts/ │ │ ├── components/ │ │ │ ├── PostList.tsx │ │ │ ├── PostCard.tsx │ │ │ ├── PostForm.tsx │ │ │ └── index.ts # Barrel export │ │ ├── hooks/ │ │ │ ├── useCreatePost.ts │ │ │ ├── useUpdatePost.ts │ │ │ ├── useDeletePost.ts │ │ │ └── index.ts │ │ ├── queries/ │ │ │ ├── postQueries.ts # Query options factories │ │ │ └── index.ts │ │ ├── api/ │ │ │ └── postApi.ts # API client functions │ │ ├── types.ts # Feature-specific types │ │ └── index.ts # Feature barrel export │ └── users/ │ └── ... ├── routes/ │ ├── __root.tsx │ ├── index.tsx │ ├── posts.tsx │ ├── posts.index.tsx │ └── posts.$postId.tsx ├── lib/ │ ├── query-client.ts # Query client setup │ ├── query-keys.ts # Query key factory │ └── router.ts # Router setup ├── components/ │ └── ui/ # Shared UI components ├── hooks/ # Shared hooks ├── types/ # Global types └── main.tsx ``` ## Import Conventions ### Always Use Path Aliases ```typescript // ✅ CORRECT: Path aliases import { PostList } from '@/features/posts/components' impo