Skip to content

CLAUDE.md

Latest commit

 

History

History
74 lines (53 loc) · 2.96 KB

CLAUDE.md

File metadata and controls

74 lines (53 loc) · 2.96 KB

Overview

This is a frontend template for web-based projects that ensures consistency across all applications. It utilizes React, Tailwind, @thatsit/ui, TypeScript, Dexie, and Zustand. Every app we build with this template should be local-first and have the ability to work offline.

Read more about the purpose and logic of this particular app in @README.md

Guidelines

  • ALWAYS use @thatsit/ui components for UI. Avoid creating anything custom unless absolutely necessary. Ask first.
  • ALWAYS use @thatsit/ui CSS variables for colors (--bg, --text-primary, --primary, etc.)
  • ALWAYS use @thatsit/ui fonts (Inter for body, Nunito for headings, Work Sans for quotes)
  • ALWAYS use Zustand for state management. Never use React Context.
  • Use Tailwind for styling, but prefer @thatsit/ui component props when available.
  • Prioritize simplicity.

PWA Requirements

Every app MUST be a proper PWA:

  • Use vite-plugin-pwa with registerType: 'autoUpdate'
  • Include proper manifest with icons (192x192 and 512x512)
  • Support offline mode via service worker
  • Use viewport-fit=cover for iOS safe area support
  • Wrap content in Layout.tsx which handles safe-area insets

iOS Safe Area Support

The template includes automatic safe-area handling for iOS PWAs:

  • index.html has viewport-fit=cover in the viewport meta tag
  • index.css exposes safe-area-inset CSS variables
  • Layout.tsx applies padding using max(1rem, var(--safe-area-inset-*, 0px))

Do NOT modify this safe-area setup unless you understand iOS PWA edge cases.

Setup Checklist for New Apps

When creating a new app from this template:

  1. Update index.html:

    • Change <title> to your app name (e.g., Tasks | That's It)
    • Update apple-mobile-web-app-title meta tag
    • Update description meta tag

  2. Update vite.config.ts PWA manifest:

    • Change id to unique app ID (e.g., /tasks-thatsit/)
    • Change name to full app name
    • Change short_name to short display name
    • Update description

  3. Create app icons:

    • Create your SVG icon in public/favicon.svg
    • Copy to public/mask-icon.svg
    • Update paths in scripts/generate-icons.mjs
    • Run node scripts/generate-icons.mjs

  4. Update src/lib/syncConfig.ts:

    • Change appId from 'my-app' to your app name (e.g., 'tasks', 'calendar')
    • Change tables from ['items'] to your actual Dexie table names
    • The appId must be registered on the sync backend or auth will fail with "Invalid App"

  5. Update src/lib/db.ts:

    • Replace the example Item interface with your app's data types
    • Update the Dexie schema to match your tables
    • Update serializeEntity and deserializeEntity for your types

  6. Register the app on sync backend (sync.thatsit.app) if using sync

Useful Commands

  • pnpm install - installs dependencies
  • pnpm dev - starts the development server
  • pnpm build - builds the project for production
  • node scripts/generate-icons.mjs - generates PWA icons from SVG