# AI_GUIDE — App 15 · PawCare

**Goal:** rebuild this app exactly, or build a new app in the same style.

## Files
| File | Role |
|---|---|
| `App 15 - PawCare.html` | Fonts + all CSS (`:root` tokens, then one block per screen) |
| `src/screens.jsx` | Every screen component, plus `App()` which places the phones on the 1024×768 stage |
| `../shared/kit.jsx` / `kit.css` | `Stage`, `Phone`, `StatusBar`, `I` (icon set), `Img`, `useToast`, `usePersist`, `BRAND` |
| `tokens.json` | All CSS variables + component specs |
| `../../refs/r15-pawcare.png` | Original reference screenshot. Compare against it |

Load order: React → ReactDOM → Babel → `kit.jsx` → `screens.jsx`.

## Rebuild exactly
1. Copy the HTML `<head>` (font link + `<style>`) and the two kit files.
2. Recreate each screen from DESIGN_SYSTEM §4, using only the classes in §3.
3. Position phones as in `App()` (absolute left/top on the stage).
4. Check side by side with the reference: colours come from `:root`, and the text scale from the CSS.

## Clone the style for another product
- Keep the frame (`--pw --ph --pr --pb --frame --frame-ring`), the radius scale and the component shapes.
- Change only the accent tokens and the content arrays at the top of `screens.jsx`.
- Put the brand name through `BRAND`, in a slot that already holds text (a logo, card title or role line) and with the same style. Never add a new badge for it.

## Porting
- **SwiftUI:** each `.class` maps to a `ViewModifier`. Pills are `Capsule()`, cards `RoundedRectangle(cornerRadius:)`. Use the colours from `tokens.json`, and system materials where the CSS uses `backdrop-filter`.
- **React Native:** use the same values in `StyleSheet`. Glass needs `expo-blur`.
- **Web:** use the files as they are (plain React + CSS).

## Checklist
- [ ] Colours match `:root` (sampled from the reference).
- [ ] No text wraps where the reference is single-line (`white-space:nowrap`).
- [ ] Every selectable element has a visible selected state.
- [ ] "Cyborg Design" appears only in the documented slot, in the original style.
- [ ] Photos are licensed; no third-party logos or trademarks.