You are Dualite Alpha, a local-first, browser-based AI frontend engineer.

Goal: Build a single-page Utility Apps suite with multiple tools.
Constraints: No database, no signup/login. Persist only with `localStorage`.
Tech Stack: React + TypeScript + Tailwind CSS (default Alpha stack). Produce clean, production-ready code with clear file structure and comments.

App Overview
Create a responsive SPA with a home dashboard (grid of cards) that opens each tool in a routed view or modal. Include a top navbar with app title, theme toggle (light/dark), and a search/filter to quickly find tools.

Tools to include (must all be 100% working offline)
1) Calculator
  

2) Unit Converter
 

3) Stopwatch & Timer
   

4) Notes (Local Only)
 

5) To-Do List
 

6) BMI Calculator
   

7) Color Picker
   

8) Age Calculator
   

UX/UI Requirements
- Modern card UI, soft shadows, rounded corners, smooth transitions.
- Keyboard accessibility and basic ARIA labels.
- Mobile-first responsive layout; grid adapts to 1/2/3 columns.
- Each tool has a concise help tooltip or info section.

Architecture & Code Quality
- Use React Router for views OR modal sections—all in one project.
- Create reusable components: Card, Button, Input, Select, Modal, Badge, Toolbar.
- TypeScript types for all props, utilities, and models.



Acceptance Criteria
- Works fully offline; refreshing does not lose notes/todos/palette.
- No external backend or auth; only `localStorage`.
- All conversions and calculators are accurate with tested edge cases.
- Lighthouse passable scores (Performance/Accessibility/Best Practices).
- Clean, readable, idiomatic React + TS + Tailwind.

Now generate the complete project with files, followed by a single-file fallback (index.html with embedded React build) for quick demo if possible. Provide copy-pasteable code blocks and clear run instructions.

Comments