ux-lock

Generate Playwright regression specs and verify plan implementations against Acceptance Criteria.

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/Lbstrydom/claude-engineering-skills --skill ux-lock
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-lock
Source: https://github.com/Lbstrydom/claude-engineering-skills/tree/main/.claude/skills/ux-lock
Command: npx skills add https://github.com/Lbstrydom/claude-engineering-skills --skill ux-lock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend regressions through untracked DOM changes can slip into production when plans are implemented without verifiable DOM contracts. UX Lock provides a dual approach to ensure changes align with intent by generating regression-specs and by verifying live implementations against Acceptance Criteria.

Core Features & Use Cases

  • LOCK mode: generate Playwright regression specs that pin a fix's public DOM contract to prevent regressions.
  • VERIFY mode: parse a plan's Acceptance Criteria and run one assertion per criterion against the live URL to produce a pass/fail report.
  • Integration: supports persistence of specs and verify runs, and coordinates with other Claude skills (audit-loop, persona-test, ship).

Quick Start

Run /ux-lock <commit> to lock a fix by generating a Playwright spec, or run /ux-lock verify <plan.md> to grade the plan against the live URL.

Frequently Asked Questions about ux-lock

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

FAQPage Schema
How do I generate Playwright regression specs to pin frontend DOM contracts?

To generate Playwright regression specs, use LOCK mode by running the command against a specific commit. UX Lock pins the public DOM contract of a fix using semantic assertions like roles, aria-* attributes, and data-testid to prevent untracked frontend regressions.

How do I verify a frontend implementation against Acceptance Criteria?

To verify an implementation, run VERIFY mode against a plan file and a live URL. UX Lock parses the plan's Acceptance Criteria and runs one assertion per criterion against the live web application, producing a pass/fail report to grade the implementation.

Does UX Lock require specific DOM attributes for testing automation?

Yes, UX Lock requires semantic DOM assertions for testing automation. It relies on roles, aria-* attributes, and data-testid selectors to pin DOM contracts and run regression specs, while also supporting optional accessibility checks for verification.

What is the best way to prevent untracked DOM changes from causing frontend regressions?

The best way to prevent frontend regressions is to lock DOM contracts using automated Playwright specs. UX Lock generates these regression specs to pin a fix's public DOM structure, ensuring untracked changes are caught before reaching production.

Can I integrate UX Lock verification runs with other testing automation skills?

Yes, UX Lock integrates with cross-skill persistence to record generated specs and verify runs. It coordinates with other testing automation skills like audit-loop, persona-test, and ship to streamline the overall frontend verification workflow.

Do I need a live URL to run e2e testing and plan verification?

Yes, a live URL is required for both locking DOM contracts and verifying plans. UX Lock applies to web applications accessible via a live URL, executing Playwright regression specs and Acceptance Criteria assertions against the running frontend environment.