jira-measure-of-success

Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls. Use when visual differences have been identified and you need to find the exact CSS property mismatches to fix. Pairs with the visual-diff skill for a complete visual QA workflow.

Debug and fix failing Playwright E2E tests. Use when tests fail, when asked to fix failing tests, or when investigating test failures. Analyzes test output, screenshots, error context, and uses Playwright MCP to identify root causes.

Diagnose and fix UI/runtime bugs. After a code change, verify in the browser with the available browser tools, read the console, and — for non-obvious bugs — add strategic temporary logging to locate the cause, then remove it. The agent decides how much of this flow a given bug needs.

Discover all visual states of a component by interactively exploring the production baseline page — not by reading story files. Finds every interactive element (nav items, dropdowns, toggles, buttons) that produces a distinct visual state, records the interactions needed to reach each one, and saves a pixel-perfect.config.json that the pixel-perfect skill uses to replay those same interactions on both production and Storybook. Run this once per component; re-run when the production page changes.

End-to-end workflow for implementing a new UI feature in a mock app. Ensures data model alignment, sample data, UI/UX consistency, component reuse, and automated verification. Load for ANY UI change.

Orchestrate a complete visual QA workflow to make a dev/Storybook page match a baseline URL pixel-for-pixel. Combines the visual-diff skill (screenshot comparison) with the computed-styles skill (CSS property extraction) in a loop until the pages match. Use when replicating a production page, matching a design reference, or achieving pixel perfection on a component.

Redeploy the "Measure of Success" Jira Forge app to a dev site after code or manifest changes. Use when asked to deploy, redeploy, push to Jira, install/upgrade the app, ship a new module/scope/custom field, or start a live tunnel. Covers Node 22, the Custom UI build, forge deploy/install --upgrade, and the tunnel.

Make UIs responsive across all devices and verify responsiveness using Playwright. Includes scrollbar testing, breakpoint verification, and layout validation. Use when implementing new features, fixing layout issues, or ensuring mobile compatibility.

Compare a baseline URL against a dev or Storybook URL by taking Playwright screenshots at multiple breakpoints, running a pixel-level image diff, and reporting results to guide style and HTML corrections. Use when replicating an existing page or component, verifying visual accuracy, or checking responsive fidelity.

Create, maintain, and verify end-to-end (E2E) tests using Playwright MCP. Use when a new feature or flow needs E2E coverage, when updating flows, or verifying UI and functional correctness.

Create React components, hooks, and data-loading surfaces for the Measure of Success app following the modlet pattern. Use when adding any Custom UI component, custom hook, or surface. Adapted for this app (Vitest, @ui/@domain aliases, Tailwind-on-Atlaskit-tokens, injectable loader hooks, portable-stories tests).