karlmarxican/karlmarxican-first-assistant icon
public
Published on 5/9/2025
My First Assistant

My first assistant for TypeScript, React, TanStack Forms, daisyUI, Go, and Postgres

Rules
Models
Context
mistral Codestral model icon

Codestral

mistral

# React, TypeScript, TailwindCSS, daisyUI, + Go, PostgreSQL

## Core Framework & Structure
- **Project Type:** Standard React application (e.g., created with Vite or similar, NOT Next.js).
- **Frontend Core:** React with TypeScript.
    - Create components as functional components using modern React Hooks.
    - TypeScript files should use `.tsx` for components with JSX, and `.ts` for other TypeScript logic.
    - Frontend source code resides in the `./frontend/` directory.
- **Frontend Routing:** React Router (v6/v7).
    - Define routes clearly using React Router components (e.g., `<BrowserRouter>`, `<Routes>`, `<Route>`).
    - Implement protected routes for authenticated users.
- **Backend Core:** Go (Golang) with the Fiber web framework (preferred, Gin acceptable if specified).
    - Backend source code resides in the `./backend/` directory.
    - The main entry point for the backend server is `./backend/cmd/server/main.go`.
    - Structure Go code logically (e.g., `internal/handlers`, `internal/models`, `internal/services`, `internal/middleware`, `pkg/utils`, `internal/config`, `internal/database`).
- **Database:** PostgreSQL.

## Styling & UI Components (Frontend)
- **Styling:** Tailwind CSS is the primary styling solution. Apply utility classes directly.
- **UI Component Library:** daisyUI (as a Tailwind CSS plugin).
    - **Use daisyUI components and their classes directly.** Do not create abstract wrapper components around basic daisyUI elements unless for highly complex, reusable composite UI patterns not achievable with direct daisyUI classes. Focus on using classes like `btn`, `card`, `input`, `modal`, `table`, etc.
    - Assume daisyUI is configured and its classes are available.

## Data Fetching & State Management (Frontend)
- **Frontend Data Fetching (Server State):** SWR (stale-while-revalidate) with Axios.
    - Use the `useSWR` hook for data fetching.
    - Configure SWR to use Axios as its fetcher function.
    - Implement proper SWR key management.
    - For mutations (POST, PUT, DELETE), use Axios directly, and then use SWR's `mutate` function to revalidate related data.
- **HTTP Client:** Axios for all API communication (both within SWR fetchers and for standalone mutation requests).
- **Form Handling:** TanStack Forms.
    - Utilize hooks and components from `@tanstack/react-form`.
    - Manage form state, validation, and submission.
- **Validation:** Zod.
    - Define Zod schemas for data validation (forms, API request/response DTOs).
    - Integrate Zod with TanStack Forms.
- **Global Client State Management:** Zustand.
    - Define Zustand stores with clear state and actions for managing global client-side UI state or other complex client states not directly tied to server data.

## Database & Backend Logic
- **Database ORM (Backend):** GORM for Go.
    - Define GORM models for database entities in the `./backend/internal/models` directory.
    - Write GORM queries for database interactions within service or handler layers.
- **API Design (Backend):** RESTful APIs.
    - Clearly define request (DTOs) and response structures (using Go structs) for API endpoints.
- **Authentication (Backend):** JWT-based.
    - Implement JWT generation on login and validation via middleware in the Go backend.

## Code Formatting & Naming Conventions
- **Code Style (General):** Follow the AirBnB JavaScript Style Guide (with appropriate adaptations for TypeScript/React). For Go, follow idiomatic Go style (e.g., `gofmt`/`goimports`).
    - Prioritize readability and consistency.
- **React File Naming:** Use PascalCase for React component files (e.g., `ClientIntakeForm.tsx`, not `client-intake-form.tsx`).
- **React Component Exports:** Use named exports for React components.
    ```typescript jsx
    // Correct:
    export function MyComponent() { /* ... */ }
    ```
- **Go File Naming:** Use `snake_case.go` for Go files (e.g., `user_model.go`, `auth_handler.go`).
- **TypeScript File Extensions:** Use `.tsx` for files containing JSX, and `.ts` for plain TypeScript files.

## Critical Project Constraints (REMINDER)
- **Strictly Local Deployment:** NO Docker, NO Kubernetes, NO Cloud Services. System runs on agency's local servers. Manual setup and operation procedures are expected.
- **Security is Paramount:** Implement RBAC, data encryption (in transit and at rest for PII/PHI), comprehensive audit logging, secure password handling (bcrypt), protection against common web vulnerabilities (OWASP Top 10), and adherence to HIPAA privacy and security principles.
- **Modular Architecture:** Design both frontend and backend with clear separation of concerns and well-defined APIs to allow for future, independent module development.

## Development Process & LLM Interaction
- **Focus:** **DO NOT PROVIDE PROJECT SETUP INSTRUCTIONS.** Assume the React and Go projects, Tailwind, daisyUI, GORM, PostgreSQL connection, SWR/Axios setup, etc., are already configured or that setup instructions will be handled separately.
- **Action:** Jump directly to writing components, functions, API endpoints, GORM models, Zod schemas, Zustand stores, SWR hooks, etc., as requested for the features.
- **File Paths:** When generating code, be mindful of the `./frontend` and `./backend` directory structure.
- **Imports:** Include all necessary imports for the code you generate.
- **Completeness:** Provide complete, runnable (or near-runnable within its context) code snippets.
- **TypeScript (Frontend):** All frontend code should be written in TypeScript using strong typing.
- **Go (Backend):** All backend code should be idiomatic Go.
- **Documentation** Continuously update README.md when new features and Functions are implemented
- **Planning** For complex tasks that require multiple steps, first update PLAN.md then references PLAN.md as the task is being developed
- **Current Task** Tracking for the current task should be kept in TASK.md
- **Progress** Keep track of all progress in the PROGRESS.md file. You should only add to or modify this file. You must not delete anything from it. 
- **API Tracking** All API names, purposes, and functions should be explained in the APIs.md file
Reacthttps://react.dev/reference/
PostgreSQLhttps://www.postgresql.org/docs/current/index.html
TypeScripthttps://www.typescriptlang.org/docs/
daisyUI https://daisyui.com/docs/intro/
Go Docshttps://go.dev/doc/
TanStack Formshttps://tanstack.com/form/latest/docs

Prompts

Learn more

No Prompts configured

Context

Learn more
@code
Reference specific functions or classes from throughout your project
@docs
Reference the contents from any documentation site
@diff
Reference all of the changes you've made to your current branch
@terminal
Reference the last command you ran in your IDE's terminal and its output
@problems
Get Problems from the current file
@folder
Uses the same retrieval mechanism as @Codebase, but only on a single folder
@codebase
Reference the most relevant snippets from your codebase

No Data configured

MCP Servers

Learn more

No MCP Servers configured