-
Notifications
You must be signed in to change notification settings - Fork 16
UXDOPS-2843: Add /ux-design workflow for UX design and implementation handoff #102
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| --- | ||
| name: start | ||
| description: Code review with PatternFly compliance checks for UI changes. | ||
| --- | ||
|
|
||
| # Code Review — with UXD Checks | ||
|
|
||
| This override wraps the built-in code review start phase and adds PatternFly | ||
| compliance checks for PRs that touch UI code. | ||
|
|
||
| ## Step 1: Run Built-in Code Review | ||
|
|
||
| Read and execute the built-in code review skill at | ||
| `../../../code-review/skills/start.md`. | ||
|
|
||
| Complete the full review process as usual. | ||
|
|
||
| ## Step 2: UXD Review (conditional) | ||
|
|
||
| After the built-in review completes, check whether the PR touches UI code: | ||
|
|
||
| **Run this step when ANY of the following are true:** | ||
| - Changed files include `.tsx`, `.jsx`, `.css`, or `.scss` extensions | ||
| - Changed files import from `@patternfly/*` packages | ||
|
|
||
| **Skip this step when:** | ||
| - No files match the above criteria | ||
|
|
||
| ### If running: | ||
|
|
||
| Run `/pf-code-review:pf-review`. If this skill is not available, skip this step. | ||
|
|
||
| Add UXD findings as a separate section in the review output. | ||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue without UXD checks. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Present combined review findings — standard code review plus UXD checks (if run). | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| --- | ||
| name: draft | ||
| description: Design document drafting with PatternFly compliance check for PF-based UIs. | ||
| --- | ||
|
|
||
| # Design Draft — with PatternFly Compliance | ||
|
|
||
| This override wraps the built-in design draft phase and adds a PatternFly | ||
| compliance check for features that use PatternFly components. | ||
|
|
||
| ## Step 1: Run Built-in Draft | ||
|
|
||
| Read and execute the built-in draft skill at | ||
| `../../../design/skills/draft.md`. | ||
|
|
||
| Follow every stage — outline, draft, review, and revision. Write the design | ||
| document to `.artifacts/design/{issue-key}/03-design.md` as usual. | ||
|
|
||
| ## Step 2: PatternFly Compliance Check (conditional) | ||
|
|
||
| After the design document is drafted, check whether the feature uses | ||
| PatternFly components: | ||
|
|
||
| **Run this step when ANY of the following are true:** | ||
| - The design references PatternFly components (Page, Table, Modal, Toolbar, etc.) | ||
| - The codebase imports from `@patternfly/*` packages | ||
| - The feature modifies existing PatternFly-based UI | ||
|
|
||
| **Skip this step when:** | ||
| - No PatternFly components are referenced or imported | ||
| - The feature is backend-only | ||
|
|
||
| ### If running: | ||
|
|
||
| Run `/pf-code-review:pf-review`. If this skill is not available, skip this step. | ||
|
|
||
| Append findings to the design document: | ||
|
|
||
| ```markdown | ||
| ## PatternFly Compliance | ||
|
|
||
| {compliance findings from pf-review} | ||
| ``` | ||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue without PatternFly compliance check. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Report the design document with compliance results (if run). | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| name: research | ||
| description: Design research with UXD heuristic evaluation for UI-facing features. | ||
| --- | ||
|
|
||
| # Design Research — with UXD Evaluation | ||
|
|
||
| This override wraps the built-in design research phase and adds a UXD | ||
| heuristic evaluation step for features with a user-facing interface. | ||
|
|
||
| ## Step 1: Run Built-in Research | ||
|
|
||
| Read and execute the built-in research skill at | ||
| `../../../design/skills/research.md`. | ||
|
|
||
| Follow every stage — scope, plan, iterative research execution, synthesis, | ||
| and user presentation. Write findings to | ||
| `.artifacts/design/{issue-key}/02-research.md` as usual. | ||
|
|
||
| Do not skip or abbreviate any part of the built-in process. | ||
|
|
||
| ## Step 2: UX Heuristic Evaluation (conditional) | ||
|
|
||
| After the built-in research completes and the user approves the findings, | ||
| check whether this feature has a user-facing interface: | ||
|
|
||
| **Run this step when ANY of the following are true:** | ||
| - The PRD describes new screens, pages, or views | ||
| - The PRD modifies existing UI workflows or navigation | ||
| - Wireframes, mockups, or screenshots exist in the artifacts or PRD | ||
| - The context doc (`01-context.md`) references frontend components | ||
|
|
||
| **Skip this step when:** | ||
| - The feature is entirely backend (API, data pipeline, infrastructure) | ||
| - No UI surface is described or implied in the PRD | ||
|
|
||
| ### If running: | ||
|
|
||
| Gather UI artifacts from the research and PRD — wireframes, mockups, | ||
| screenshots, or detailed text descriptions of the proposed interface. | ||
|
|
||
| Run `/uxd-workshop:uxd-research-heuristic-eval` against the gathered | ||
| artifacts. If this skill is not available, skip this step. | ||
|
|
||
| When the evaluation completes, append the findings to the research artifact: | ||
|
|
||
| ```markdown | ||
| ## UX Heuristic Evaluation | ||
|
|
||
| {evaluation findings from the heuristic eval skill} | ||
| ``` | ||
|
|
||
| Save to `.artifacts/design/{issue-key}/02-research.md`. | ||
|
|
||
| Present the combined findings to the user — standard research results plus | ||
| heuristic evaluation. Note which usability violations may affect | ||
| architectural decisions in the design phase. | ||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue without UXD evaluation. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Report combined findings (standard research + heuristic evaluation if run). | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| --- | ||
| name: code | ||
| description: Implementation with PatternFly component generation for UI stories. | ||
| --- | ||
|
|
||
| # Implement Code — with PatternFly Generation | ||
|
|
||
| This override wraps the built-in implement code phase and adds PatternFly | ||
| component generation for stories that involve UI work. | ||
|
|
||
| ## Step 1: Run Built-in Code Phase | ||
|
|
||
| Read and execute the built-in code skill at | ||
| `../../../implement/skills/code.md`. | ||
|
|
||
| Follow the full TDD cycle — write contract-based tests, then production code. | ||
|
|
||
| ## Step 2: PatternFly Component Generation (conditional) | ||
|
|
||
| After the built-in code phase completes, check whether the story involves | ||
| PatternFly UI components: | ||
|
|
||
| **Run this step when ANY of the following are true:** | ||
| - The story requires new forms, tables, or chart components | ||
| - The codebase imports from `@patternfly/*` packages | ||
| - The implementation plan references PatternFly components | ||
|
|
||
| **Skip this step when:** | ||
| - No UI components are needed | ||
| - The story is backend-only | ||
|
|
||
| ### If running: | ||
|
|
||
| Use the appropriate PatternFly generator for the component type. | ||
| If a skill is not available, skip it. | ||
|
|
||
| - **Forms:** `/pf-react:pf-form-gen` | ||
| - **Tables:** `/pf-react:pf-table-gen` | ||
| - **Charts:** `/pf-react:pf-chart-gen` | ||
|
|
||
| Run the generator that matches the component type, then integrate the output | ||
| into the implementation. | ||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue without PatternFly generation. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Report the implementation with any generated components. | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| --- | ||
| name: validate | ||
| description: Validation with PatternFly-aware test generation for UI components. | ||
| --- | ||
|
|
||
| # Implement Validate — with PatternFly Test Generation | ||
|
|
||
| This override wraps the built-in implement validate phase and adds | ||
| PatternFly-aware test generation for UI components. | ||
|
|
||
| ## Step 1: Run Built-in Validate Phase | ||
|
|
||
| Read and execute the built-in validate skill at | ||
| `../../../implement/skills/validate.md`. | ||
|
|
||
| Complete the full validation — run tests, check CI expectations, verify coverage. | ||
|
|
||
| ## Step 2: PatternFly Test Generation (conditional) | ||
|
|
||
| After the built-in validation completes, check whether the implementation | ||
| includes PatternFly components that need test coverage: | ||
|
|
||
| **Run this step when ANY of the following are true:** | ||
| - New `.tsx` components import from `@patternfly/*` packages | ||
| - Existing PatternFly components were modified as part of the story | ||
| - Test coverage for PatternFly components is below project thresholds | ||
|
|
||
| **Skip this step when:** | ||
| - No PatternFly components were added or modified | ||
| - Tests already cover the PatternFly components adequately | ||
|
|
||
| ### If running: | ||
|
|
||
| Run `/pf-react:pf-test-gen`. If this skill is not available, skip this step. | ||
|
|
||
| Run the generated tests and verify they pass. | ||
|
Comment on lines
+32
to
+36
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift Do not treat unavailable test generation as a passing validation path. When PatternFly coverage is required and The supplied validation contract requires explicit risk assessment when checks are skipped. 🤖 Prompt for AI Agents |
||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue without PatternFly test generation. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Report validation results including any generated tests. | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| --- | ||
| name: handoff | ||
| description: Implementation handoff with UXD design-handoff skill enhancement. | ||
| --- | ||
|
|
||
| # Handoff — with UXD Design Handoff | ||
|
|
||
| This override wraps the built-in handoff phase and enhances the | ||
| implementation spec with the UXD design-handoff skill when available. | ||
|
|
||
| ## Step 1: Run Built-in Handoff Phase | ||
|
|
||
| Read and execute the built-in handoff skill at | ||
| `../../../ux-design/skills/handoff.md`. | ||
|
|
||
| Complete the full handoff process — component mapping, interaction specs, | ||
| state enumeration, acceptance criteria, and research context. | ||
|
|
||
| ## Step 2: UXD Design Handoff Enhancement (conditional) | ||
|
|
||
| After the built-in handoff completes, check whether the UXD design-handoff | ||
| skill is available: | ||
|
|
||
| Run `/uxd-workshop:uxd-design-handoff` with the handoff artifact | ||
| (`04-handoff.md`) as input. If this skill is not available, skip this step. | ||
|
|
||
| ### If running: | ||
|
|
||
| Compare the skill's output with the built-in handoff results. Strengthen | ||
| `04-handoff.md` with any additions: | ||
| - Missing state enumerations the skill identified | ||
| - Acceptance criteria gaps | ||
| - Component mapping refinements | ||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue with the built-in handoff output — it covers the same ground. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Present the handoff spec to the researcher. | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| --- | ||
| name: ingest | ||
| description: Problem framing with UXD discovery skill enhancement. | ||
| --- | ||
|
|
||
| # Ingest — with UXD Discovery | ||
|
|
||
| This override wraps the built-in ingest phase and enhances problem framing | ||
| with the UXD discovery skill when available. | ||
|
|
||
| ## Step 1: Run Built-in Ingest Phase | ||
|
|
||
| Read and execute the built-in ingest skill at | ||
| `../../../ux-design/skills/ingest.md`. | ||
|
|
||
| Complete the full discovery process as usual — problem framing, user group | ||
| identification, competitive landscape, and research questions. | ||
|
|
||
| ## Step 2: UXD Discovery Enhancement (conditional) | ||
|
|
||
| After the built-in ingest completes, check whether the UXD discovery skill | ||
| is available: | ||
|
|
||
| Run `/uxd-workshop:uxd-discovery` with the same input (Jira issue, feature | ||
| description, or problem statement). If this skill is not available, skip | ||
| this step. | ||
|
|
||
| ### If running: | ||
|
|
||
| Compare the skill's output with the built-in ingest results. Merge any | ||
| additional findings into `01-discovery.md`: | ||
| - User groups the built-in phase missed | ||
| - Competitive examples the skill surfaced | ||
| - Research questions worth adding | ||
|
|
||
| ### If skipping: | ||
|
|
||
| Continue with the built-in ingest output — it covers the same ground. | ||
|
|
||
| ## When This Phase Is Done | ||
|
|
||
| Present the discovery brief to the researcher. | ||
| Then **re-read the controller** (`controller.md`) for next-step guidance. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,6 +21,9 @@ Reusable AI coding workflows a team member can install globally or per-project, | |
| - **Design** -- Design-and-decompose workflow: ingest a PRD, draft a technical design document, decompose into Jira-ready epics and stories, revise based on feedback, publish as a GitHub PR, respond to reviewer comments, and sync epics/stories to Jira. | ||
| See [design/README.md](design/README.md). | ||
|
|
||
| - **Research** -- UX research workflow: ingest a feature request, investigate through user research, generate prototypes, run heuristic evaluation, and produce a validated design handoff. Uses skills from the [UXD AI Skills marketplace](https://github.com/rh-uxd/ai-helpers). | ||
| See [research/README.md](research/README.md). | ||
|
|
||
|
Comment on lines
+24
to
+26
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win Add Research to the installation and invocation indexes. The new entry is present in “What’s Included”, but the selective-installation list at Line [114] through Line [129] and the command examples at Line [155] through Line [169] still omit Research. Add the workflow to both sections and document its actual commands. 🤖 Prompt for AI Agents |
||
| - **Implement** -- Story-to-code workflow: take a Jira Story, plan the implementation, write contract-based tests and production code via TDD, validate against the project's CI expectations, and manage review via GitHub PRs. | ||
| See [implement/README.md](implement/README.md). | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Make each phase override self-contained.
These overrides delegate to built-in phase files instead of replacing them with complete copies. Copy the built-in process into each override, preserve its input/output contract, then add the workflow-specific enhancement; do not reference sibling built-in files. Otherwise installed behavior depends on the source-repository layout and may skip or reorder required checks.
📍 Affects 2 files
.workflows/design/skills/research.md#L11-L20(this comment).workflows/code-review/skills/start.md#L8-L14🤖 Prompt for AI Agents
Source: Learnings