---
name: general
description: "Use ALWAYS for project-wide conventions and coding standards. It defines the default style, rules, and best practices that apply to every file and feature."
---

> This is the default skill. Reference it in combination with more specific skills (e.g., `forms`, `data-grid`, `dialogs`) for targeted tasks.

## Preferred Technology Stack

Favor the established platform before introducing custom code or a new dependency:

- **TanStack ecosystem:** Use TanStack Start, Router, DB, Form, and Query for their respective application concerns. Consider adjacent TanStack libraries when they directly fit the feature: TanStack AI for AI interactions, TanStack Virtual for large virtualized lists, TanStack Pacer for debouncing, throttling, rate limiting, queuing, and batching, and TanStack Hotkeys for type-safe keyboard shortcuts.
- **Vite+:** Use Vite+ for the development server, build tooling, and project integration.
- **Material UI:** Use Material UI for interface components and icons. When an advanced capability is needed, consider MUI X Charts for data visualization, Tree View for hierarchical data, Scheduler for calendars and timelines, and Chat for AI-powered conversations.

Before implementing an external library feature, consult the current documentation through Context7 MCP. Do not add a dependency when one of these platform libraries already covers the requirement.

## Coding Conventions

- Generate modern ES6+ TypeScript with explicit types and never use `any`.
- Stick to double quotes, semicolons, and the `~/` alias for `src/` imports.
- Avoid `useMemo` / `useCallback`; the React Compiler handles memoization.
- Keep code self-documenting; only add comments to clarify non-obvious intent.

## User Interface

- Format all client-side dates with `"L LT"` or `"L"`.
- Build skeletons for loading states.
- When building UI, always design for both light and dark mode; this app uses `colorSchemeSelector: "data-mui-color-scheme"`, so prefer `theme.applyStyles("dark", ...)` for mode-specific styling.

## File Organization

Use this ownership model for new application code. Keep feature-specific code close to its route; promote it to a root directory only when it is shared across multiple features.

```txt
src/                           # client-first architecture
├── components/                # shared components across multiple routes
├── db-collections/            # TanStack DB collections
├── hooks/                     # shared hooks across multiple routes
├── lib/                       # isomorphic/shared logic usable by client and server
│   ├── auth/
│   │   ├── permissions.ts
│   │   └── scopes.ts
│   ├── locales/
│   │   ├── cs.json
│   │   └── en.json
│   └── schemas/               # shared Zod schemas
├── routes/                    # TanStack Router file-based routing
│   ├── __root.tsx
│   ├── index.tsx
│   └── features/              # route group with multiple pages
│       ├── -components/       # route-specific components
│       ├── -hooks/            # route-specific hooks
│       ├── index.tsx
│       ├── create.tsx
│       ├── edit.$id.tsx
│       └── $id.tsx
├── server/                    # server-only code
│   ├── actions/
│   │   └── feature.ts
│   ├── db/
│   │   ├── migrations/
│   │   ├── schemas/           # Drizzle schemas
│   │   │   └── feature.ts
│   │   └── index.ts
│   └── middleware/
│       └── databaseMiddleware.ts
└── types/
```

## Development And Validation

- Use only port 3000 for local development browser access.
- Do not build the application for routine validation; it is slow. Check TypeScript errors instead.