patrickandClaude Sonnet 5
4a19335a1e
Replace Next.js/Supabase/Vercel stack with a self-hostable setup: Vite+React frontend, Fastify+Drizzle+PostgreSQL backend with own JWT auth, deploy via git pull + rsync + systemd (checkout/service separated, updates pulled from Gitea). Adds a reference auth route (register/login/me) as the canonical pattern for new routes. Updates all skills/rules/agents/docs to match. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BMdBJfD9TT6XUU2NqGG1PN
35 lines
1.6 KiB
Markdown
35 lines
1.6 KiB
Markdown
---
|
|
paths:
|
|
- "frontend/src/components/**"
|
|
- "frontend/src/**/*.tsx"
|
|
- "frontend/src/hooks/**"
|
|
---
|
|
|
|
# Frontend Development Rules
|
|
|
|
## shadcn/ui First (MANDATORY)
|
|
- Before creating ANY UI component, check if shadcn/ui has it: `ls frontend/src/components/ui/`
|
|
- NEVER create custom implementations of: Button, Input, Select, Checkbox, Switch, Dialog, Modal, Alert, Toast, Table, Tabs, Card, Badge, Dropdown, Popover, Tooltip, Navigation, Sidebar, Breadcrumb
|
|
- If a shadcn component is missing, install it: `npx shadcn@latest add <name> --yes` (run inside `frontend/`)
|
|
- Custom components are ONLY for business-specific compositions that internally use shadcn primitives
|
|
|
|
## Import Pattern
|
|
```tsx
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
|
```
|
|
|
|
## Component Standards
|
|
- Use Tailwind CSS exclusively (no inline styles, no CSS modules)
|
|
- All components must be responsive (mobile 375px, tablet 768px, desktop 1440px)
|
|
- Implement loading states, error states, and empty states
|
|
- Use semantic HTML and ARIA labels for accessibility
|
|
- Keep components small and focused
|
|
- Use TypeScript interfaces for all props
|
|
|
|
## Auth Best Practices (own JWT backend)
|
|
- Store the JWT in memory/state, not `localStorage`, if XSS exposure is a concern for the project; document the choice in the feature spec
|
|
- After login, redirect via `react-router`'s `navigate()` once the auth state is confirmed set
|
|
- Always reset loading state in all code paths (success, error, finally)
|
|
- Attach the JWT as `Authorization: Bearer <token>` on every API call to `/api/**`
|