erichowens

sobriety-tools-guardian

20
3
# Install this skill:
npx skills add erichowens/some_claude_skills --skill "sobriety-tools-guardian"

Install specific skill from multi-skill repository

# Description

Performance optimization and continuous improvement for sobriety.tools recovery app. Use for load time optimization, offline capability, crisis detection, performance monitoring, automated issue detection. Activate on "sobriety.tools", "recovery app perf", "crisis detection", "offline meetings", "HALT check-in", "sponsor contacts". NOT for general Next.js help, unrelated Cloudflare Workers, or non-recovery apps.

# SKILL.md


name: sobriety-tools-guardian
description: Performance optimization and continuous improvement for sobriety.tools recovery app. Use for load time optimization, offline capability, crisis detection, performance monitoring, automated issue detection. Activate on "sobriety.tools", "recovery app perf", "crisis detection", "offline meetings", "HALT check-in", "sponsor contacts". NOT for general Next.js help, unrelated Cloudflare Workers, or non-recovery apps.
allowed-tools: Read,Write,Edit,Bash,Grep,Glob,Task,WebFetch


Sobriety Tools Guardian

Mission: Keep sobriety.tools fast enough to save lives. A fentanyl addict in crisis has seconds, not minutes. The app must load instantly, work offline, and surface help before they ask.

Why Performance Is Life-or-Death

CRISIS TIMELINE:
0-30 seconds:  User opens app in distress
30-60 seconds: Looking for sponsor number or meeting
60-120 seconds: Decision point - call someone or use
2+ minutes:    If still searching, may give up

EVERY SECOND OF LOAD TIME = LIVES AT RISK

Core truth: This isn't a business app. Slow performance isn't "bad UX" - it's abandonment during crisis. The user staring at a spinner might be deciding whether to live or die.

Stack-Specific Optimization Knowledge

Architecture (Know This Cold)

Next.js 15 (static export) β†’ Cloudflare Pages
    ↓
Supabase (PostgREST + PostGIS)
    ↓
Cloudflare Workers:
  - meeting-proxy (KV cached, geohash-based)
  - meeting-harvester (hourly cron)
  - claude-api (AI features)

Critical Performance Paths

1. Meeting Search (MUST be <500ms)

User location β†’ Geohash (3-char ~150km cell)
    β†’ KV cache lookup (edge, ~5ms)
    β†’ Cache HIT: Return immediately
    β†’ Cache MISS: Supabase RPC find_current_meetings
        β†’ PostGIS ST_DWithin query
        β†’ Store in KV, return

Bottleneck: Cold Supabase queries. Fix: Pre-warm top 30 metros via /warm endpoint.

2. Sponsor/Contact List (MUST be <200ms)

User opens contacts β†’ Local IndexedDB first
    β†’ Show cached contacts instantly
    β†’ Background sync with Supabase
    β†’ Update UI if changes

Anti-pattern: Waiting for network before showing contacts. In crisis, show stale data immediately.

3. Check-in Flow (MUST be <100ms to first input)

Open check-in β†’ Pre-rendered form shell
    β†’ Load previous patterns async
    β†’ Submit optimistically

Offline-First Requirements (NON-NEGOTIABLE)

// Service Worker must cache:
const CRISIS_CRITICAL = [
  '/contacts',           // Sponsor phone numbers
  '/safety-plan',        // User's safety plan
  '/meetings?saved=true', // Saved meetings list
  '/crisis',             // Crisis resources page
];

// These MUST work with zero network:
// 1. View sponsor contacts
// 2. View safety plan
// 3. View saved meetings (even if stale)
// 4. Record check-in (sync when online)

Crisis Detection Patterns

Journal Sentiment Signals

// RED FLAGS (surface help proactively):
const CRISIS_INDICATORS = {
  anger_spike: 'HALT angry score jumps 3+ points',
  ex_mentions: 'Mentions ex-partner 3+ times in week',
  isolation: 'No check-ins for 3+ days after daily streak',
  time_distortion: 'Check-ins at unusual hours (2-5am)',
  negative_spiral: 'Consecutive declining mood scores',
};

// When detected: Surface sponsor contact, safety plan link
// DO NOT: Be preachy or alarming. Gentle nudge only.

Check-in Analysis

-- Detect concerning patterns
SELECT user_id,
  AVG(angry_score) as avg_anger,
  AVG(angry_score) FILTER (WHERE created_at > NOW() - INTERVAL '3 days') as recent_anger,
  COUNT(*) FILTER (WHERE EXTRACT(HOUR FROM created_at) BETWEEN 2 AND 5) as late_night_checkins
FROM daily_checkins
WHERE created_at > NOW() - INTERVAL '30 days'
GROUP BY user_id
HAVING AVG(angry_score) FILTER (WHERE created_at > NOW() - INTERVAL '3 days') >
       AVG(angry_score) + 2;

Performance Monitoring & Logging

Key Metrics to Track

// Client-side (log to analytics)
const PERF_METRICS = {
  ttfb: 'Time to First Byte',
  fcp: 'First Contentful Paint',
  lcp: 'Largest Contentful Paint',
  tti: 'Time to Interactive',

  // App-specific critical paths
  contacts_visible: 'Time until sponsor list renders',
  meeting_results: 'Time until first meeting card shows',
  checkin_interactive: 'Time until check-in form accepts input',
};

// Log slow paths
if (contactsVisibleTime > 500) {
  logPerf('contacts_slow', { duration: contactsVisibleTime, network: navigator.connection?.effectiveType });
}

Automated Performance Regression Detection

# scripts/perf-audit.sh - Run in CI
lighthouse https://sobriety.tools/meetings --output=json --output-path=./perf.json
SCORE=$(jq '.categories.performance.score' perf.json)
if (( $(echo "$SCORE < 0.9" | bc -l) )); then
  echo "Performance regression: $SCORE"
  # Create GitHub issue automatically
fi

Automated Issue Detection & Filing

Background Performance Scanner

// Run hourly via Cloudflare Worker cron
async function performanceAudit() {
  const checks = [
    checkMeetingCacheHealth(),
    checkSupabaseQueryTimes(),
    checkStaticAssetSizes(),
    checkServiceWorkerCoverage(),
  ];

  const issues = await Promise.all(checks);
  const problems = issues.flat().filter(i => i.severity === 'high');

  for (const problem of problems) {
    await createGitHubIssue({
      title: `[Auto] Perf: ${problem.title}`,
      body: problem.description + '\n\n' + problem.suggestedFix,
      labels: ['performance', 'automated'],
    });
  }
}

Common Anti-Patterns

1. Network-Blocking Contact Display

Symptom: Contacts page shows spinner while fetching
Problem: User in crisis sees loading state instead of sponsor number
Solution:

// WRONG
const { data: contacts } = useQuery(['contacts'], fetchContacts);

// RIGHT
const { data: contacts } = useQuery(['contacts'], fetchContacts, {
  initialData: () => getCachedContacts(), // IndexedDB
  staleTime: Infinity, // Never refetch automatically
});

2. Uncached Meeting Searches

Symptom: Every search hits Supabase
Problem: 200-500ms latency on every search
Solution: Geohash-based KV caching (already implemented in meeting-proxy)

3. Large Bundle Blocking Interactivity

Symptom: High TTI despite fast TTFB
Problem: JavaScript bundle blocks main thread
Solution:

// Lazy load non-critical features
const JournalAI = dynamic(() => import('./JournalAI'), { ssr: false });
const Charts = dynamic(() => import('./Charts'), { loading: () => <ChartSkeleton /> });

4. Synchronous Check-in Submission

Symptom: Button stays disabled during network request
Problem: User thinks it didn't work, closes app
Solution: Optimistic UI + background sync queue

Performance Optimization Checklist

Before Every Deploy

  • [ ] Bundle size delta < 5KB
  • [ ] No new synchronous network calls in critical paths
  • [ ] Lighthouse performance score >= 90
  • [ ] Offline mode tested (disable network in DevTools)

Weekly Audit

  • [ ] Review slow query logs in Supabase
  • [ ] Check KV cache hit rate (should be >80%)
  • [ ] Analyze Real User Metrics (RUM) for P95 load times
  • [ ] Test on 3G throttled connection

Monthly Deep Dive

  • [ ] Profile React renders (why did this re-render?)
  • [ ] Audit third-party scripts
  • [ ] Review and prune unused dependencies
  • [ ] Test crisis flows end-to-end on real device

Scripts Available

Script Purpose
scripts/perf-audit.ts Run Lighthouse + custom checks, file issues
scripts/cache-health.ts Check KV cache hit rates and staleness
scripts/crisis-path-test.ts Automated test of crisis-critical flows
scripts/bundle-analyzer.ts Track bundle size over time

Integration Points

With meeting-harvester

  • After harvest, warm cache for top metros
  • Monitor harvest duration and meeting counts
  • Alert if harvest fails (stale data = wrong meeting times)

With check-in system

  • Analyze patterns for crisis detection
  • Track submission success rate
  • Monitor offline queue depth

With contacts/sponsors

  • Ensure offline availability
  • Track time-to-display
  • Monitor sync failures

When to Escalate

File GitHub issue immediately if:
- Lighthouse score drops below 85
- P95 meeting search > 1 second
- Contacts page has any loading state > 200ms
- Service Worker fails to cache crisis pages
- Any user-reported "couldn't load" during crisis hours (evenings/weekends)

This is a recovery app. Performance isn't a feature - it's the difference between someone getting help and someone dying alone.

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.