workflow-stage-editing-accessibility

Separate structural workflow actions from property editing with accessibility standards.

1|Updated Dec 23, 2025
One-click install
npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-stage-editing-accessibility
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: workflow-stage-editing-accessibility
Source: https://github.com/jonnymuir/Umbraco.Prism/tree/main/.claude/skills/workflow-stage-editing-accessibility
Command: npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-stage-editing-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the fragmentation of user interfaces in workflow editors, ensuring that structural actions and property edits are handled in the correct context to prevent user confusion and accessibility barriers.

Core Features & Use Cases

  • Contextual Separation: Keeps structural actions like creation and deletion in the workspace while moving property editing to a dedicated inspector.
  • Accessibility Standards: Implements focus management, keyboard navigation, and validation patterns to ensure parity for all users.
  • Use Case: When building a visual workflow designer, use this pattern to ensure that adding a new stage is a workspace-level action, while renaming that stage or updating its description happens in a shared inspector panel.

Quick Start

Apply the workflow-stage-editing-accessibility patterns to the current workflow editor implementation to ensure structural actions remain in the workspace and property edits are handled in the inspector.

Frequently Asked Questions about workflow-stage-editing-accessibility

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

FAQPage Schema
How do I handle workflow stage editing and structural graph manipulation separately in a UI editor?

Workflow stage editing separates structural graph manipulation, like creation and deletion, into the workspace, while property edits are handled in a dedicated inspector panel to prevent user confusion.

What's the best way to implement keyboard navigation and focus trapping in complex workflow editors?

Implementing accessibility standards for workflow editors requires enforcing focus management, keyboard reordering, and in-context validation for stage transitions to ensure parity for all users.

Why does my visual workflow designer create accessibility barriers during stage creation?

Accessibility barriers occur when workflow editors fragment user interfaces by mixing structural actions and property edits in the same context, rather than separating workspace actions from inspector configurations.

Can I use in-context validation for stage transitions in a visual workflow builder?

Yes, in-context validation for stage transitions is enforced alongside focus management and keyboard navigation to maintain accessibility parity when users interact with workflow stage properties.

When do I need to separate structural actions from property configuration in a frontend workflow editor?

You need contextual separation when building visual workflow designers to ensure adding a new stage remains a workspace-level action, while renaming or updating descriptions happens in a shared inspector panel.