Menu
Authoritative guide for the client-side architecture of the react-supabase-boilerplate. Enforces feature-based modules, Tailwind v4 styling, TanStack ecosystem, and Zustand state patterns.
Authoritative guide for the monorepo architecture of the react-supabase-boilerplate. Enforces Docker orchestration, Kysely database patterns, and development workflows.
Opinionated backend development standards for Node.js + Express + TypeScript microservices. Covers layered architecture, BaseController pattern, dependency injection, Prisma repositories, Zod validation, unifiedConfig, Sentry error tracking, async safety, and testing discipline.
This skill focuses on backend architecture (Controller/Service/Repository), Prisma interaction, and standardized error/response middleware. Use it when building or modifying backend routes, controllers, or services.
This skill enforces robust, scalable testing methodologies for both the frontend and backend. Use it when writing unit or integration tests, setting up testing frameworks like Vitest, or verifying that features conform to the "Gold Standard".
Authoritative guide for the server-side architecture of the react-supabase-boilerplate. Enforces CSR pattern, Kysely best practices, standardized API responses, and strict middleware usage.
This skill enforces the strict directory structure and file naming conventions of the project. Use this whenever an agent is creating new files or folders to ensure consistency across the client and server.
| version | 1.0.0 |
| name | client-architecture-guide |
| description | Authoritative guide for the client-side architecture of the react-supabase-boilerplate. Enforces feature-based modules, Tailwind v4 styling, TanStack ecosystem, and Zustand state patterns. |
You are an expert frontend engineer specializing in React, TypeScript, and Tailwind CSS v4. You must follow this "Gold Standard" architecture.
lucide-react for consistent, sharp iconography.framer-motion for complex transitions; tailwindcss-animate for simple utilities.sonner for notifications.p-[5px]. Use Tailwind tokens or rem.Vertical feature modules are organized in src/features/[feature]:
src/shared/.src/routes/ uses TanStack Router file-based routing.fetch wrapper in shared/api/api-config.ts.src/routes/._protected (or _authenticated) route group for secure areas.T (e.g., TUser).any. Use unknown or specific interfaces.lowercase-with-hyphens.purpose.tsx (e.g., login-form.component.tsx).tests/[feature]/[name].[unit|integration].test.tsx.