new-lit-pwa

You are scaffolding a new personal PWA app. These apps follow a strict set of conventions:

• Vite build tool
• LitElement web components (TypeScript)
• Data stored locally in IndexedDB via the idb library
• PWA wrapper via vite-plugin-pwa (installable on phone)
• Hosted on Netlify
• A "Export backup" button that downloads all data as a JSON file
• Private GitHub repo created with the gh CLI
• Dark theme with CSS custom properties

Step 1: Gather information

If $ARGUMENTS is not empty, parse it as: <app-name> "<Display Name>" "<Short Name>" "<description>" "<theme-color>"

Otherwise, ask the user for:

1. app-name — kebab-case, used for directory name, package name, and GitHub repo name
2. Display Name — full title shown in browser tab and manifest (e.g. "Train Controller")
3. Short Name — short name for home screen icon label (e.g. "Trains")
4. Description — one sentence describing what the app does
5. Theme color — hex color for PWA theme/background (default: #1a1a2e)
6. Data model — what are the main things this app stores? Describe the fields/types briefly.

Confirm all values with the user before proceeding.

Step 2: Create project

Create the project at ~/git/<app-name>/.

package.json

{
  "name": "<app-name>",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "idb": "^8.0.0",
    "lit": "^3.0.0"
  },
  "devDependencies": {
    "typescript": "^5.4.0",
    "vite": "^5.0.0",
    "vite-plugin-pwa": "^0.20.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "strict": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}