Lovable Skills Library 🧩

# 🧠 The Brain Rules
*No sloppy code gets past this one*

Always use TypeScript with strict mode enabled.
Never use the `any` type. Use proper typing or `unknown` instead.
Always add error handling to every API call using try/catch.
Use async/await instead of .then() chains.
Never leave console.log statements in production code.
Always add loading states and error states to every data fetch.

# 🎨 The Vibe Check
*If it doesn't look good, it doesn't ship*

Always use Tailwind CSS for styling. Never use inline styles.
Border radius should always be rounded-xl or rounded-2xl. Never sharp corners.
Primary color is purple (#7C3AED). Secondary is white. Accent is gold (#F59E0B).
Always use shadcn/ui components before building custom ones.
Buttons should always have a hover state and a loading state.
Never use more than 2 font sizes in a single component.
Spacing should always follow the Tailwind spacing scale. No custom pixel values.

# 🗄️ The Vault
*Your database doesn't mess around*

Always use Supabase for all database operations.
Never use SELECT *. Always specify the exact columns needed.
Always enable RLS on every new table.
Every table must have created_at and updated_at timestamp columns.
Always use parameterized queries. Never concatenate user input into queries.
Always check for null or empty results before rendering data.

# 🔐 The Bouncer
*Nobody gets in without proper ID*

Always use Supabase Auth for all authentication flows.
Never store passwords or tokens in localStorage.
Always protect routes that require authentication with a proper auth guard.
Always handle the case where a user session has expired gracefully.
Show a proper loading state while checking auth status on page load.
Never expose user data in URLs or query parameters.

# 📱 The Shapeshifter
*Looks good on everything, everywhere*

Always build mobile first. Start with the smallest screen and scale up.
Every layout must work on 375px width minimum.
Use Tailwind responsive prefixes (sm, md, lg, xl) consistently.
Navigation must collapse into a hamburger menu on mobile.
Touch targets must be at least 44px tall on mobile.
Never use hover-only interactions. Always have a tap equivalent.

# ⚡ The Speed Demon
*Fast is a feature*

Always lazy load images using loading="lazy".
Never import an entire library when you only need one function.
Always paginate lists longer than 50 items. Never fetch unlimited rows.
Use React.memo() on components that receive the same props repeatedly.
Always add database indexes on columns used in filters or joins.
Never run database queries inside a loop.

# 💳 The Cashier
*Money in, no funny business*

Always use Stripe's official npm package. Never call the Stripe API directly from the frontend.
All Stripe operations must go through Supabase Edge Functions.
Never log or expose Stripe secret keys anywhere in the codebase.
Always handle webhook events with proper signature verification.
Always show clear error messages when a payment fails.
Use Stripe's test mode keys during development. Never use live keys in dev.

# 🧩 The Architect
*Every piece has its place*

Every component must have a single responsibility. If it does two things, split it.
Always separate UI components from data fetching logic.
Props must always be typed with a TypeScript interface.
Every component must handle its own loading, error, and empty states.
File names must match component names exactly.
Group components by feature not by type.

# 🪙 The Credit Miser
*Every token counts, spend wisely*

Always make the smallest possible change to achieve the goal.
Never rewrite a whole file when only one function needs changing.
Never refactor code that was not part of the original request.
Never add unrequested features, components, or improvements.
Never reorganize folder structure unless explicitly asked.
Always ask for clarification before making large sweeping changes.
Make surgical edits only. Touch the minimum number of files possible.
Never change styling, naming, or structure of untouched components.
If a fix can be done in 5 lines, do not write 50.
Always confirm scope before starting a task that could affect multiple files.