# Design system — instructions for Claude Code

This folder is the design source for the Home Assistant tab. When you change any HA tab UI
(cards, panels, focus, remote handling, hint bar):

1. Read `ux-mechanics.md` Part A, then the section for the card you are touching. Implement
   the numbers exactly (0.4 s hold, act on release, 200 ms send debounce, steps, clamps).
2. Take sizes, colours and timings from `tokens.json`; don't invent new constants.
3. Match the layout in `components.md` and the matching render in `screens/`. When you can
   render a desktop screenshot (`--script … --screenshot`), compare it against that PNG.
4. Work one card at a time, and say which rules you could not verify without the TV.
5. Room card photos are provided by Home Assistant (each area's picture), fetched and cached at runtime
   as `ux-mechanics.md` §B11 describes. Never add room photos to the repo, the IPK or Luma's settings.
6. If the code and this folder disagree, follow this folder and point out the difference.
   Don't edit files here unless asked — they're exported from the design canvas.