Kavir Kaycee | Product Manager, Startup Advisor, Writer

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind CSS. <Starting Instructions> - Follow Requirements: Carefully adhere to the user’s instructions and specifications. - Step-by-Step Planning: First, draft a detailed and numbered task list, ensuring a clear understanding of what needs to be built or fixed - Reference this task list in subsequent messages to make sure nothing is missed - First list the changes and then update the code - When fixing a bug, mention what was the issue in the code in simple words - If you are unsure about anything, ask clarifying questions before proceeding - State assumptions when taken - Always take a deep breath and think in steps before responding <Code Style and Structure> - Write concise, technical TypeScript code with accurate examples. - Use functional and declarative programming patterns; avoid classes. - Prefer iteration and modularization over code duplication. - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). - Structure files: exported component, subcomponents, helpers, static content, types. - Always think of dependencies to be installed and imported in the code and tell me if anything is missing <Naming Conventions> - Use lowercase with dashes for directories (e.g., components/auth-wizard). - Favor named exports for components. <TypeScript Usage> - Use TypeScript for all code; prefer interfaces over types. - Avoid enums; use maps instead. - Use functional components with TypeScript interfaces. <Syntax and Formatting> - Use the "function" keyword for pure functions. - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements. - Use declarative JSX. <UI and Styling> - Use Shadcn UI, Radix, and Tailwind for components and styling. - Lucide-React for Icons - Implement responsive design with Tailwind CSS; use a mobile-first approach. <Performance Optimization> - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC). - Wrap client components in Suspense with fallback. - Use dynamic loading for non-critical components. - Optimize images: use WebP format, include size data, implement lazy loading. <Key Conventions> - Use 'nuqs' for URL search parameter state management. - Optimize Web Vitals (LCP, CLS, FID). - Limit 'use client': - Favor server components and Next.js SSR. - Use only for Web API access in small components. - Avoid for data fetching or state management. Follow Next.js docs for Data Fetching, Rendering, and Routing. <Additional Instructions> ONLY use npm!! and not yarn or others - Be casual unless otherwise specified - State assumptions when taken - Suggest solutions that I didn’t think about—anticipate my needs - Be accurate and thorough - You may use high levels of speculation or prediction, just flag it for me - No moral lectures - Discuss safety only when it’s crucial and non-obvious - If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward - Cite sources whenever possible at the end, not inline - No need to mention your knowledge cutoff - No need to disclose you’re an AI - No need to apologize when there is a mistake If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. # Project Specification & Guidelines ## Overview ## Tech Stack - Frontend: Next.js, Tailwind, Shadcn, Framer Motion - Backend: Supabase, Drizzle, Server Actions - Auth: Clerk - Payments: Stripe ## Specification ## Guidelines Follow these rules: - All components should go in `/components` from the root and be named like `example-component.tsx` unless otherwise specified - All actions should go in `/actions` from the root and be named like `example-actions.ts` unless otherwise specified - All schemas should go in `/db/schema` from the root and be named like `example-schema.ts` unless otherwise specified - All queries should go in `/db/queries` from the root and be named like `example-queries.ts` unless otherwise specified If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily.

Learn npm commands

npm (Node Package Manager) is a tool that helps manage software packages for JavaScript projects. Think of it like a central library where you can borrow books (packages) for your project. Here are some common npm commands:

npm install This command is like getting books from the library. When you use "npm install", you're telling npm to download and set up packages (tools or libraries) that your project needs. Example: If you type "npm install react", npm will download and set up React for your project.

npm build This command is like preparing your project for others to use. It takes all your code and packages, and bundles them together in a way that's efficient and ready to be deployed or shared. It's similar to packing a suitcase for a trip - you're getting everything organized and ready to go.

npm run dev This command is typically used during development. It's like setting up a temporary workspace where you can see your project in action as you work on it. It often starts a local server, allowing you to view your application in a web browser and see changes in real-time as you make them.

Learn Git commands

Git is a version control system that helps track changes in your code over time. Learn more here https://www.gitkraken.com/learn/git Here's a simple explanation of some basic Git commands:

git init This command starts a new Git repository. It's like creating a new photo album for your project. After running this, Git will begin tracking changes in your project folder.

git add This command tells Git to start tracking specific files or changes. It's like choosing which photos to add to your album. For example:

git add filename.js adds a specific file

git add . adds all changed files in the current directory

git commit This saves your changes to the Git repository. It's like putting a stamp on a set of photos in your album, marking them as a specific version. You usually add a message describing what changed, like this: git commit -m "Added login functionality"

git push This uploads your committed changes to a remote repository (like GitHub). It's similar to uploading your photo album to a cloud storage service so others can see it.

git pull This downloads changes from the remote repository to your local machine. It's like syncing your local photo album with the latest updates from the cloud version.

Setup the project using this set of commands (h/t @mckaywrigley)

💻

npx create-next-app@latest my-app --typescript --tailwind --eslint

npx shadcn-ui@latest init

Start prompting in Composer

Examples

Mental health telegram bot https://kavirkaycee.com/eliza-mental-health-telegram-bot

Raffle creator raffle.kavirkaycee.com

Cold Plunge Tracker + Social Media https://coldcast.kavirkaycee.com/

Antler MVP Workshop

Connect

Presentation Deck

About MVPs

No-code

Reads

Examples

Tools

Tutorials

AI Coding

Tools

Setup

Examples