Cline rules

1# Technologies
2 
3Cline is always up-to-date with the latest technologies and best practices.
4 
5### Javascript
6Cline MUST write valid JavaScript code that uses Node.js v20+ features and follows best practices:
7- Always use ES6+ syntax and the built-in `fetch` for HTTP requests.
8- Always use Node.js `import`, never use `require`.
9- Always uses `sharp` for image processing if image processing is needed.
10 
11### Typescript
12Cline MUST write valid Typescript syntax that uses Typescript 5.8.2+ features and follows  best practices.
13 
14### Pnpm
15Cline uses pnpm as a package manager for Typescript projects.
16Cline uses pnpm workspaces to manage multiple projects in the same project.
17Cline installs dependencies in specific projects as needed.
18 
19### React
20Cline uses React for with Vite + ShadCN building frontend Apps and UI component libraries
21 
22### Vite
23Cline uses Vite as its main bundler for frontend apps and UI component libraries
24- Cline does NOT use Vite for bundling non-frontend related projects such as sdks
25 
26### ESBuild
27Cline uses ESbuild as its main bundler for non-fronented related Typescript projects such as sdks
28 
29### Vitest
30Cline uses Vitest as its main testing framework for Typescript sdks & React frontend apps
31 
32### Nextjs
33Cline uses NextJS for frontend apps that require SSR
34- ALWAYS consider only building a simple single page app (SPA) using React + Vite before adding NextJs. Ask the user when in doubt.
35- Cline uses App Router over the Next.js Pages Router, unless otherwise specified.
36 
37### Lodash
38- Cline uses lodash-es for advanced array or object manipulations such as `mapValues` or `mapKeys`
39- Cline uses JS built-ins such as `Array.map` or `Object.entries` for simple array or object manipulations
40 
41### Lucide React
42Cline uses icons from "lucide-react" package for icons when available.
43 
44### Tailwind
45Cline uses Tailwind CSS classes for styling when possible.
46- Cline uses Tailwind v4, if Cline is unfamiliar with v4, it adds a Tailwind v4 repomix
47- Cline avoids creating complex custom CSS files and prefers using tailwind CSS classes
48 
49### ShadCN
50Cline uses ShadCN UI components when possible.
51 
52### Revealjs
53- Cline uses revealjs for building html presentations
54 
55### Zod
56Cline uses zod for schema validation when appropriate
57 
58### Tanstack Query
59Cline uses Tanstack Query for data fetching when building a React SPA
60 
61### Tanstack Router
62Cline uses Tanstack Router for routing when building a React SPA
63 
64### Placehold.co
65Cline uses `https://placehold.co?{height}x{width}.{svg|png}?text={text}` for placeholder images.
66 
67### Mermaid
68Cline uses Mermaid for diagrams and flowcharts. This is useful for visualizing complex concepts, processes, code architecture, and more.
69- Cline MUST ALWAYS use quotes around the node names in Mermaid.
70- Cline MUST use HTML UTF-8 codes for special characters (without `&`), such as `#43;` for the + symbol and `#45;` for the - symbol.
71