Provides repository structure, architecture, and development guidelines for The Body Electric health & fitness platform with mini-apps system
This skill provides guidance for working with The Body Electric health & fitness platform codebase, part of the Quarterly Systems ecosystem.
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.
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
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/health-platform-repository-context/raw