|
| 1 | +For all designs, create beautiful, production-ready interfaces. Avoid cookie-cutter solutions and aim for fully featured screens. |
| 2 | + |
| 3 | +Tech Stack: |
| 4 | +- @tanstack/react-query for data fetching/caching |
| 5 | +- react-hook-form |
| 6 | +- Custom UI components |
| 7 | +- Absolute imports with @ alias |
| 8 | + |
| 9 | +Existing placeholder code: |
| 10 | +- /app has example pages. Use them as a reference. Remove the pages the app does not need |
| 11 | +- /data has an example for a flowers module. NOTE: you should use Supabase for your implementation instead of a REST client |
| 12 | + |
| 13 | +Docs: |
| 14 | +- **ALWAYS read these docs before starting:** |
| 15 | + - /docs/code/auth.md |
| 16 | + - /docs/code/folder-structure.md |
| 17 | + - /docs/code/routing.md |
| 18 | +- Follow patterns described in the docs |
| 19 | + |
| 20 | +Data Layer (`/data`): |
| 21 | +``` |
| 22 | +data/posts/ |
| 23 | + ├── posts.queries.ts // PostsQueries namespace (React Query + Supabase) |
| 24 | + └── posts.models.ts // PostsModels namespace (Zod schemas) |
| 25 | +``` |
| 26 | + |
| 27 | +Always include auth logic in the data folder (login, register) |
| 28 | + |
| 29 | +**CRITICAL:** NEVER use Supabase directly in components - ALL data fetching/mutations MUST go through `*.queries.ts` files |
| 30 | + |
| 31 | +Naming: camelCase folders (`userProfiles/`), PascalCase namespaces (`UserProfilesModels`, `UserProfilesQueries`) |
| 32 | + |
| 33 | +Database Setup: |
| 34 | +1. Create tables/schema |
| 35 | +2. Add dummy/seed data (enough to demonstrate UI) |
| 36 | +3. Use camelCase for all entity properties |
| 37 | + |
| 38 | +Data Hooks: |
| 39 | +1. Define Zod schemas in `*.models.ts`, export as namespace |
| 40 | +2. Create React Query hooks in `*.queries.ts` wrapping Supabase, export as namespace |
| 41 | +3. Invalidate cache after mutations |
| 42 | +4. Use Supabase joins for nested data displayed together |
| 43 | + |
| 44 | +API Design: |
| 45 | +- Nest related entities when displayed together |
| 46 | +- Focus on UI needs, not database structure |
| 47 | +- Use single queries with joins over multiple separate queries |
| 48 | + |
| 49 | +Forms: |
| 50 | +- Use react-hook-form for all forms |
| 51 | +- Use zodResolver and pass in the Zod schemas defined in the data layer |
| 52 | + |
| 53 | +OpenAPI: Check `rules/openapi-rules.md` when generating/updating specs |
| 54 | + |
| 55 | +UI: |
| 56 | +- Use components from /components wherever possible. Check the entire components folder for a list of available components |
| 57 | +- Check /types/index.ts and component files to see what props the components expect |
| 58 | +- Check the corresponding .stories files for usage examples of components |
| 59 | + |
| 60 | +**ALWAYS** run "ts:check" to confirm your changes before building and finishing. This check MUST ALWAYS PASS before you finish. |
0 commit comments