FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

docs: improve skills based on reviewer feedback and add pf-dev-env skill · patternfly-java/patternfly-java@30e94ab · GitHub

/ patternfly-java Public

Commit 30e94ab

Browse files
hpehl
committed
docs: improve skills based on reviewer feedback and add pf-dev-env skill
Address all findings from skill-reviewer across all 6 project skills: clarify script invocation, condense tool listings, add trigger phrases, add error handling guidance, inline frontmatter formats, and add first-run file creation instructions. Add pf-dev-env skill for managing the local development environment. Add skill interaction documentation with data flow diagram and dependency table to showcase.
1 parent 2fc8089 commit 30e94ab

9 files changed

Lines changed: 397 additions & 43 deletions

File tree

‎.claude/skills/pf-align/SKILL.md‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ description: >-
66
Triggers include /pf-align, "align component", "implement missing variations",
77
"fix PFJ component", "apply pf-compare recommendations", "add missing PFJ
88
variations", "sync with PatternFly", "bring component up to date",
9-
"implement pf-compare action items", or any request to implement changes
10-
identified by a comparison report.
9+
"implement pf-compare action items", "implement comparison findings",
10+
"fix alignment issues", or any request to implement changes identified
11+
by a comparison report.
1112
metadata:
1213
version: "0.1.0"
1314
---
@@ -18,12 +19,7 @@ This skill implements action items from `/pf-compare` reports to align PatternFl
1819

1920
## Tools
2021

21-
### Chrome DevTools MCP (require approval on first use)
22-
23-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__new_page** — Open new browser tabs
24-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__select_page** — Switch between tabs
25-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__evaluate_script** — Run JS in the page context
26-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__close_page** — Close browser tabs
22+
Uses Chrome DevTools MCP tools for browser interaction (new_page, select_page, evaluate_script, close_page). Requires approval on first use.
2723

2824
## Arguments
2925

@@ -33,7 +29,7 @@ This skill implements action items from `/pf-compare` reports to align PatternFl
3329

3430
**Parameters:**
3531
- `<component>` (required) — Component name matching report file (e.g., `button`, `card`, `alert`). **Reject `template`** — it is a blueprint component, not a real UI component.
36-
- `--port <port>` (optional) — Showcase server port (default: 8888)
32+
- `--port <port>` (optional) — Showcase server port (default: 1234)
3733
- `--item <number>` (optional) — Process only the specified action item number (default: process all)
3834

3935
**Examples:**
@@ -48,7 +44,7 @@ This skill implements action items from `/pf-compare` reports to align PatternFl
4844
### Step 1: Pre-flight Checks
4945

5046
**Parse arguments:**
51-
- Extract component name, port (default 8888), item filter
47+
- Extract component name, port (default 1234), item filter
5248
- Validate component name is not empty
5349

5450
**Check report exists:**
@@ -77,7 +73,7 @@ Read docs/pf-compare/<COMPONENT>.md
7773
```yaml
7874
component: button
7975
pf_url: https://www.patternfly.org/components/button
80-
pfj_url: http://localhost:8888/#button
76+
pfj_url: http://localhost:1234/#button
8177
completeness:
8278
missing_in_pfj: [...]
8379
extra_in_pfj: [...]
@@ -188,7 +184,7 @@ Examples:
188184
- "Call to action" → "call-to-action"
189185
- "Stateful toggle" → "stateful-toggle"
190186

191-
**Extract HTML:** Read the script from `references/extract-variation-html.js` and pass it to `evaluate_script` with `args: [<component>, <variation-slug>]`.
187+
**Extract HTML:** Read the script from `references/extract-variation-html.js`. The script is an arrow function `(componentSlug, variationSlug) => { ... }`. Pass the function body to `evaluate_script` using the `function` parameter and provide `args: [<component>, <variation-slug>]` — the Chrome DevTools MCP `evaluate_script` tool invokes the function with the args array as positional arguments.
192188

193189
**Handle extraction failure:**
194190
- If HTML is null → ERROR (HTML extraction failed)
@@ -201,14 +197,14 @@ Examples:
201197

202198
### Step 6: Generate Code
203199

200+
**IMPORTANT: Read `references/code-generation.md` before generating any code.** Find the insertion pattern matching the item type (`add_variation`, `fix_css`, `fix_structure`, `fix_attribute`) and apply the corresponding template. Use the HTML-to-Java translation table from the same file.
201+
204202
**Pre-check implementation:**
205203
- For `add_variation`: Check if snippet ID exists in showcase file
206204
- For `fix_css`: Check if modifier method exists in component class
207205
- For `fix_attribute`: Check if ARIA method exists in component class
208206
- If already implemented → Skip with message
209207

210-
**IMPORTANT: Read `references/code-generation.md` before generating any code.** Find the insertion pattern matching the item type (`add_variation`, `fix_css`, `fix_structure`, `fix_attribute`) and apply the corresponding template. Use the HTML-to-Java translation table from the same file.
211-
212208
**For all types:**
213209
- Preserve existing imports
214210
- Add new imports if needed (e.g., `import static org.patternfly.style.Classes.*`)

‎.claude/skills/pf-compare/SKILL.md‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ description: >-
66
"compare PF component", "check PFJ completeness", "compare button component",
77
"what's missing in the Java card", "gap analysis for alert",
88
"generate comparison report for tabs", "find missing PF variations",
9-
or any request to identify variation coverage gaps or DOM/CSS differences
10-
between PatternFly and PatternFly Java.
9+
"coverage report", "DOM differences", or any request to identify variation
10+
coverage gaps or DOM/CSS differences between PatternFly and PatternFly Java.
1111
metadata:
1212
version: "0.1.0"
1313
---
@@ -18,15 +18,7 @@ Compares a PatternFly (React/HTML) component against its PatternFly Java impleme
1818

1919
## Tools
2020

21-
### Chrome DevTools MCP (require approval on first use)
22-
23-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__navigate_page** — Navigate browser tabs
24-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__new_page** — Open new browser tabs
25-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__select_page** — Switch between tabs
26-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__evaluate_script** — Run JS in the page context
27-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__close_page** — Close browser tabs
28-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__list_pages** — List open browser tabs
29-
- **mcp__plugin_chrome-devtools-mcp_chrome-devtools__take_snapshot** — Capture page accessibility snapshots
21+
Uses Chrome DevTools MCP tools for browser interaction (navigate_page, new_page, select_page, evaluate_script, close_page, list_pages, take_snapshot). Requires approval on first use.
3022

3123
## Arguments
3224

@@ -199,7 +191,7 @@ For sample report output, see `examples/button.md` and `examples/card.md`.
199191
## Error Handling
200192

201193
- **Component not found**: If curl returns non-200 for both PFJ URLs, report clearly and suggest checking the component slug or starting the dev server.
202-
- **No variations extracted**: If PF or PFJ returns zero variations/snippets, warn the user that the page structure may have changed and the JS selectors may need updating.
194+
- **No variations extracted**: If PF or PFJ returns zero variations/snippets, warn the user that the page structure may have changed and the JS selectors may need updating. Empty PFJ results are most commonly caused by DOM structure changes in the showcase layout, not by missing components — check `references/extract-pfj-snippets.js` for the expected DOM traversal.
203195
- **Chrome DevTools unavailable**: If MCP tools fail, report the error and suggest ensuring Chrome is running with DevTools MCP connected.
204196
- **Partial data**: If only some comparisons succeed, still produce the report with available data and note which comparisons failed.
205197

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL