You are an expert Frontend Developer and Home Assistant Addon Architect. Your task is to generate a comprehensive, production-ready workspace blueprint and the initial codebase boilerplate for a Home Assistant custom frontend card bundle. 

The architecture is a **multi-card monobundle** powered by **TypeScript**, **Lit**, and **Vite**.

First, ask the user for the following inputs before generating the files:
1. **Addon Name** (e.g., "my-custom-cards")
2. **List of Cards to Create** (e.g., "Room Card, Battery Status Card")
3. **CI/CD Integration**: Ask if they want GitHub Actions workflows configured for release automation.

Once the user provides this information, generate a complete workspace matching the specifications below.

---

## 🛠️ Architecture & Tech Stack Rules

* **Package Manager:** `pnpm`
* **Build Tool:** `Vite` configured to bundle all components, logic, and assets into a single distribution file (`dist/[addon-name].js`) suitable for Home Assistant Lovelace resource loading.
* **UI Framework:** `Lit` (using lit-element and lit-html decorators).
* **Language:** Strict TypeScript.
* **Formatting/Linting:** Biome or ESLint + Prettier (choose a modern, fast setup).

---

## 📂 Project Structure Blueprint

Generate the files according to this exact folder layout:

[addon-name]/
├── .github/                  # (Only if user opted into CI/CD)
│   └── workflows/
│       └── release.yml
├── dist/                     # Target build output
├── src/
│   ├── types/
│   │   └── homeassistant.ts  # Generic Home Assistant/HASS types
│   ├── utils/
│   │   └── localize.ts       # Translation helper
│   ├── localize/
│   │   └── en.json           # Default English translations
│   ├── cards/                # Dedicated folder per card
│   │   ├── [card-1]/
│   │   │   ├── [card-1].ts         # Main Lovelace card component
│   │   │   ├── [card-1]-editor.ts  # Visual UI Editor component
│   │   │   └── types.ts            # Card-specific configuration types
│   │   └── [card-2]/
│   │       ├── [card-2].ts
│   │       ├── [card-2]-editor.ts
│   │       └── types.ts
│   └── main.ts               # Core entrypoint registering all cards to window.customCards
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

## 📝 Implementation Details per File
1. package.json
Configure tasks: "dev": "vite build --watch", "build": "vite build", and lint/format scripts.

Dependencies: Include lit and custom-card-helpers.

DevDependencies: Include typescript, vite, vite-plugin-css-in-js (or similar to bundle styles into the JS), and your formatting/linting tooling.

2. vite.config.ts
Configure Vite to build in library mode.

Output a single bundle file named [addon-name].js inside the dist folder.

Ensure minification is turned on for production builds but keeps code readable enough for debugging in dev mode.

3. src/main.ts (The Registry Entrypoint)
Must hook into window.customCards to register every generated card so they appear natively in the Home Assistant visual card picker dashboard.

Example schema to inject:

TypeScript
window.customCards = window.customCards || [];
window.customCards.push({
  type: 'card-1-tag-name',
  name: 'Card 1 Name',
  preview: true,
  description: 'Description of Card 1',
});
4. src/cards/[card-name]/[card-name].ts (Main Card Boilerplate)
Extends LitElement.

Implements the mandatory Home Assistant Card Interface: setConfig(config) and the set hass(hass) setter.

Includes basic error handling if the config is invalid.

Links to its companion visual editor using a static getConfigElement() method.

5. src/cards/[card-name]/[card-name]-editor.ts (Visual Editor Boilerplate)
Extends LitElement.

Implements setConfig(config) and fires config-changed custom events back to the Lovelace dashboard when fields are mutated.

Renders an example configuration form (e.g., a text input for a card title or an entity selector dropdown).

6. src/utils/localize.ts & src/localize/en.json
A clean translation function that reads keys from the JSON structure depending on the current hass.language or defaults to en.

## 🎯 Verification Checklist
At the end of your generation, provide a checklist for the user detailing how to test and run their newly bootstrapped environment, including:

Running pnpm install.

Running pnpm dev to start the reactive build.

Adding the dist/[addon-name].js file as a /local/ Lovelace resource in Home Assistant.

Verifying the cards show up properly in the dashboard UI editor.

As you can see, it is very detailed and it can work very well for your next Home Assistant Card. Anyway, you don’t need to use it as-is — you can change whatever you need, or continue iterating with the LLM

Tips and tricks

• Ask the LLM to not fill the gaps by assuming things and to ask you: “Ask me any gap or doubt you have”
• Give it context: For example, a reference: e.g. “I want to generate a prompt to do text correction based on the following text style: [REFERENCE TEXT]”
• Ask the LLM to behave as a specific role if needed: e.g. “You are a Literature Nobel Prize winner writer…”. It forces the LLM to ask questions and solve problems with domain-specific context
• Read the results carefully to ensure they fit what you expect and to detect missing elements
• Don’t settle for just one result. As LLMs are not deterministic, every time you ask for a prompt you will get a different output. Generate at least 2 and get the better parts or ideas from both to create one.

Image to prompt

Did you see an image you liked and you want to generate your version using an AI? You can just paste the image and tell the LLM the changes you made, but you can also do something smarter, reusable and repeatable:

Describe image style from an image

Imagine you want to create images with the same visual style as the “Steamboat Willie” movie (as it is a public domain movie now)

✕←

→