# Frontend Vite Stack

> Vite 7 + React 19 admin dashboard stack: project layout, providers, shadcn/ui, conventions. Use when scaffolding a new Vite React admin app or onboarding to the dashboard architecture.

- Skill: `xmuhameed/frontend-vite-stack` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-vite-stack`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-vite-stack/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xmuhameed (https://skillmd.com/u/xmuhameed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xmuhameed/frontend-vite-stack

---


# Vite Admin Stack

## Stack

Vite 7 · React 19 · React Router 7 · TanStack Query v5 · Axios · RHF + Zod 4 · shadcn/ui · Tailwind v4 · Chart.js

**No Redux/Zustand** — React Query for server state, Context for auth.

## Layout (recommended for new apps)

```
src/
├── main.tsx
├── App.tsx
├── routes/
│   ├── index.tsx
│   └── features/*.routes.tsx
├── layouts/dashboard-layout.tsx
├── providers/
├── components/ui/ + shared/
├── config/env.ts, sidebar.ts
├── lib/api.ts, cookies.ts, form-utils.ts
└── features/{name}/
    ├── pages/
    ├── components/
    ├── api/          # api.ts, keys.ts, queries.ts, mutations.ts
    └── types/
```

Legacy repos: monolithic `router.tsx`, `data/sidebar-data.ts`, `services/` — detect and match.

## Providers

`ThemeProvider → QueryProvider → AuthProvider → [domain] → RouterProvider`

## Conventions

- UI English-only; entity fields bilingual `_en`/`_ar`
- Backend routes: `get-all-X`, `create-X`, `?id=` query params
- Images: `` `${API_URL}${path}` ``
- Cookie JWT `token` (7-day)

## Related Skills

| Task | Skill |
|------|-------|
| Auth | `@frontend-vite/auth` |
| New feature | `@frontend-vite/create-feature` |
| API | `@frontend-vite/api-layer` |
| Forms | `@frontend-vite/forms` |
| Uploads | `@frontend-vite/file-upload` |
| Lists | `@frontend-vite/list-pages` |
| Routes | `@frontend-vite/routing-sidebar` |
| Modals | `@frontend-vite/modals-dialogs` |