You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .claude/rules/css-patternfly.md
+10-7Lines changed: 10 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,9 +31,9 @@ The majority of Dashboard components should use PatternFly components and props
31
31
### Priority order
32
32
33
33
1.**PatternFly component props first** — always the default approach
34
-
2.**PF layout components** (`Flex`, `Stack`, `Grid`, `Split`) for spacing and arrangement
34
+
2.**PF layout components** (`Flex`, `Stack`, `Grid`, `Split`, `Gallery`) for spacing and arrangement
35
35
3.**PF utility classes** (`pf-v6-u-*`) when props and layout components are insufficient
36
-
4.**SCSS only** when PF has no built-in functionality — and open a PF upstream issue if something fundamental is missing
36
+
4.**SCSS with PF tokens only** when PF has no built-in functionality — must use `var(--pf-t--*)` tokens, not hardcoded values. Open a PF upstream issue if something fundamental is missing.
37
37
38
38
### File format and co-location
39
39
@@ -82,14 +82,17 @@ import { t_global_spacer_xs } from '@patternfly/react-tokens';
82
82
83
83
## Custom Class Naming
84
84
85
-
Follow the project's BEM-like convention with `odh-` prefix:
85
+
Follow the project's BEM-like convention. Custom block-level classes must be namespaced with a prefix to avoid collisions:
86
+
87
+
-**`frontend/src/`** — use the `odh-` prefix.
88
+
-**`packages/*/`** — use a consistent package-specific prefix (e.g., `autorag-`, `automl-`, `fs-`). The `odh-` prefix is also acceptable for shared/cross-cutting components.
|`dashboard-area-security`|*(cross-cutting -- no dedicated directory)*|
@@ -569,6 +572,7 @@ An area label can appear on issues belonging to any team. This mapping provides
569
572
|`dashboard-area-cluster-settings`| Monarch |
570
573
|`dashboard-area-cypress`| Monarch |
571
574
|`dashboard-area-applications`| Monarch |
575
+
|`dashboard-area-observability`| Monarch |
572
576
|`dashboard-area-workbenches`| Razzmatazz |
573
577
|`dashboard-area-jupyter`| Razzmatazz |
574
578
|`dashboard-area-notebooks`| Razzmatazz |
@@ -612,7 +616,7 @@ When an issue lacks area labels, these keywords and feature associations can hel
612
616
613
617
| Team | Scrum label | Keywords / features | Reasoning |
614
618
|---|---|---|---|
615
-
|**Monarch**|`dashboard-monarch-scrum`| PatternFly, PF6, home page, projects page, navigation, infrastructure, cluster settings, shared UI, consistencies, BFF shared infrastructure (not feature-specific BFF), Go backend shared patterns, common middleware, shared auth, plugin-core, app-config, common libraries, cross-package utilities, applications, **generic `manifests/` / install-base / cross-cutting operator YAML**| Monarch owns app shell, shared infrastructure, cross-cutting UI foundations, cross-cutting BFF/Go backend patterns, and **default ownership of repo-wide manifest and install layout** when no feature-specific path dominates. "applications" refers to the enabled/explore applications pages (ISV integrations). |
619
+
|**Monarch**|`dashboard-monarch-scrum`| PatternFly, PF6, home page, projects page, navigation, infrastructure, cluster settings, shared UI, consistencies, BFF shared infrastructure (not feature-specific BFF), Go backend shared patterns, common middleware, shared auth, plugin-core, app-config, common libraries, cross-package utilities, applications, observability, Perses, PersesDashboard, metrics dashboard, **generic `manifests/` / install-base / cross-cutting operator YAML**| Monarch owns app shell, shared infrastructure, cross-cutting UI foundations, cross-cutting BFF/Go backend patterns, the observability/Perses dashboard integration (`packages/observability/`), and **default ownership of repo-wide manifest and install layout** when no feature-specific path dominates. "applications" refers to the enabled/explore applications pages (ISV integrations). |
616
620
|**Razzmatazz**|`dashboard-razzmatazz-scrum`| workbenches, spawner, notebook server, notebooks, BYON image, Jupyter, JupyterLab, pipelines, pipeline server, DSPA, pipeline run, hardware profiles, accelerator profiles, tolerations, node selector, storage classes, user management, RBAC, permissions, group settings | Razzmatazz owns the core DS project experience: workbenches, notebooks, pipelines, hardware profiles, storage classes, and user management. |
617
621
|**Zaffre**|`dashboard-zaffre-scrum`| model serving, inference, KServe, ModelMesh, serving runtime, model deploy, NIM, vLLM, connections, connection types, MaaS admin (subscriptions, API keys, auth policies), operator bundles, kustomize overlays, OLM resources for serving, MaaS, and connection types | Zaffre owns model serving infrastructure, the MaaS admin package (`packages/maas/`, `dashboard-area-maas` — subscriptions, API keys, auth policies), connection types, and the operator and deployment layers that ship those capabilities. Gen AI Studio's consumption of MaaS models/tokens is Crimson (`dashboard-area-genai`). |
618
622
|**Green**|`dashboard-green-scrum`| model catalog, catalog card, model registry, registered model, model version, model artifact, distributed workloads, Kueue, cluster queue, local queue, workload metrics, Ray (when related to DW queue management), MCP, MCP server, MCP catalog | Green owns model catalog, model registry, distributed workloads (queue management side), and MCP. |
description: Review code for custom styling convention violations in ODH Dashboard against css-patternfly.md rules. Checks PF priority order, wrapper compliance, and class naming conventions. Use when asked to review code, audit styling, or review a PR for convention compliance.
4
+
---
5
+
6
+
# Style Convention Review — ODH Dashboard
7
+
8
+
Audits custom styling changes against the project's conventions. The core principle is that custom CSS should be the last resort — the entire mod-arch-shared and theme-aware component system exists to avoid it. When custom styles do appear, this review checks they followed the right process.
9
+
10
+
## Inputs
11
+
12
+
The user may provide:
13
+
14
+
-**No arguments** — review files changed versus `main` by running `git diff main --name-only -- '*.scss' '*.css' '*.tsx'`, **excluding** any `**/upstream/**` paths.
15
+
-**A file or directory path** — review only those files (still exclude `**/upstream/**` paths).
16
+
-**A PR number (`#N`)** — run `gh pr diff N` to get changed files and review only those (skip any paths under `upstream/`).
17
+
-**A branch name** — validate the branch ref matches `^[A-Za-z0-9._/][A-Za-z0-9._/-]*$` (anchored, no leading hyphens, no whitespace or shell metacharacters), then resolve it with `git rev-parse --verify <branch>` before use; if it resolves cleanly, run `git diff "main...<branch>" -- '*.scss' '*.css' '*.tsx'` using the validated ref and filter out any `upstream/` paths from the results.
18
+
19
+
## Phase 1: Load reference data
20
+
21
+
1.`.claude/rules/css-patternfly.md` — priority order, token rules, wrapper components, class naming. **The "Priority order" section is the core rule for Check 1; the "PF Wrapper Components" section is the reference for Check 2; the "Custom Class Naming" section is the reference for Check 3.**
22
+
23
+
## Phase 2: Run checks
24
+
25
+
### Check 1: PF priority order — was custom styling necessary?
26
+
27
+
This is the most important check. The priority order from `css-patternfly.md` exists because the dashboard uses PatternFly components and mod-arch-shared wrappers as the primary styling system. Custom SCSS or inline styles should only appear when PF genuinely cannot do it.
28
+
29
+
For every custom SCSS block or inline style introduced, verify the **"Priority order"** from `css-patternfly.md` was followed.
30
+
31
+
Flag SCSS or inline styles where a PF prop, layout component, or utility class would have been sufficient. For SCSS that IS appropriate (step 4), also flag any hardcoded values that should be PF tokens.
32
+
33
+
**If PF genuinely cannot do it:** flag as Info in the report. Do NOT create GitHub issues, Jira tickets, or modify source files — only report the gap. The report entry should recommend the developer:
34
+
35
+
1. Open a PF upstream issue describing the gap
36
+
2. Open a RHOAIENG follow-up Jira linking it
37
+
3. Add a tracking comment above the custom style, e.g.:
38
+
39
+
```scss
40
+
// TODO: PF gap — remove when https://github.com/patternfly/patternfly/issues/XXXX is resolved
Flag raw PatternFly components where the project's wrappers should be used instead. These wrappers encapsulate theme-aware behavior and shared patterns — bypassing them means the component won't behave correctly in all themes.
47
+
48
+
Use the wrapper mapping table in the **"PF Wrapper Components"** section of `.claude/rules/css-patternfly.md` as the authoritative reference.
49
+
50
+
**Detection procedure for each TSX file:**
51
+
52
+
1. Parse the file's import declarations. For each import, record the specifier names and the source module (e.g. `import { FormSection } from '@patternfly/react-core'`).
53
+
2. Only consider imports whose source starts with `@patternfly/` (e.g. `@patternfly/react-core`, `@patternfly/react-table`).
54
+
3. For each wrapper entry in the mapping table, check whether the PF component name appears as an import specifier from a `@patternfly/*` source in this file. If it does, and the JSX tree uses that imported identifier, flag it.
55
+
4.**Skip the wrapper's own implementation file** — do not flag the file that defines the project wrapper itself (e.g. `components/pf-overrides/FormSection.tsx` legitimately imports PF `FormSection`).
56
+
57
+
### Check 3: Custom class naming convention
58
+
59
+
Scan SCSS and TSX files for custom CSS class names. Use the **"Custom Class Naming"** section of `css-patternfly.md` as the authoritative reference for naming conventions. Ignore PF classes (`pf-v6-*`, `pf-v5-*`, `pf-c-*`, `pf-m-*`).
60
+
61
+
Flag class names where:
62
+
63
+
-**Missing required prefix** — block-level class has no namespace prefix per the location rules in `css-patternfly.md`.
64
+
-**Wrong BEM separator** — element uses single underscore or hyphen instead of double underscore (`__`).
65
+
-**Non-standard modifier** — uses `--modifier` or `is-modifier` instead of `m-{modifier}` / `{prefix}-m-{modifier}`.
66
+
-**Non-standard utility** — uses an unprefixed utility name instead of `{prefix}-u-{name}`.
67
+
68
+
## Phase 3: Generate report
69
+
70
+
```md
71
+
## Convention Review — ODH Dashboard
72
+
73
+
### Summary
74
+
- Files reviewed: N
75
+
- Violations found: N
76
+
- By severity: N critical, N warning, N info
77
+
78
+
### Critical (must fix)
79
+
### Warning (should fix)
80
+
### Info (PF gap — developer follow-up needed)
81
+
82
+
---
83
+
84
+
**[SEVERITY] Check N: Description**
85
+
- File: `path/to/file.scss`
86
+
- Line: NN
87
+
- Found: `the problematic code`
88
+
- Fix: `the corrected code`
89
+
- Why: Brief explanation referencing the specific rule
90
+
91
+
For each Info finding, include a **Developer action** block:
92
+
-[ ] Open a PatternFly upstream issue at https://github.com/patternfly/patternfly/issues describing the gap
93
+
-[ ] Open a RHOAIENG Jira linking the PF issue
94
+
-[ ] Add a tracking comment above the custom style (see template in Check 1)
95
+
```
96
+
97
+
### Severity classification
98
+
99
+
| Severity | Criteria |
100
+
|---|---|
101
+
| Critical | Hardcoded tokenizable values in SCSS or inline styles where PF tokens exist (e.g., colors, spacing, sizing, typography, radii) |
102
+
| Warning | Custom SCSS/inline styles where a PF prop, layout component, or utility class would suffice; missing wrapper where one clearly applies; custom class name that doesn't follow the naming convention |
103
+
| Info | Genuine PF gap — report the gap and recommend the developer open a PF upstream issue and RHOAIENG follow-up (do not create them) |
104
+
105
+
If there are no violations, confirm the files pass and note any well-structured patterns worth preserving.
Copy file name to clipboardExpand all lines: AGENTS.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -114,6 +114,7 @@ Skills provide multi-step workflows. They live in `.claude/skills/`. Read the re
114
114
|**Docs Update**|`skills/docs-update/`| Updating existing docs after code changes |
115
115
|**Upstream Sync Status**|`skills/upstream-sync-status/`| Checking whether a package's upstream copy is up to date (pass package name or be prompted) |
116
116
|**Upstream Sync**|`skills/upstream-sync/`| Syncing upstream changes for a package and opening a PR (pass package name or be prompted) |
117
+
|**Style Review**|`skills/style-review/`| Reviewing code for PF priority-order compliance, wrapper component usage, and class naming conventions per `css-patternfly.md`|
117
118
|**Jira Triage**|`skills/jira-triage/`| Fetching Jira issues by filter criteria, running full triage on New issues (orchestrates all analysis skills), defining triage operations, and bulk-applying them |
118
119
|**Jira Validate Priority/Severity**|`skills/jira-validate-priority-severity/`| Analyzing bugs for missing or incorrect severity and priority fields |
119
120
|**Jira Validate Description**|`skills/jira-validate-description/`| Validating issue descriptions for completeness per type, requesting missing information from reporters |
0 commit comments