amvcp-tables-primitives

Load amvcp-tables.js to establish interactive HTML table primitives with modes and theming.

Updated May 8, 2026
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-tables-primitives
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: amvcp-tables-primitives
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-tables-primitives
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-tables-primitives

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents table UI drift by standardizing the core table primitives (modes, theming, layout invariants, and idempotent enhancement) so every visual-communicator page uses the same interactive table foundation.

Core Features & Use Cases

  • Mode contract (readonly/form/edit-ready): applies the correct data-ve-mode semantics to ensure rows/cells behave as selectable atoms.
  • Light + dark theme conformance: renders with a token-driven approach so visuals repaint correctly on theme toggle.
  • No-nested-scrollbars invariant: ensures wide/tall tables expand the page instead of introducing inner scroll containers.
  • Idempotent initialization: safely re-runs enhancement without duplicating injected chrome (sort UI, matrix glyphs, CSV wrappers/buttons).
  • Baseline zebra/borders styling: applies consistent separators and zebra tinting aligned with the runtime’s design rules.
  • Ready-to-inspect sample content: includes a token-spec demo table and a sample readability dataset to validate readability and styling quickly.

Quick Start

Ask your agent to scaffold the base table layer by creating a table with the desired mode (for example, data or matrix) and ensuring amvcp-tables.js is loaded for enhancement.

Frequently Asked Questions about amvcp-tables-primitives

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build sortable data tables without nested scrollbars?

To prevent nested scrollbars in interactive tables, apply a layout invariant that forces wide and tall tables to expand the page rather than injecting inner scroll containers.

How do I ensure interactive HTML tables repaint correctly on dark theme toggle?

To ensure interactive HTML tables repaint correctly on dark theme toggle, use a token-driven styling approach that conforms to light and dark theme semantics, guaranteeing visual consistency across theme changes.

Why does re-initializing table UI components duplicate sort buttons and DOM elements?

Re-initializing table UI components duplicates sort buttons and DOM elements when enhancement lacks idempotent behavior, so you must apply safe re-init logic that avoids duplicated DOM injection during repeated enhancement runs.

Can I use data-ve-mode attributes to manage readonly and form table behaviors?

Yes, you can use data-ve-mode attributes to manage readonly and form table behaviors by applying the correct mode contract semantics, ensuring rows and cells behave as selectable atoms across different interactive states.

Does this table scaffolding approach support CSV export and virtualization?

Yes, this table scaffolding approach supports CSV export and virtualization by loading the table primitives layer, allowing you to add CSV export wrappers and virtualization for frozen columns while keeping selection contracts stable.

What's the best way to prevent UI drift across multiple interactive data tables?

The best way to prevent UI drift across interactive data tables is to standardize the core table primitives, enforcing consistent modes, baseline zebra borders, and layout invariants so every page uses the same interactive table foundation.