NO-ISSUE: feat(dev): add frontend skill with PatternFly ai-helpers dependency

[quay-devel]

Summary

• Add a new /dev:frontend skill that loads Quay-specific React frontend context
• Declare patternfly/ai-helpers react plugin as a Lola dependency so PatternFly 6 component knowledge is available
• Auto-detect frontend work in /dev:code and invoke /frontend when tickets touch web/

Root Cause / Rationale

The dev plugin had no frontend-specific context. Agents working on Quay's React frontend (web/) lacked knowledge of Quay's conventions that diverge from PatternFly defaults (SuspenseLoader pattern, Vitest instead of Jest, state management layering, custom Axios instance). By adding this skill and the PF Lola dependency, agents get both generic PatternFly 6 knowledge and Quay-specific overrides in one package.

Changes

• plugins/dev/skills/frontend/SKILL.md — New skill covering: Quay overrides (SuspenseLoader, Vitest, state management, Axios), data flow pattern (Component → Hook → Resource → Axios), testing patterns (Vitest unit tests, Playwright E2E)
• plugins/dev/lola.yaml — Added patternfly/ai-helpers react plugin as a Lola dependency
• plugins/dev/skills/code/SKILL.md — Added frontend auto-detect block to Step 1
• plugins/dev/README.md — Added /dev:frontend to skills table

Test Plan

• Manual testing performed
• Verified skill loads correctly and references valid PF agents
• Verified Lola dependency syntax matches patternfly/ai-helpers repo structure

JIRA

N/A — NO-ISSUE enhancement

Backport

• No backport needed

Automation

• Session ID: session-50a40328-85c2-440b-9563-499d952a1ede

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: 7b737904-7abe-4acc-8737-9b5c6f29a95b

📥 Commits

Reviewing files that changed from the base of the PR and between c633e20 and 1e38f72.

📒 Files selected for processing (1)

• plugins/dev/lola.yaml

🚧 Files skipped from review as they are similar to previous changes (1)

• plugins/dev/lola.yaml

---

Walkthrough

Adds a new Dev plugin skill /dev:frontend (Quay React + PatternFly frontend context), registers it in plugin metadata, documents auto-invocation by /code for web changes, and declares PatternFly ai-helpers dependencies in plugins/dev/lola.yaml.

Changes

Frontend Dev Skill Registration

Layer / File(s)	Summary
Plugin Skill Metadata docs/data.json	Adds frontend skill under dev (id: frontend) with description and note that /code auto-invokes it for web changes.
Skill Documentation plugins/dev/skills/frontend/SKILL.md	New detailed frontend skill describing Quay React + PatternFly context: allowed tools, loading-state pattern (<SuspenseLoader> + useSuspenseQuery), state layering (TanStack Query → React Context; Recoil legacy), Axios usage (src/libs/axios.ts), component→hook→resource→axios→API data flow, mutation cache invalidation, and Vitest/Playwright testing conventions.
Code Skill Integration plugins/dev/skills/code/SKILL.md	Adds “Frontend auto-detect” guidance: when ticket/branch touches web/ files, /code should invoke /frontend before making changes.
Plugin Dependency Declarations plugins/dev/lola.yaml	Adds top-level dependencies entries pointing to https://github.com/patternfly/ai-helpers.git mapped to modules plugins/react, plugins/a11y, and plugins/design-foundations; existing hooks.post-install unchanged.
Documentation / Registry Updates plugins/dev/README.md, PLUGINS.md	Documents the new /dev:frontend skill and notes it is auto-invoked by /code for web changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@plugins/dev/skills/frontend/SKILL.md`:
- Around line 86-88: The fenced data-flow block containing "Component → Hook
(src/hooks/UseX.ts) → Resource (src/resources/XResource.ts) → Axios → API" is
unlabeled and triggers markdownlint MD040; update that backtick fence to include
a language label (e.g., change ``` to ```text) so the block is explicitly marked
as text while leaving the inner content unchanged.
- Around line 110-122: The test references axios.post but never imports axios,
causing a ReferenceError; add an import for the mocked module (e.g., import
axios from 'src/libs/axios') alongside the existing imports so
vi.mock('src/libs/axios') provides the axios object used in the assertion
(affecting the vi.mocked(axios.post) call in the test).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: a829cd11-9135-49e0-a72f-55c156af9649

📥 Commits

Reviewing files that changed from the base of the PR and between 48ce0ce and e8c5ba8.

📒 Files selected for processing (6)

• PLUGINS.md
• docs/data.json
• plugins/dev/README.md
• plugins/dev/lola.yaml
• plugins/dev/skills/code/SKILL.md
• plugins/dev/skills/frontend/SKILL.md

📜 Review details

🧰 Additional context used

🪛 markdownlint-cli2 (0.22.1)

plugins/dev/skills/frontend/SKILL.md

[warning] 86-86: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🔇 Additional comments (6)

plugins/dev/lola.yaml (1)

1-3: Dependency declaration is clean and appropriately scoped.

This wiring matches the new frontend skill intent and keeps existing hooks intact.

plugins/dev/skills/frontend/SKILL.md (1)

35-83: Quay override guidance is clear and actionable.

The Suspense/Vitest/state-layering/Axios sections are specific enough to prevent PF-default drift during frontend work.

docs/data.json (1)

26-30: Skill metadata entry is consistent and complete.

Name/id/description match the new /dev:frontend behavior and auto-invocation intent.

PLUGINS.md (1)

17-17: Plugins index update looks good.

The new /dev:frontend entry is clear and aligned with the skill contract.

plugins/dev/README.md (1)

17-17: README skill table update is accurate.

The new row is concise and consistent with the frontend skill behavior.

plugins/dev/skills/code/SKILL.md (1)

33-35: Frontend auto-detect step is a good workflow guardrail.

It adds the right context-loading trigger before implementation begins.