Initial skills documentation — 25 categories, all SKILL.md + references + scripts

2026-07-15 17:42:20 -04:00
commit 1b4fcd4427
976 changed files with 188344 additions and 0 deletions
@@ -0,0 +1,54 @@
+# Screenshot Submission → AI Extraction → Leaderboard Pattern
+
+Generic pattern for any event/app where users upload a screenshot of a device readout (Dragy, lap timer, dyno sheet, etc.) and AI extracts structured data.
+
+## Architecture
+
+```
+User uploads screenshot
+        ↓
+Web form (WPForms / custom HTML) → N8N webhook
+        ↓
+GPT-4o vision reads image → extracts structured data (lap time, 0-60, Gs, etc.)
+        ↓
+N8N writes to Google Sheet (merged with pre-registration data by email)
+        ↓
+Leaderboard page or TV display pulls from sheet (auto-refresh)
+```
+
+## Key Design Decisions
+
+### Pre-registration + email match
+
+Instead of making users fill in name/car/class on every screenshot upload:
+1. **Registration sheet** — one-time form collecting name, email, vehicle, class
+2. **Submission form** — email + screenshot ONLY
+3. **Merge** — N8N looks up email in registration sheet, appends vehicle info, writes to results sheet
+
+This keeps the upload form dead simple (2 fields) and prevents data entry errors from repeated submissions.
+
+### Why AI vision instead of manual entry
+
+Dragy screenshots have a consistent layout (dark background, big white numbers). GPT-4o can reliably extract:
+- Lap time (e.g. 1:32.45)
+- 0-60 (e.g. 2.8s)
+- 1/4 mile time and trap speed
+- 60-0 braking distance
+- Lateral G and Peak G
+
+No manual typing, no errors from the submitter.
+
+### TV display
+
+Simplest option: **Google Sheets "Publish to web"** — renders as a clean sortable table, auto-updates, runs on any TV with a browser (Chromecast, Apple TV, Roku). Or build a custom HTML page that pulls from the sheet via JS.
+
+## Screenshot submission → AI extraction → leaderboard cycle
+
+See `templates/apex-track-form-and-leaderboard.html` for the full mockup covering:
+- Submit Your Run tab (email + Dragy screenshot upload zone)
+- View Leaderboard tab (class-filterable, ranked, with run detail popup)
+- Sample data showing parsed Dragy metrics
+
+## Portal Mockup
+
+The multi-role RBAC portal mockup (admin vs customer view with server monitoring, DNS, backups, call logs, reports, customer management) lives at `/root/portal-mockup/index.html`. The Apex Dragy form mockup at `/root/portal-mockup/apex.html`. Both served via Tailscale at `/portal`.