Health Platform Repository Context

This skill provides guidance for working with The Body Electric health & fitness platform codebase, part of the Quarterly Systems ecosystem.

What This Does

Provides comprehensive context about The Body Electric repository structure, mini-apps architecture, development workflow, deployment process, and coding standards. Use this when working with code in the kmikeym/the-body-electric repository.

Instructions

When working with The Body Electric repository:

1. **Understand Project Structure**

- Main landing page: `index.html` (static HTML, no build process)

- Mini-apps directory: `/apps/` (each app is self-contained)

- Mini-apps registry: `/apps/mini-apps/index.json` (metadata for all apps)

- Target deployment: `body.quarterly.systems` via Cloudflare Pages

2. **Recognize Mini-Apps Architecture**

- Each mini-app lives in `/apps/[app-name]/`

- Apps are independent and can use different tech stacks

- Categories: body-composition, activity, nutrition, biometrics

- Current active app: Weight Tracker (EWMA-based analysis, 7-day slope, calorie estimation)

- Planned apps: Activity Tracker, Nutrition Log, Biometrics

3. **Follow Data Export Standard**

- Each mini-app exposes standardized data endpoint

- Return format includes: appId, lastUpdated, summary (currentValue, unit, trend, changeRate), recentData, meta

- Enables future unified dashboard aggregation

4. **Adding New Mini-Apps**

- Create directory: `/apps/[app-name]/`

- Update `/apps/mini-apps/index.json` with metadata

- Build with chosen tech stack

- Implement standardized data export endpoint

- Update main landing page with link

5. **Deployment Process**

- Landing page: No build needed, push to `main` auto-deploys to Cloudflare Pages

- Mini-apps: Each has own build process (cd to app directory, run build command)

- Cloudflare Pages serves `/index.html` directly

6. **Branding & Integration**

- Use cyan/blue gradients, dark theme

- Include "a K5M company" footer

- Link to https://quarterly.systems

- Update `quarterly-systems-landing/src/pages/apps.astro` for major features

7. **Weight Tracker Development**

- Location: `/apps/weight-tracker/`

- Tech: React 18, TypeScript, Vite, Fireproof (local-first DB), Recharts, Tailwind

- Testing: Open `/apps/weight-tracker/index.html` directly in browser (no dev server needed)

- Data: Persists in browser IndexedDB

- Important: Fireproof/IPLD cannot encode `undefined` - all document fields must have valid values

8. **Debugging Standards**

- NEVER add debugging code (console.log, debug UI) to production files

- Use browser DevTools console exclusively

- Check console for errors instead of adding debug output

9. **Chrome DevTools MCP Available**

- Browser automation (click, fill forms, navigate, screenshots)

- Performance analysis (traces, Core Web Vitals)

- Network inspection

- Console access

- Device/throttling emulation

10. **Future Roadmap Awareness**

- Unified dashboard aggregating all mini-apps

- Cross-app data sharing

- PWA support for offline capability

- Optional cloud sync with authentication

- Native mobile apps

Usage Example

When asked to "add a sleep tracker mini-app":

1. Create `/apps/sleep-tracker/` directory

2. Update `/apps/mini-apps/index.json`:

```json

{

"id": "sleep-tracker",

"name": "Sleep Tracker",

"category": "biometrics",

"status": "active",

"path": "/apps/sleep-tracker/"

}

```

3. Build app with chosen stack (e.g., React + Fireproof)

4. Implement data export endpoint returning standardized format

5. Update `index.html` to link to new app

6. Push to `main` branch to deploy

Important Notes