static-spa-interactions
Installation
SKILL.md
Static SPA Interactions
Schema authority: the
Taskprimitive (id-as-localStorage-key rules) and theQuizItemprimitive (storage of selected option) come from_shared/domain-primitives.md§8 and §10. localStorage schema lives in §8.Reference implementation:
d:/GitHub/ai-workshop/index.html:2900-3030forrenderSidebar / setupScrollSpy / applyTheme / setupFadeInpatterns.
This skill adds the interaction layer to a vanilla SPA: state, navigation, theme, responsiveness, accessibility. Each pattern below is a self-contained module that can be added independently.
The patterns here are documented because they all hide subtle bugs that took real time to find in the example workshop. Read the "Why" notes carefully — they're not optional context.
Pattern 1: localStorage Progress (Task Checkboxes + Quiz Answers)
const STORAGE_KEY = 'your-app-progress-v1'; // version suffix lets you breaking-change later