Skills
.Work. You
Rest

static-spa-interactions

Community

Polish vanilla SPAs with an interaction layer.

Software Engineering#frontend#spa#localstorage#modal#ui-patterns#scrollspy#theme-toggle
Authorkevintsai1202
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This pattern adds a comprehensive interaction layer to a vanilla SPA: state persistence, navigation aids, theme toggling, responsive behavior, and accessible UI patterns that elevate a simple scaffold into a polished product.

Core Features & Use Cases

  • LocalStorage progress tracking (tasks and quizzes) with stable versioned keys
  • Sidebar behavior for desktop and mobile (toggle/overlay) and ScrollSpy highlighting
  • Theme toggle (dark/light) with persistent preference
  • Content zoom with isolated scope to avoid sidebar scaling
  • Keyboard accessible accordions and fade-in content
  • Copy-to-clipboard actions and lightweight toast notifications
  • Quiz with back-links to review sections and iframe modal viewers
  • Body scroll lock when modals are open to preserve focus
  • Lightweight modal viewer for embedded materials
  • All patterns are modular and can be added independently

Quick Start

Integrate the interaction layer into your vanilla SPA by wiring the patterns above to your UI and verifying behavior with the web-visual-verification skill.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: static-spa-interactions
Download link: https://github.com/kevintsai1202/teaching-site-skills/archive/main.zip#static-spa-interactions

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.