AICTPO AI Coding Agents Skill Pack Files

Mobile App Showcase

"Your Fleet In Your Pocket" marketing section anchored at #mobile-app on the home page. A phone mockup with a four-tab carousel demonstrating product capabilities.

Tabs

Tab	Demonstrates
Voice Commands	Issuing instructions via voice to dispatch agents
Task Assignment	Assigning a task to a specific agent or fleet
Ticket Integration	Linking a chat / voice action to a Jira / GitHub ticket
Fleet Monitoring	Live status of running agents and recent jobs

Tabs are mutually exclusive — selecting one updates the phone mockup screenshot and surrounding caption.

Layout

The section is a two-column layout (stacks vertically on mobile):

• Left: tab list with label + icon + short description.
• Right: phone-shaped frame containing the screenshot for the active tab.

Above the columns sits the section heading. Below them, an optional CTA may appear depending on campaign config.

Selectors

Element	Selector
Section root	section#mobile-app
Tab buttons	button[role="tab"] within the section
Active tab	button[role="tab"][aria-selected="true"]
Tab panels	[role="tabpanel"]
Phone mockup image	img[alt*="screenshot" i], or the <img> inside the active panel

Interaction

Tab activation follows the WAI-ARIA pattern: click or ArrowLeft / ArrowRight while a tab is focused moves selection. The active tab gets aria-selected="true"; the corresponding panel becomes visible while inactive panels are hidden via hidden attribute or display:none.

Common tasks

Cycle all tabs: click each tab in order, snapshot the panel after each click, assert the screenshot src changes between tabs.

Verify default tab: on first load, assert the first tab is aria-selected="true" and its panel is visible.

Test keyboard navigation: focus the first tab, press ArrowRight three times, assert the fourth tab is now active.

Gotchas

• Image swapping may use CSS background-image rather than <img src> — selectors must handle both.
• Tabs may be implemented as plain buttons without role="tab"; in that case fall back to text-content match for tab labels.
• The phone mockup image is large (full-resolution PNG) and may take a moment to load on tab change — wait for complete before snapshotting.
• Auto-advance is not used by default; if an experiment toggles it on, tab-state assertions must read the active tab at the moment of capture, not pre-compute.