UNPKG

wcz-layout

Version:

75 lines (60 loc) • 3.97 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
--- 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.