# Screenshot Library — Sprocketts + Kanamé Reusable

Single source for all visual assets used in onboarding docs, Notion hubs, case studies, and client materials. Screenshots live here once and are referenced from anywhere.

## Structure

```
screenshot-library/
├── kaname/                        ← Reusable across white-label Kanamé clients
│   ├── staff-activation/          ← Welcome email → login → set password (universal)
│   ├── staff-profile-setup/       ← Calendar settings → staff edit (groomer + service-staff universal)
│   ├── leadconnector-app/         ← Mobile app screens (universal)
│   └── workflows/                 ← Kanamé workflow internals (audit captures)
└── sprocketts/                    ← Sprocketts-specific
    ├── customer-portal/           ← Existing-customer login → home → My Dogs
    ├── customer-signup/           ← /jointhepack new client signup flow
    ├── customer-existing-login/   ← Real migrated customer flow (HOLD vax, sign agreements)
    ├── booking-pages/             ← Daycamp, boarding, grooming, training booking captures
    ├── staff-ops-portal/          ← Sprocketts custom staff tool
    └── doghouse-community/        ← Group/community screenshots
```

## Naming Convention

`{nn}-{slug}-{viewport}.png`

- `nn` = sequence number within folder (01, 02, 03…)
- `slug` = kebab-case description of what's in the shot
- `viewport` = `desktop` | `mobile` | (omit for shots that aren't viewport-specific like email screenshots)

Examples:
- `01-welcome-email.png`
- `02-login-screen-desktop.png`
- `03-set-password-mobile.png`
- `08-staff-board-cards-desktop.png`

## How to Add New Captures

1. Decide: is this Kanamé universal (any white-label client could reuse) or Sprocketts-specific?
2. Drop into the matching folder
3. Follow the naming convention
4. Reference by relative path from any consuming doc

## Reuse for Other Clients

When onboarding a new white-label Kanamé client (e.g. another DDC, a SaaS sub-account):
1. Copy `kaname/` wholesale into the new client's project
2. Create a sibling folder `{newclient}/` mirroring `sprocketts/`'s internal structure
3. Capture client-specific screens into the new folder
4. Onboarding docs reference both `kaname/` and `{newclient}/` paths

## Notes

- Original groomer manual v9 (`projects/staff-manual/groomers-manual-v9.html`) still references the old `sprk-groomers-onboarding-pdf-document/project/assets/web/` paths. Don't move those — copy.
- Cleanup of duplicate folders (`DESIGN_HANDOFF_groomers-manual 2/`, `uploads/`) is a separate post-launch task.