Hva StimPack er, og hvem det er for.
StimPack er en iPad-først ledsagerapp for sanitetspersonell og instruktører som kjører Laerdal SimMan-traumesimuleringer. Den viser vitale parametre, et kroppskart med skademarkører, M.A.R.C.H.-protokollens sjekkliste, en TCCC-stil medikamentlogg, og en debrief etter scenario, bygget med utgangspunkt i selve dukkens kapabiliteter, designet for klinisk eller felt-bruk med hansker.
Det er et selvdrevet prosjekt med reelle begrensninger (iPad, hansker, mørkt som standard, WCAG AA) forankret i Laerdals publiserte spesifikasjon.
Det jeg brydde meg om.
iPad-først, med hansker
1024×768 landskap som primær. Hvert trykkområde ≥44px, primære handlinger ≥48px. Brukeren kan ha på seg nitrilhansker.
WCAG 2.2 AA i begge tema
Normaltekst-kontrast ≥4,5:1, UI ≥3:1. Verifisert i mørkt og lyst. Plassholdere, primærknapper og labels alle sjekket.
Forankret i ekte maskinvare
Kapabilitetskart koblet mot Laerdal SimMan Trauma. Pulser, MARCH-steg, medikamentgjenkjenning, IO-tilgang. Appen lærer dukkens arbeidsflyt.
Klinisk, ikke pyntet
Ingen gradienter, ingen lilla AI-klisjéer. Flate flater, gul aksent, mono-labels. Referanse: medisinsk overvåkningsprogramvare møter taktiske operasjoner.
Hvordan det ble til.
Fjorten operasjoner fra stillas til taktisk tema. Hver levert før den neste begynte.
- 01
Stillas + design-tokens
Next.js 16 App Router, TypeScript, Tailwind 4 med @theme inline. CSS-variabler for hele paletten gir delte mørke/lyse utilities. Håndskrevne shadcn-stil primitiver (Button, Sheet, Dialog, Badge, Progress, Checkbox), dimensjonert for iPad fra første commit.
- 02
Fem skjermer, ende til ende
Profilvalg, hjem med kategorirail, scenarioliste med filtre, scenariobrief med pasientkort og utstyrssjekkliste, aktiv scenario-runner. Hver skjerm bygget komplett før jeg gikk videre.
- 03
Aktiv scenario-runner
2×2-rutenett: vital-monitor med live EKG-trace synket til hjertefrekvens, kroppskart med pulserende skademarkører og trykkbare pulssjekk-punkter, MARCH-protokollens sjekkliste med tidsstempler og varsler ved feil rekkefølge, instruktørnotater. Vitale verdier glir fra baseline mot mål, vektet av fullførte sjekklisteelementer.
- 04
Lyst tema uten flash-hydrering
Inline-skript i <head> setter tema synkront før paint. Hver hardkodet hex flyttet til CSS-variabler, slik at kroppskart-SVG, EKG-rutenett og avatar-gradienter reskinnes atomisk på tvers av tema.
- 05
Lansering: GitHub, Vercel, eget domene
Privat repo på FemtiGram/stimpack. Vercel auto-deployer main. Mappet til stimpack.andersgram.no via CNAME. Hver push til main er en deploy.
- 06
Les den faktiske Laerdal-spesifikasjonen
Gap-analyserte mot appen. La til TCCC-medikamentlogg modellert etter dukkens Drug Recognition System, og en debrief-skjerm med tidslinje, vitalverdiers endring, og statistikk på handlinger i feil rekkefølge.
- 07
Tilgjengelighet + iPad-med-hansker
Beregnet kontrastforhold i begge tema, fikset feilende tokens, økte hver interaktiv pille fra 28–32px til 44px, la til en tap-pill-utility med fokusringer, utvidet sidebar-rail til 64px for hanskebruk. Registrerte prefers-reduced-motion.
- 08
Romlig krysslink + iPad-bredderegel
Tagget hver MARCH-handling og skade med kroppsregion. Trykk på et sjekklisteelement gir et glød-blink i den matchende anatomiske sonen. Skader rendres automatisk grønt når regionens MARCH-handlinger er fullført. Byttet kropps-SVG mot en ekte dukke-illustrasjon. Kodifiserte iPad-bredderegelen som en enkelt viewport-cap-utility.
- 09
Historikk, innstillinger og dukker
Per-profil arkiv av kjøringer med localStorage-snapshots. Bygde /settings (konto, tema, kjøringshistorikk, om) og /categories (full grid). La til /manikins for enhetsbred maskinvarekonfig: navn, modell, USB/Bluetooth/Wi-Fi-tilkobling med simulert 85 % handshake-suksess og en feil → retry-flyt.
- 10
Slot-tildelinger + instruktør-referanse
Scenarioer deklarerer dukke-slots (Pasient for enkelt-kasualitet, seks roller for MASCAL). Instruktør tildeler en konfigurert dukke til hver slot på briefsiden. Aktiv runner-toppbar viser samlet tilkoblingsstatus. La til en TCCC quick-reference-modal med MARCH-terskler, vitale handlingsverdier og vanlige medikamentdoser.
- 11
Debrief-lås + minimalistisk pussing
Debrief-side viewport-låst på lg+ med intern kolonnescroll. Fikset Skader behandlet-statistikken til å telle region-matchede MARCH-fullføringer. La til en Avslutt scenario-knapp nederst på MARCH-sjekklisten. Avatarer: solid surface bg + 2px profilfarge-ring + foreground-tekst (AA-kompatibel i begge tema). Tema-velger flyttet til topphøyre i headeren.
- 12
Historisk casebook + lesbarhetspass
La til valgfri eraContext per scenario med doktrinære notater om endringer i medisinsk praksis. Fem nye scenarier: WWII Normandie, Korea (Chosin Reservoir), Vietnam (Bouncing Betty AP-miner), Ukraina (drone-droppet ammunisjon og forlenget feltbehandling), urban katastrofe (crush syndrome). Tre eksisterende scenarier merket Irak/Afghanistan. Brødtekst økt til 16px. Foreground-dim og muted-2 lysnet i mørkt tema (14,5:1 og 9,9:1 AAA).
- 13
Mobilpass
Aktiv runner-toppbar restrukturert for smale viewports: venstre tittelblokk skjules på mobil, en dedikert statusstripe under headeren viser tittel, callsign, kritisk/stabil-tilstand (bakgrunn tones rødt når vitalverdier er forskjøvet). Vital-celler går 2-kol på mobil. Kroppskart, MARCH og Notater/Medikamenter får større min-høyder på mobil. MARCH-krysslink bruker egen scroll-logikk for å unngå sidehopp. Tema-velger fjernet fra 7 sider.
- 14
Taktisk tema + 3-veis velger
Tredje tema-variant for nattsynsbevarende operativ bruk. Alle fargetoner røde for å sende ut minimalt blått/grønt lys, status differensiert med intensitet og ikon. En rød-token-blokk reskinnes hver flate. Et CSS-filter skifter pasient-PNG-en til rødt-på-svart. Hver hardkodet rgba()-literal flyttet til Tailwind slash-opacity-utilities. SVG-streker refererer til en aksentvariabel. Velgeren bygget om som en popover med tre eksplisitte valg (Mørk/Lys/Taktisk) med 44px trigger og høyrejustert meny med haker.
Hvordan AI passer inn i dette.
Jeg bygde StimPack med Claude Code som pair-programmer. Jeg drev arkitekturen, designbegrensningene, gap-analysen mot Laerdal-spesifikasjonen, og hver vurdering av hva jeg skulle levere vs. utsette. Claude skrev mye av selve implementasjonen. De fem skjermene med konsistent UI, de mekaniske gjennomgangene som WCAG-passet og rail-utvidelsen, og den slags grovarbeid det er lett å gjøre halvferdig når man er sliten.
Det som krevde menneskelig vurdering: lese SimMan-spesifikasjons-PDF-er, avgjøre hva som mappes til hva, velge det visuelle systemet, prioritere tilgjengelighet, bestemme når «ferdig» faktisk var ferdig. Claude utmerket seg på å produsere hundrevis av linjer korrekt Tailwind, fange opp problemer på token-nivå før kontrastsjekk, og holde fokus over tid.
Poenget er ikke at «AI bygde dette for meg». Poenget er at en erfaren operatør med et tydelig sett begrensninger og vilje til å presse tilbake faktisk kan levere en ekte iPad-app på personlig tidsplan. Verdien ligger i å lede, ikke å skrive.
Det som ikke er bygget enda.
- Auskultasjon på kroppskart (hjerte-, lunge-, tarmlyder)
- Hodeskade-utskillelser / CSF-lekkasjeindikatorer
- NBC-scenarier (kjemiske, biologiske, nukleære)
- HLR-dybde + frekvens-tilbakemelding for V-Fib-kjøringer
- Mageauskultasjon som ETT-bekreftelsessteg
- Flere luftveishjelpemidler som MARCH-handlinger (Combitube, LMA, kirurgisk cric)
- Next.js 16
- TypeScript
- Tailwind 4
- Framer Motion
- Zustand
- Radix UI
- Lucide
- Vercel
- Claude Code