← ClaudeAtlas

scormlisted

Use when integrating SCORM 1.2/2004 in a web app with @studiolxd/scorm — initializing a session, reading/writing CMI data (score, completion, suspend data, interactions, objectives), handling Result errors, or wiring lifecycle/auto-commit across React, Vue, Angular, Svelte, Web Components, or vanilla JS.
studiolxd/skills · ★ 0 · Web & Frontend · score 72
Install: claude install-skill studiolxd/skills
# Using @studiolxd/scorm `@studiolxd/scorm` is a headless SCORM 1.2/2004 runtime. A framework-agnostic core (`createScormSession`) plus thin adapters. Built-in **mock mode** runs without an LMS. ## Pick the entry point - Vanilla / any framework: `import { createScormSession } from '@studiolxd/scorm'` - React: `import { ScormProvider, useScorm, useScormSession } from '@studiolxd/scorm/react'` - Vue: `import { useScorm } from '@studiolxd/scorm/vue'` - Angular (>=17): `import { provideScorm, SCORM } from '@studiolxd/scorm/angular'` - Svelte: `import { createScormStore } from '@studiolxd/scorm/svelte'` - Web Component: `import '@studiolxd/scorm/wc'` then `<scorm-session>` - CDN `<script>`: global `window.Scorm` ## The golden rules 1. **Always check `.ok` before `.value`.** Every API method returns `Result<T, ScormError>`. Session lifecycle methods return `undefined` when no SCORM API was found (`noLmsBehavior: 'error'`). 2. **Lifecycle order:** `initialize()` → interact → `commit()` → `terminate()`. Never call data methods before `initialize()`. 3. **Use mock mode for dev/tests:** `createScormSession('2004', { noLmsBehavior: 'mock' })`. 4. **A terminated session cannot be re-initialized** (SCORM rule). Create a new session (or remount the React provider with a changed `key`) to start over. 5. **`version: 'auto'`** detects the host LMS (SCORM 2004 first, then 1.2). ## Canonical vanilla example ```ts import { createScormSession } from '@studiolxd/scorm'; const s