| name | amvcp-interactive-controls |
| description | Self-contained interactive HTML widgets — tabs, accordion, modal, filter pills, stepper, sortable table, Kanban, slider, theme toggle, TOC, tooltip, popover, lightbox. DESIGN.md-themed, persists to localStorage. Use when the user wants any interactive widget. Trigger with 'tabs', 'accordion', 'filter pills', 'stepper', 'sortable table', 'kanban', 'before/after', 'live editor', 'checklist', 'theme switcher', 'TOC', 'search box', 'tooltip', 'modal', 'popover', 'lightbox'. |
| license | MIT |
| metadata | {"author":"Emasoft"} |
Interactive Controls
Parent umbrella: skills/amvcp-visual-communication/SKILL.md — load the umbrella first to route between the 13 category skills.
Overview
Emits ~38 scaffoldable, DESIGN.md-themed HTML control widgets —
accordion, tabs, modal, popover/dialog, filter pills, stepper,
virtualized list, sortable table, drag-reorder Kanban, before/after
slider, theme switcher, sticky TOC, tooltip, lightbox, and more. The
complete catalogue is enumerated in
authoring-guide.md; the Progressive
disclosure rings below route to every widget's reference.
Every widget reads one embedded JSON model, persists to
localStorage, themes off the --vc-* tokens, degrades gracefully
with JS off, and is zero-dependency — opens from file://.
Progressive disclosure
Three concentric rings; pick the right ring for the task and never
read more than you need. Read the inner ring first (shared
infrastructure), then the widget reference your brief needs — each
reference is self-sufficient (scaffold, lib functions, DESIGN.md
tokens, selection/comment/decision-mini notes, JS-off degradation,
anti-patterns, verification).
Each ring table links the reference and says what it is + when to pick
it. For a section-level preview of what is inside each widget
reference (its own ##/### headings), see the consolidated
widget section index — open it
to scan every widget's internal structure before diving in.
Inner ring — cross-cutting plumbing (read first)
| Reference | What |
|---|
| state-plumbing.md | Embedded JSON model + localStorage helper + selection-system seam. The contract every widget speaks. |
| copy-clipboard-fallback.md | navigator.clipboard.writeText + execCommand fallback + toast helper. |
| scroll-spy.md | IntersectionObserver engine behind the sticky TOC + slide deck counter. |
| keyboard-shortcuts.md | Case-insensitive key compare + edit-target guard + ? help overlay. |
Middle ring — the seven big primitives (the original taxonomy)
Outer ring — composable techniques (pick what fits the brief)
When to choose this category
The category fans out into several "shapes". Use this table to pick
the right reference quickly:
| If the task is to… | Read |
|---|
| Make these findings filterable | filter-pills.md |
| Show the pipeline as steps | stepper.md |
| Render a 5000-line log | virtualized-list.md |
| Drag tickets between columns | drag-reorder.md |
| Reorder a single list | native-dnd-drop-indicator.md |
| Make this table sortable | sortable-table.md |
| Add a "Copy" button next to code | copy-button-on-code-block.md |
| Add a "Copy diff" / "Copy markdown" button | copy-clipboard-fallback.md |
| Compare two screenshots | before-after-slider.md |
| Add a tab pattern | panels-disclosure.md |
| Show multiple code views (yaml / ts / curl) | tabbed-code-samples.md |
| Add a walkthrough with collapsible steps | mutually-exclusive-details.md |
| Add an accordion of FAQ items | panels-disclosure.md |
| Wrap collapsed-by-default review files | disclosure-summary-badge.md |
| Build a sticky table of contents | sticky-table-of-contents.md |
| Add jump-to chips at the top | click-chip-scroll-pulse.md |
| Add hover-linked glossary entries | hover-linked-glossary.md |
| Add a search box for a long list | search-filter-list.md |
| Add a breadcrumb trail | breadcrumb-stack.md |
| Add a hover hint to a control | tooltip-on-hover.md |
| Open a modal confirmation | popover-and-dialog.md |
| Open a non-modal help popover | popover-and-dialog.md |
| Add a click-to-zoom image | zoom-image-lightbox.md |
| Inline a 6-slide deck | scroll-snap-deck.md |
| Add a slider for a numeric value | range-slider-with-output.md |
| Add a min..max range picker | range-double-handle.md |
| Add a tag picker (multi-select) | multi-select-with-chips.md |
| Add a binary toggle switch | css-only-toggle-switch.md |
| Add a checklist of items | persistent-checklist.md |
| Add a Light/Dark mode switcher | light-dark-theme-toggle.md |
| Warn the user that A needs B | conditional-form-warning-chain.md |
| Always-visible "what would I commit" diff | live-diff-sidebar.md |
| Live-edit text with colored tokens | contenteditable-live-highlighter.md |
| Live "tweak a slider, see CSS change" demo | live-tweak.md |
| Live perturb an SVG diagram | inline-svg-illustration-controls.md |
| Make a textarea grow with content | textarea-autosize.md |
Add keyboard shortcuts (? help, Cmd+K) | keyboard-shortcuts.md |
| Track "current section" while scrolling | scroll-spy.md |
| Safely embed untrusted HTML | iframe-sandbox-host.md |
Prerequisites
- A browser (Chromium via
--app=URL preferred; default browser works).
amvcp-designmd.js + amvcp-interactive.js + amvcp-interactive.css
colocated with the HTML. Optionally amvcp-runtime.js.- Script load order in
<head>: engine → runtime (if used) → interactive.
Authoring, output & troubleshooting
Emit steps, the runtime output/event contract, the full error-handling
table, and a concrete worked scaffold (filter pills + sortable table)
live in:
Two correctness contracts always apply (detail in the guide): ship
BOTH light and dark themes and keep the JS-off CSS-only baseline
working — verify both via dev-browser screenshots
(skills/amvcp-self-debug-rules/SKILL.md).
Modes
This skill supports data-ve-mode="readonly" only. The widgets (tabs, accordion, modal, lightbox, copy button, theme toggle, TOC, etc.) are UI controls — they have their own state (open/closed, selected tab, etc.) but they are NOT 3-state-decision atoms. For "ask the user to pick an option" use amvcp-form-inputs or amvcp-choice-tables instead.
Composability
Composes with every other amvcp-* skill on the same page (R22). Multiple control widgets coexist independently. The only exclusive skill is the overlay-runtime (R24).
