# Storage Lovable

> Lovable-generated UI layer for the Storage Container Go-NoGo feasibility analysis tool. Trigger on: Lovable, lovable.dev, lovable-tagger, componentTagger, UI scaffolding, frontend generation, Vite config, ShadCN components, or any reference to the original app generation history. Also trigger when discussing the React frontend architecture, component library choices, or the export-to-GitHub workflow that produced this codebase. If someone asks "where did this frontend come from" or "why is the code structured this way," this skill has the answer.

- Skill: `djb258/storage-lovable` (Agent Skill)
- Install (CLI): `npx skillmds@latest add djb258/storage-lovable`
- Raw SKILL.md: https://api.skillmd.com/api/skills/djb258/storage-lovable/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: djb258 (https://skillmd.com/u/djb258)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/djb258/storage-lovable

---


# Storage Lovable — Car Skill

This repo's frontend was generated by Lovable.dev and exported to GitHub. Lovable is no
longer in the loop — all ongoing development happens in Cursor / Claude Code. The Lovable
origin explains the code structure, component patterns, and technology choices.

## What Lovable Generated

The Storage Container Go-NoGo tool is a React + TypeScript application for evaluating
self-storage facility feasibility across US ZIP codes. Lovable produced:

- React 18.3 frontend with Vite 5.4 build tooling
- ShadCN/ui component library (Radix primitives + Tailwind CSS)
- Supabase integration for auth and data
- Routing via react-router-dom 6.30
- Data visualization with Recharts 2.15
- Map integration with Leaflet 1.9 and Mapbox GL 3.16
- Form handling with react-hook-form 7.61 + Zod 3.25 validation

## Lovable Artifacts Still in Codebase

| Artifact | Location | Purpose |
|----------|----------|---------|
| `lovable-tagger` | devDependencies (v1.1.11) | Component tagging for Lovable platform |
| `componentTagger()` | `vite.config.ts` | Dev-mode only plugin, stripped in production |
| Component patterns | `src/` | ShadCN/Radix-based component structure |

**`lovable-tagger` is harmless.** It only runs in development mode (`mode === "development"`
in vite.config.ts). It tags components for Lovable's visual editor. Since we no longer use
Lovable for editing, it is inert. Removing it is optional cleanup.

## Tech Stack (Lovable Choices)

| Layer | Technology | Version |
|-------|-----------|---------|
| Framework | React | 18.3.1 |
| Build | Vite | 5.4.19 |
| Language | TypeScript | 5.8.3 |
| Styling | Tailwind CSS | 3.4.17 |
| Components | ShadCN/ui (Radix primitives) | Multiple @radix-ui packages |
| State | TanStack React Query | 5.83.0 |
| Forms | react-hook-form + Zod | 7.61.1 / 3.25.76 |
| Routing | react-router-dom | 6.30.1 |
| Charts | Recharts | 2.15.4 |
| Maps | Leaflet + react-leaflet + Mapbox GL | 1.9.4 / 4.2.1 / 3.16.0 |
| DB Client | @supabase/supabase-js | 2.84.0 |
| DB (Neon) | @neondatabase/serverless | 0.9.0 (devDep) |
| Diagrams | Mermaid | 11.12.2 |
| Drawer | Vaul | 0.9.9 |

## Path Aliases

Configured in `vite.config.ts`:

| Alias | Path |
|-------|------|
| `@` | `./src` |
| `@sys` | `./src/sys` |
| `@data` | `./src/data` |
| `@app` | `./src/app` |
| `@ai` | `./src/ai` |
| `@ui` | `./src/ui` |

## Pipeline Position

```
Lovable (generated MVP) → GitHub (exported) → Cursor / Claude Code (current development)
```

This repo is **post-export**. Lovable cannot import from an existing GitHub repo, so
there is no going back. All development, bug fixes, and feature work happen in
Cursor or Claude Code.

## What This Means for Development

1. **Component patterns are Lovable-style.** ShadCN/Radix components with Tailwind.
   This is a reasonable pattern — keep using it.
2. **Some generated code may be suboptimal.** Lovable optimizes for "working fast," not
   "working clean." Expect tight coupling in places.
3. **Do not try to re-import into Lovable.** The codebase has diverged significantly.
   The zip import workaround is not viable for an active project.
4. **The debugging loop is over.** One of Lovable's main pain points (AI fix loops burning
   credits) no longer applies — we fix bugs directly.

## Known Lovable-Origin Issues

- **Generic UI patterns:** Some views may look template-like. Customize as needed.
- **Tight coupling:** Business logic may be embedded in component files rather than
  separated into services. Refactor incrementally.
- **No test coverage from Lovable:** Lovable does not generate tests. The repo has
  `vitest` configured (`vitest.config.ts`) for tests added post-export.

## Cost Profile

| Component | Status | Cost |
|-----------|--------|------|
| Lovable subscription | No longer needed | $0 |
| Lovable credits | No longer consumed | $0 |

Lovable is a sunk cost. All ongoing costs are Cursor/Claude Code licenses, Supabase,
Neon, and API keys (Census, Google Maps, Data.gov, etc.).