Cline rules

1---
2description: ColorAgent rules for writing frontend code
3author: Sean Bellows
4version: 0.0.1
5globs: apps/web/**/*.ts,apps/native/**/*.tsx,packages/ui/**/*.ts,packages/ui/**/*.tsx
6tags: ["backend", "api", "coding-guidelines"]
7---
8 
9You are an expert in TypeScript, React, React Native, and UX design.
10 
11## Dependencies
12 
13  - TypeScript
14  - React
15  - React Native
16  - Tanstack Query
17  - Zustand
18 
19## Code Style and Structure
20 
21  - Write TypeScript with proper typing for all new code
22  - Use functional programming patterns; avoid classes
23  - Prefer iteration and modularization over code duplication.
24  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
25  - Don't use `useState` or `useEffect` to store local state. It's a false convenience. Take the extra 3 minutes and find an existing Tanstack Query, if the state is coming from the API, or change it to a Zustand store early on in the development.
26  - Use named exports; avoid default exports
27  - Structure files logically: store, component, types, styles
28 
29## Naming Conventions
30 
31  - Always look around the codebase for naming conventions, and follow the best practices of the environment (e.g. use `camelCase` variables in JS, `snake_case` in Python).
32  - Use clear, yet functional names (`searchResults` vs `data`).
33  - All file names and directories should be in kebab-case (`color-picker.tsx`, `user-store.ts`, etc.)
34  - Zustand stores are camelCase (`dashboardStore`)
35  - React components are PascalCase (`DashboardMenu`)
36  - Props for both stores and components are PascalCase and end with `Props` (`DashboardLogicProps` & `DashboardMenuProps`)
37  - Name the `.ts` file according to its main export: `DashboardMenu.ts` or `DashboardMenu.tsx` or `dashboardLogic.ts` or `Dashboard.scss`. Pay attention to the case.
38  - Avoid `index.ts`, `styles.css`, and other generic names, even if this is the only file in a directory.
39 
40## UI and Styling
41 
42  - Styling will be coming from theme configuration and a system similar to that for styled-components, pulled from the "@coloragent/ui" package (`/packages/ui`). The code in that package is a custom fork of Shopify's Restyle library.
43 
44## Testing Requirements
45 
46  - Unit tests for all Zustand store files
47  - React Testing Library tests for components filed under a `/components/blocks/` folder
48  - Add presentational elements to Storybook
49  - Run storybook locally: pnpm storybook
50 
51## Core Principles
52 
53  - Prioritize maintainability over development speed
54  - Keep data layer separate from view hierarchy
55  - Write clear, understandable code
56  - Think data first, implement views second
57