render-create 0.1.0

package/templates/cursor/rules/react.mdc

@@ -0,0 +1,200 @@
+---
+description: React patterns for state, forms, icons, and default UI style
+globs: ["**/*.tsx", "**/*.jsx"]
+---
+
+# React Conventions
+
+## Default UI Style: Brutalist
+
+Unless the user specifies a different design direction, use this style:
+
+### Core Principles:
+
+- **Background**: Black (`bg-black` or `bg-zinc-950`)
+- **Text/Accents**: White (`text-white`)
+- **Borders**: Sharp, 1-2px white borders (`border border-white`)
+- **Corners**: NO rounded corners (`rounded-none` always)
+- **Gradients**: NONE - flat colors only
+- **Shadows**: Minimal or none
+
+### Component Examples:
+
+```tsx
+// Button
+<button className="bg-black text-white border border-white px-4 py-2 rounded-none hover:bg-white hover:text-black transition-colors">
+  Click me
+</button>
+
+// Card
+<div className="bg-black border border-white p-6 rounded-none">
+  <h2 className="text-white text-xl font-bold">Title</h2>
+</div>
+
+// Input
+<input className="bg-black text-white border border-white px-3 py-2 rounded-none focus:outline-none focus:ring-1 focus:ring-white" />
+```
+
+### Typography:
+
+- Use system fonts or monospace for brutalist feel
+- Bold headings, regular body text
+- High contrast only
+
+### What to AVOID:
+
+- `rounded-*` classes (except `rounded-none`)
+- `bg-gradient-*` classes
+- Soft shadows (`shadow-sm`, `shadow-md`)
+- Pastel or muted colors
+- Decorative elements
+
+### Required Footer:
+
+Always include a footer with Render docs and GitHub project links:
+
+```tsx
+<footer className="border-t border-white py-4 mt-auto">
+  <div className="flex justify-center gap-6 text-sm">
+    <a 
+      href="https://docs.render.com" 
+      target="_blank" 
+      rel="noopener noreferrer"
+      className="text-white hover:underline"
+    >
+      Render Docs
+    </a>
+    <a 
+      href="https://github.com/render-examples/PROJECT_NAME" 
+      target="_blank" 
+      rel="noopener noreferrer"
+      className="text-white hover:underline"
+    >
+      GitHub
+    </a>
+  </div>
+</footer>
+```
+
+Replace `PROJECT_NAME` with the actual repository name.
+
+## State Management
+
+Use **React hooks + Context** (no external libs unless needed):
+
+```tsx
+// Simple local state
+const [count, setCount] = useState(0);
+
+// Complex local state
+const [state, dispatch] = useReducer(reducer, initialState);
+
+// Shared state via Context
+const UserContext = createContext<UserContextType | null>(null);
+
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}
+
+export function useUser() {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error("useUser must be used within UserProvider");
+  }
+  return context;
+}
+```
+
+## Forms with React Hook Form
+
+```tsx
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+const formSchema = z.object({
+  email: z.string().email("Invalid email"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+  });
+
+  const onSubmit = async (data: FormData) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <input
+          {...register("email")}
+          type="email"
+          placeholder="Email"
+          className="w-full bg-black text-white border border-white px-3 py-2 rounded-none"
+        />
+        {errors.email && (
+          <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>
+        )}
+      </div>
+      
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="w-full bg-white text-black px-4 py-2 rounded-none hover:bg-gray-200 disabled:opacity-50"
+      >
+        {isSubmitting ? "Loading..." : "Submit"}
+      </button>
+    </form>
+  );
+}
+```
+
+## Icons with Lucide React
+
+```tsx
+import { Search, Menu, X, ChevronRight, Loader2 } from "lucide-react";
+
+// Basic usage
+<Search className="w-5 h-5" />
+
+// With color
+<Menu className="w-6 h-6 text-white" />
+
+// Loading spinner
+<Loader2 className="w-5 h-5 animate-spin" />
+
+// In buttons
+<button className="flex items-center gap-2">
+  <Search className="w-4 h-4" />
+  Search
+</button>
+```
+
+### Common Lucide Icons
+
+| Icon | Use Case |
+|------|----------|
+| `Search` | Search inputs |
+| `Menu`, `X` | Mobile nav toggle |
+| `ChevronRight/Left/Up/Down` | Navigation, accordions |
+| `Loader2` | Loading states (add `animate-spin`) |
+| `Check`, `X` | Success/error states |
+| `Plus`, `Minus` | Add/remove actions |
+| `ExternalLink` | External links |

package/templates/cursor/rules/sqlalchemy.mdc

@@ -0,0 +1,205 @@
+---
+description: SQLAlchemy conventions for FastAPI with PostgreSQL
+globs: ["**/models/**/*.py", "**/db/**/*.py", "**/*_model.py"]
+---
+
+# SQLAlchemy Conventions
+
+## Project Structure
+
+### Small projects: Single models file
+```
+project/
+├── app.py
+├── config.py
+├── models.py         # All models
+└── db.py             # Database connection
+```
+
+### Larger projects: Split by domain
+```
+project/
+├── app.py
+├── config.py
+├── db.py
+├── models/
+│   ├── __init__.py   # Re-exports all models
+│   ├── user.py
+│   ├── post.py
+│   └── comment.py
+└── alembic/          # Migrations
+```
+
+## Database Connection (Async)
+
+```python
+# db.py
+from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession
+from sqlalchemy.orm import sessionmaker, declarative_base
+
+DATABASE_URL = "postgresql+asyncpg://user:pass@localhost/dbname"
+
+engine = create_async_engine(DATABASE_URL, echo=True)
+async_session = sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
+
+Base = declarative_base()
+
+async def get_db():
+    async with async_session() as session:
+        yield session
+```
+
+## Model Definition
+
+```python
+# models/user.py
+from sqlalchemy import Column, String, DateTime
+from sqlalchemy.dialects.postgresql import UUID
+from sqlalchemy.sql import func
+import uuid
+
+from db import Base
+
+class User(Base):
+    __tablename__ = "users"
+
+    id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    email = Column(String, unique=True, nullable=False, index=True)
+    name = Column(String, nullable=False)
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    updated_at = Column(DateTime(timezone=True), onupdate=func.now())
+```
+
+## Pydantic Schemas
+
+```python
+# schemas/user.py
+from pydantic import BaseModel, EmailStr
+from datetime import datetime
+from uuid import UUID
+
+class UserBase(BaseModel):
+    email: EmailStr
+    name: str
+
+class UserCreate(UserBase):
+    pass
+
+class UserResponse(UserBase):
+    id: UUID
+    created_at: datetime
+    updated_at: datetime | None
+
+    class Config:
+        from_attributes = True  # Allows ORM model conversion
+```
+
+## FastAPI Integration
+
+```python
+# app.py
+from fastapi import FastAPI, Depends, HTTPException
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select
+
+from db import get_db
+from models.user import User
+from schemas.user import UserCreate, UserResponse
+
+app = FastAPI()
+
+@app.post("/users", response_model=UserResponse)
+async def create_user(user: UserCreate, db: AsyncSession = Depends(get_db)):
+    db_user = User(**user.model_dump())
+    db.add(db_user)
+    await db.commit()
+    await db.refresh(db_user)
+    return db_user
+
+@app.get("/users/{user_id}", response_model=UserResponse)
+async def get_user(user_id: str, db: AsyncSession = Depends(get_db)):
+    result = await db.execute(select(User).where(User.id == user_id))
+    user = result.scalar_one_or_none()
+    if not user:
+        raise HTTPException(status_code=404, detail="User not found")
+    return user
+```
+
+## Async Queries
+
+```python
+from sqlalchemy import select, update, delete
+
+# Select all
+result = await db.execute(select(User))
+users = result.scalars().all()
+
+# Select with filter
+result = await db.execute(select(User).where(User.email == email))
+user = result.scalar_one_or_none()
+
+# Insert
+new_user = User(email="test@example.com", name="Test")
+db.add(new_user)
+await db.commit()
+
+# Update
+await db.execute(
+    update(User).where(User.id == user_id).values(name="Updated")
+)
+await db.commit()
+
+# Delete
+await db.execute(delete(User).where(User.id == user_id))
+await db.commit()
+```
+
+## Relations
+
+```python
+from sqlalchemy import ForeignKey
+from sqlalchemy.orm import relationship
+
+class Post(Base):
+    __tablename__ = "posts"
+
+    id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    title = Column(String, nullable=False)
+    author_id = Column(UUID(as_uuid=True), ForeignKey("users.id"))
+    
+    author = relationship("User", back_populates="posts")
+
+class User(Base):
+    # ... other fields
+    posts = relationship("Post", back_populates="author")
+```
+
+## Alembic Migrations
+
+```bash
+# Initialize
+alembic init alembic
+
+# Generate migration
+alembic revision --autogenerate -m "Add users table"
+
+# Apply migrations
+alembic upgrade head
+
+# Rollback
+alembic downgrade -1
+```
+
+### alembic/env.py (async)
+
+```python
+from sqlalchemy.ext.asyncio import create_async_engine
+from models import Base  # Import your Base
+
+target_metadata = Base.metadata
+
+async def run_async_migrations():
+    connectable = create_async_engine(DATABASE_URL)
+    async with connectable.connect() as connection:
+        await connection.run_sync(do_run_migrations)
+```

package/templates/cursor/rules/tailwind.mdc

@@ -0,0 +1,139 @@
+---
+description: Tailwind CSS conventions with brutalist default style
+globs: ["**/*.tsx", "**/*.jsx", "**/tailwind.config.*"]
+---
+
+# Tailwind CSS Conventions
+
+## Default UI Style: Brutalist
+
+Unless the user specifies a different design direction, use this style:
+
+### Core Palette:
+
+```tsx
+// Background
+className="bg-black"  // or bg-zinc-950
+
+// Text
+className="text-white"
+
+// Borders
+className="border border-white"
+
+// Corners - ALWAYS use rounded-none
+className="rounded-none"
+
+// NO gradients, NO soft shadows
+```
+
+### Brutalist Component Patterns:
+
+```tsx
+// Button
+<button className="bg-black text-white border border-white px-4 py-2 rounded-none hover:bg-white hover:text-black transition-colors">
+
+// Card
+<div className="bg-black border border-white p-6 rounded-none">
+
+// Input
+<input className="bg-black text-white border border-white px-3 py-2 rounded-none focus:outline-none focus:ring-1 focus:ring-white" />
+
+// Link
+<a className="text-white hover:underline">
+```
+
+### What to AVOID:
+
+- `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-full` - use `rounded-none`
+- `bg-gradient-*` - use flat colors
+- `shadow-sm`, `shadow-md`, `shadow-lg` - minimal/no shadows
+- Pastel colors - use high contrast black/white
+
+## Class Organization
+
+Organize classes in **logical groups** (layout → spacing → sizing → colors → effects):
+
+```tsx
+// Good: Logical grouping
+<div className="
+  flex items-center justify-between
+  p-4 gap-2
+  w-full max-w-md
+  bg-black text-white
+  border border-white rounded-none
+  hover:bg-white hover:text-black transition-colors
+">
+```
+
+```tsx
+// Single line for simple elements
+<button className="px-4 py-2 bg-black text-white border border-white rounded-none">
+  Click me
+</button>
+```
+
+## When to Extract Components
+
+**Inline classes first**, extract when:
+- Pattern repeats 3+ times
+- Complex responsive/state logic
+- Needs props for variants
+
+```tsx
+// After extraction (component)
+function Button({ children }: { children: React.ReactNode }) {
+  return (
+    <button className="px-4 py-2 bg-black text-white border border-white rounded-none hover:bg-white hover:text-black transition-colors">
+      {children}
+    </button>
+  );
+}
+```
+
+## Conditional Classes
+
+Use `cn()` utility (from `clsx` + `tailwind-merge`):
+
+```tsx
+import { cn } from "@/lib/utils";
+
+function Button({ variant = "primary", className, ...props }) {
+  return (
+    <button
+      className={cn(
+        "px-4 py-2 rounded-none font-medium transition-colors border",
+        variant === "primary" && "bg-black text-white border-white hover:bg-white hover:text-black",
+        variant === "outline" && "bg-transparent text-white border-white hover:bg-white hover:text-black",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+## Responsive Design
+
+Mobile-first approach:
+```tsx
+<div className="
+  p-4 text-sm
+  md:p-6 md:text-base
+  lg:p-8 lg:text-lg
+">
+```
+
+## Dark Mode
+
+For brutalist style, dark mode is the default. If supporting light mode:
+```tsx
+<div className="bg-black dark:bg-black text-white dark:text-white">
+```
+
+## Avoid
+
+- Don't use `@apply` excessively (defeats Tailwind's purpose)
+- Don't create utility classes that duplicate Tailwind
+- Don't use rounded corners (brutalist style)
+- Don't use gradients (brutalist style)

package/templates/cursor/rules/typescript.mdc

@@ -0,0 +1,112 @@
+---
+description: TypeScript-specific conventions
+globs: ["**/*.ts", "**/*.tsx"]
+---
+
+# TypeScript Conventions
+
+## Functions
+
+Use **named functions** for exports:
+```typescript
+// Good
+export function handleRequest(req: Request): Response {
+  // ...
+}
+
+// Avoid
+export const handleRequest = (req: Request): Response => {
+  // ...
+};
+```
+
+Arrow functions are fine for:
+- Callbacks: `items.map((item) => item.id)`
+- Simple helpers: `const clean = (s: string) => s.trim()`
+
+## If Statements
+
+Always use braces:
+```typescript
+// Good
+if (condition) {
+  return value;
+}
+
+// Bad
+if (condition) return value;
+```
+
+## Naming
+
+- Variables/functions: `camelCase`
+- Types/interfaces/classes: `PascalCase`
+- Constants: `SCREAMING_SNAKE_CASE`
+
+## Type Validation with Zod
+
+Use Zod for runtime validation of external data (API inputs, env vars, config):
+
+```typescript
+import { z } from "zod";
+
+// Define schema
+const UserSchema = z.object({
+  name: z.string().min(1),
+  email: z.string().email(),
+  age: z.number().int().positive().optional(),
+});
+
+// Infer TypeScript type from schema
+type User = z.infer<typeof UserSchema>;
+
+// Validate
+const result = UserSchema.safeParse(input);
+if (!result.success) {
+  return res.status(400).json({ error: result.error.flatten() });
+}
+const user = result.data; // Fully typed
+```
+
+### When to Use Zod
+
+- API request bodies
+- Query parameters
+- Environment variables
+- External API responses
+- Configuration files
+
+### When NOT to Use Zod
+
+- Internal function calls (trust TypeScript)
+- Database query results (trust your ORM)
+
+## Error Handling
+
+```typescript
+try {
+  const result = await apiCall();
+  return res.json(result);
+} catch (error) {
+  console.error("[module] Error:", error);
+  return res.status(500).json({ error: "Internal server error" });
+}
+```
+
+## Project Structure
+
+```
+src/
+├── index.ts      # Entry point: server, middleware, routes
+├── config.ts     # Environment variables, validation schemas
+├── utils.ts      # Helpers, error mapping
+├── types.ts      # Shared types
+└── [feature].ts  # Feature modules
+```
+
+## Linting
+
+Run before committing:
+```bash
+npm run check  # biome check --write src/
+```