From frontend-testing
Generates Interaction Metadata Schema (IMS v1) annotations for interactive web applications, ensuring every UI interaction has proper metadata for testing and agent execution
npx claudepluginhub automata-network/claude-plugins --plugin frontend-testingThis skill is limited to using the following tools:
Generate standardized interaction metadata for web applications following the IMS v1 specification. This skill treats UIs as Directed Interaction Graphs where every action, effect, state, and readiness condition is explicitly annotated.
Guides strict Test-Driven Development (TDD): write failing tests first for features, bugfixes, refactors before any production code. Enforces red-green-refactor cycle.
Guides systematic root cause investigation for bugs, test failures, unexpected behavior, performance issues, and build failures before proposing fixes.
Guides A/B test setup with mandatory gates for hypothesis validation, metrics definition, sample size calculation, and execution readiness checks.
Generate standardized interaction metadata for web applications following the IMS v1 specification. This skill treats UIs as Directed Interaction Graphs where every action, effect, state, and readiness condition is explicitly annotated.
This skill enables you to generate standardized interaction metadata for web applications following the IMS v1 specification. The schema treats UIs as Directed Interaction Graphs where every action, effect, state, and readiness condition is explicitly annotated.
An interactive UI follows this flow:
Action ──(trigger)──▶ Effect ──▶ State ──▶ Ready ──▶ Screenshot
Every interactive element must have:
click - User clicks/tapshover - Mouse hoverscroll - Scroll eventfocus - Element receives focuswait - Time-based triggerauto - Automatic triggerkeyboard - Keyboard inputhidden - Not visibleloading - Data/content loadinganimating - In transitionready - Stable and completeerror - Error statedisabled - Interaction disabled❌ Never invent triggers - only use the 7 allowed triggers ❌ Never add ready=true without snapshot - ready state requires screenshot ID ❌ Never add effects without observable state - every effect must have a corresponding state ❌ Never use timing if state exists - prefer state-based over wait-based ✅ Prefer existing scopes - reuse scope names for related interactions ✅ Use semantic intent-based naming - IDs should describe what, not how
| Field | Requirement | Format |
|---|---|---|
action.id | Required | kebab-case, starts with letter |
action.trigger | Required | From closed set only |
action.effects | Required | Minimum 1 item, format scope.state |
state.scope | Required | Group related states |
state.name | Required | State identifier |
state.status | Required | From closed set only |
| Condition | Requirement |
|---|---|
If ready === true | Then snapshot is REQUIRED |
| If user can interact with element | Then action metadata is REQUIRED |
| If effect is declared | Corresponding state MUST exist |
<button
data-ui-action="open-settings"
data-ui-trigger="click"
data-ui-effect="settings.visible"
>
Settings
</button>
<div
data-ui-scope="settings"
data-ui-state="ready"
data-ui-ready="true"
data-ui-snapshot="settings-modal-open"
class="modal"
>
<!-- Modal content -->
</div>
{
"version": "1.0",
"interactions": [
{
"id": "open-settings",
"scope": "settings",
"trigger": "click",
"effects": ["settings.visible"]
}
],
"states": [
{
"scope": "settings",
"name": "visible",
"status": "ready",
"ready": true,
"snapshot": "settings-modal-open"
}
]
}
When annotating a UI component, follow these steps:
a. Assign unique action.id (kebab-case)
b. Determine trigger type (from closed set)
c. Identify what changes (effects)
d. Define effect as scope.state format
a. Create corresponding state definition
b. Assign scope (group related states)
c. Determine status (from closed set)
d. If visually stable, mark ready=true + snapshot
📖 For detailed examples and complete patterns, see EXAMPLES.md
<!-- Trigger -->
<button
data-ui-action="open-modal"
data-ui-trigger="click"
data-ui-effect="modal.visible"
>
Open Dialog
</button>
<!-- Modal -->
<div
data-ui-scope="modal"
data-ui-state="visible"
data-ui-status="ready"
data-ui-ready="true"
data-ui-snapshot="modal-open"
class="modal"
>
<button
data-ui-action="close-modal"
data-ui-trigger="click"
data-ui-effect="modal.hidden"
>
Close
</button>
</div>
<form>
<input
type="text"
data-ui-action="fill-username"
data-ui-trigger="keyboard"
data-ui-effect="form.username-filled"
/>
<button
data-ui-action="submit-form"
data-ui-trigger="click"
data-ui-effect="form.submitting,form.submitted"
>
Submit
</button>
</form>
<!-- Loading state -->
<div
data-ui-scope="form"
data-ui-state="submitting"
data-ui-status="loading"
>
Submitting...
</div>
<!-- Success state -->
<div
data-ui-scope="form"
data-ui-state="submitted"
data-ui-status="ready"
data-ui-ready="true"
data-ui-snapshot="form-success"
>
Success!
</div>
<div class="accordion">
<button
data-ui-action="toggle-section-1"
data-ui-trigger="click"
data-ui-effect="section-1.expanded"
>
Section 1
</button>
<div
data-ui-scope="section-1"
data-ui-state="expanded"
data-ui-status="ready"
data-ui-ready="true"
data-ui-snapshot="section-1-open"
class="accordion-content"
>
Content here
</div>
</div>
<nav>
<a
href="/dashboard"
data-ui-action="navigate-dashboard"
data-ui-trigger="click"
data-ui-effect="page.dashboard-loaded"
>
Dashboard
</a>
</nav>
<div
data-ui-scope="page"
data-ui-state="dashboard-loaded"
data-ui-status="ready"
data-ui-ready="true"
data-ui-snapshot="dashboard-page"
>
<!-- Dashboard content -->
</div>
<div
data-ui-action="show-tooltip"
data-ui-trigger="hover"
data-ui-effect="tooltip.visible"
>
Hover me
</div>
<div
data-ui-scope="tooltip"
data-ui-state="visible"
data-ui-status="ready"
data-ui-ready="true"
data-ui-snapshot="tooltip-shown"
class="tooltip"
>
Tooltip content
</div>
📖 For comprehensive examples with validation schemas and multi-step forms, see EXAMPLES.md
Tell me to annotate your UI with IMS v1 metadata:
Annotate Entire Component Directory:
Scan ./src/components and add IMS v1 annotations to all interactive elements
Generate JSON Manifest:
Analyze my UI and create an IMS v1 JSON manifest of all interactions
Validate Existing Annotations:
Check my IMS annotations for compliance with v1 specification
Convert Between Formats:
Convert my DOM annotations to JSON manifest format
When you ask me to generate IMS annotations, I will:
Analyze UI Components
Generate Metadata
scope.state formatApply Annotations
data-ui-* attributes to DOM elements (if HTML/JSX/TSX)Validation Report
| Check | Description |
|---|---|
✅ All interactive elements have action.id | Every clickable/interactive element annotated |
| ✅ All triggers are from closed set | Only the 7 allowed triggers used |
✅ All effects follow scope.state format | Proper dot notation |
| ✅ All effects have corresponding states | No orphaned effects |
| ✅ All status values are from closed set | Only the 6 allowed statuses used |
✅ All ready=true states have snapshots | Screenshot IDs present |
| ✅ Semantic naming used | IDs describe intent, not implementation |
| ✅ Scopes are reused appropriately | Related states grouped together |
This skill generates annotations strictly compliant with IMS v1 specification:
data-ui-* attributesNo special dependencies required. This skill works with:
<!-- Action annotation -->
<element
data-ui-action="unique-id"
data-ui-trigger="click|hover|scroll|focus|wait|auto|keyboard"
data-ui-effect="scope.state,scope.state2"
>
<!-- State annotation -->
<element
data-ui-scope="scope-name"
data-ui-state="state-name"
data-ui-status="hidden|loading|animating|ready|error|disabled"
data-ui-ready="true"
data-ui-snapshot="screenshot-id"
>
{
"version": "1.0",
"interactions": [
{
"id": "action-id",
"scope": "scope-name",
"trigger": "click",
"effects": ["scope.state"]
}
],
"states": [
{
"scope": "scope-name",
"name": "state-name",
"status": "ready",
"ready": true,
"snapshot": "screenshot-id"
}
]
}
Before finalizing annotations:
data-ui-actionscope.state patternready=true states have snapshotsThis metadata enables:
Automated Testing: Generate Playwright/Cypress tests from annotations
Visual Regression: Screenshot capture at stable states
Agent Execution: AI can understand and interact with UI programmatically
Documentation: Self-documenting interaction flows
Debugging: Clear state transitions for troubleshooting
Use this skill when:
Ready to annotate your UI with IMS v1 metadata! Just tell me which components to process or provide a directory path to scan.