skills.rest
jonnymuir
jonnymuirCOMMUNITY
Explore all skills by this author →
Website𝕏@jonnymooGitHub

workflow-editor-ui-quality-gate

Validate Workflow Editor frontend slices with build, Storybook, and Playwright tests.

1|Updated Dec 23, 2025
Search Tags:#workflow#testing#frontend#playwright#quality-gate#storybook
One-click install
npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-editor-ui-quality-gate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-editor-ui-quality-gate
Source: https://github.com/jonnymuir/Umbraco.Prism/tree/main/.claude/skills/workflow-editor-ui-quality-gate
Command: npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-editor-ui-quality-gate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires npm, playwright.

What problem does it solve?

This Skill provides a structured quality gate for validating Workflow Editor frontend components, preventing regressions in complex UI slices like graphs and inspectors without relying solely on slow end-to-end tests.

Core Features & Use Cases

  • Contract Validation: Ensures TypeScript and Lit contracts remain intact through build-time checks.
  • Interaction & A11y Testing: Leverages Storybook CI to verify component behavior and accessibility standards.
  • Visual Regression: Provides a dedicated path for deterministic screenshot assertions to ensure UI consistency.
  • Use Case: Use this when modifying the workflow graph or inspector panel to ensure that keyboard navigation, drag-and-drop gestures, and visual rendering remain functional across the entire editor shell.

Quick Start

Execute the workflow-editor-ui-quality-gate skill to run the full suite of build, storybook, and playwright tests against your current frontend changes.

Frequently Asked Questions about workflow-editor-ui-quality-gate

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

FAQPage Schema
How do I validate Workflow Editor UI components for visual regressions and accessibility?▼

Validate Workflow Editor UI components by orchestrating build checks, Storybook interaction tests, and Playwright smoke tests to ensure accessibility compliance, visual regression control, and functional integrity of the authoring API wiring.

What is the best way to test frontend slices without relying on slow end-to-end tests?▼

Testing frontend slices without slow end-to-end tests requires a structured quality gate that applies build-time contract validation and Storybook CI to verify component behavior, keyboard navigation, and drag-and-drop gestures.

How do I run Storybook interaction and Playwright smoke tests for the Umbraco Prism client?▼

Run Storybook interaction and Playwright smoke tests for the Umbraco Prism client by executing the full quality gate suite against your current frontend changes to validate graph, list, and inspector components.

Do I need npm and Playwright installed to validate the workflow graph and inspector panel?▼

Yes, you need npm and Playwright installed to validate the workflow graph and inspector panel, as the quality gate depends on these tools to orchestrate build checks and execute browser-based smoke tests.

Can I use this quality gate to check TypeScript and Lit contracts for UI development tasks?▼

Yes, you can use this quality gate to check TypeScript and Lit contracts for UI development tasks, ensuring that component contracts remain intact through deterministic build-time validation checks.

Related Skills

Explore More Software Engineering Skills→
jonnymuirjonnymuir
1

workflow-validation-quality-gate

Execute multi-stage quality gates for Umbraco.Prism workflow-editor validation.

Community
Advanced
jonnymuirjonnymuir
1

workflow-stage-editor-quality-gate

Validate workflow-editor stage features with build, unit, Storybook, and Playwright tests.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
jonnymuirjonnymuir
1

workflow-transition-editor-quality-gate

Validate workflow transition authoring integrity in Umbraco Prism.

Community
Advanced