mxstbr.com Cursor Rules

Tech Stack

• Next.js v15 with App Router
• TailwindCSS with custom configuration
• TypeScript (relaxed mode: strict: false)
• MDX for content
• React Server Components (default) and Client Components

Code Conventions

Component Structure

• Use named exports: export function ComponentName()
• Functional components with hooks
• Props typed with inline interfaces or type aliases
• Default to Server Components; use Client Components when needed

TypeScript Patterns

• Use import type for type-only imports
• Define props interfaces inline or as separate types
• Relaxed TypeScript settings (strict: false, strictNullChecks: true)

Styling with Tailwind

• Use Tailwind classes with dark mode support patterns: dark:text-slate-100
• Consistent spacing with space-y-* classes
• Custom Tailwind colors: slate-350, yellow-slate-100
• Typography plugin with custom "slate" theme

File Organization

• App Router structure with page.tsx files
• Components in app/components/ directory
• Feature-based directories (cal/, finance/, notes/, etc.)
• kebab-case for file names and directories
• PascalCase for component names
• camelCase for variables and functions

Next.js Patterns

• Export metadata objects for SEO
• Use revalidate and dynamic exports for caching control
• Dynamic routing with [slug] directories
• Import Next.js components from next/* (Image, Link, etc.)

Static Assets

• Files in /public are automatically served and accessible via URL paths
• Reference public assets with leading slash: /static/images/file.png
• No need to copy files already in public directory - use existing paths
• For icons and images, use existing assets from /public/static/images/

Import Style

• Relative imports for local components: './component' or '../component'
• Feature imports: 'app/feature/utils'
• External libraries: standard npm imports

Common Patterns

• Use space-y-* for vertical spacing between elements
• Consistent color scheme: slate palette with dark mode
• ItemList/ItemListItem pattern for structured content
• Section component for page organization
• Prose component for text content

mxstbr.com

This is the source for my personal website and blog mxstbr.com.

Tech Stack

• Next.js v15
• TailwindCSS
• TypeScript
• MDX

Development

pnpm install

pnpm dev

Env vars

# Used to get the repositories of my OSS projects. Get from github.com
GITHUB_ACCESS_TOKEN=
# Used to store view counts of essays & notes. Get from upstash.com
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN==
# Used to store the notes content. Get from Hashnode.com
HASHNODE_ACCESS_TOKEN=
# Optional: Used to send emails to Max from the feedback form. Get from resend.com
RESEND_API_KEY=
# Optional: Used on the /cal page for auth. Pick any random string.
CAL_PASSWORD=
# Used to authenticate Pebble Index recording webhooks. If unset, the endpoint
# derives a stable webhook token from UPSTASH_REDIS_REST_TOKEN.
PEBBLE_INDEX_WEBHOOK_TOKEN=
# Optional: Max accepted Pebble Index recording payload size in bytes. Defaults to 4000000.
PEBBLE_INDEX_MAX_BYTES=
# Optional: Override the MacWhisper CLI used by `pnpm process-index-recordings --transcribe`.
MACWHISPER_CLI_PATH=/usr/local/bin/mw
# Optional: Local transcription timeout in milliseconds. Defaults to 300000.
PEBBLE_INDEX_TRANSCRIPTION_TIMEOUT_MS=
# Used by `pnpm reflect-append-daily-note` for Pebble note-to-self captures.
REFLECT_ACCESS_TOKEN=
REFLECT_GRAPH_ID=mxstbr
# Optional: Reflect list name used inside the daily note. Defaults to "Pebble Index".
REFLECT_DAILY_NOTE_LIST_NAME="Pebble Index"

Append a note under the Pebble Index list in today's Reflect daily note:

pnpm reflect-append-daily-note --recording-id idx_example --content "Remember to follow up on the contract."

License

Licensed under the MIT License. Feel free to use parts of the code in your own projects with attribution!