Skip to content

Commit 5186cda

Browse files
committed
docs(create-element): add README phase to element skills
Add Phase 8 (README) to create-element and update-element skills, instructing agents to produce a divergences-from-React document for each element. Three tables: not implemented, changed API, and added. Includes accuracy rules to prevent false claims about shadow DOM. References elements/pf-v6-tooltip/README.md as example. Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 2914145 commit 5186cda

2 files changed

Lines changed: 74 additions & 2 deletions

File tree

.claude/skills/create-element/SKILL.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,43 @@ Write all tests from scratch:
274274

275275
See `.claude/skills/review-api/SKILL.md` Phase 4 for full test checklist.
276276

277-
### Phase 8: Audit
277+
### Phase 8: Write README
278+
279+
Create `elements/pf-v6-{name}/README.md` documenting divergences from
280+
the React component API. Structure:
281+
282+
1. **Title and summary** -- element tag, one-line description
283+
2. **Usage** -- 2-3 HTML snippets showing common patterns
284+
3. **Divergences from React `{Name}`** -- three tables:
285+
286+
#### "Not implemented" table (2 columns: React prop | Notes)
287+
React props with no web component equivalent and no workaround.
288+
Only truly absent features belong here.
289+
290+
#### "Changed API" table (3 columns: React prop | Web component | Difference)
291+
React props that have a web component equivalent but with different API shape.
292+
Include props where:
293+
- Name changed (e.g. `enableFlip` -> `no-flip`)
294+
- Type changed (e.g. boolean -> enum, prop -> CSS custom property)
295+
- Mechanism changed (e.g. callback -> DOM event, declarative -> imperative)
296+
- Not configurable but has a fixed internal value (note "Not supported" or
297+
"Hardcoded to X")
298+
299+
**Omit** props that map 1:1 as camelCase properties with dash-case attributes
300+
and identical semantics (e.g. React `entryDelay` -> attribute `entry-delay`).
301+
These are standard web component conventions, not divergences.
302+
303+
#### "Added" table (2 columns: Web component API | Notes)
304+
Web-component-only APIs not present in React (events, methods, slots, CSS
305+
custom properties).
306+
307+
**Accuracy rule:** verify each claim against the actual CSS and TS source.
308+
Don't claim CSS properties on the host affect shadow DOM internals. Check
309+
whether values are actually configurable or hardcoded.
310+
311+
See `elements/pf-v6-tooltip/README.md` for a reference example.
312+
313+
### Phase 9: Audit
278314

279315
Prompt the user to activate /review-api, /review-demos, and /review-a11y
280316

.claude/skills/update-element/SKILL.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,43 @@ Update existing tests -- don't rewrite from scratch:
255255

256256
See `.claude/skills/review-api/SKILL.md` Phase 4 for full test checklist.
257257

258-
### Phase 8: Audit
258+
### Phase 8: Write README
259+
260+
Create `elements/pf-v6-{name}/README.md` documenting divergences from
261+
the React component API. Structure:
262+
263+
1. **Title and summary** -- element tag, one-line description
264+
2. **Usage** -- 2-3 HTML snippets showing common patterns
265+
3. **Divergences from React `{Name}`** -- three tables:
266+
267+
#### "Not implemented" table (2 columns: React prop | Notes)
268+
React props with no web component equivalent and no workaround.
269+
Only truly absent features belong here.
270+
271+
#### "Changed API" table (3 columns: React prop | Web component | Difference)
272+
React props that have a web component equivalent but with different API shape.
273+
Include props where:
274+
- Name changed (e.g. `enableFlip` -> `no-flip`)
275+
- Type changed (e.g. boolean -> enum, prop -> CSS custom property)
276+
- Mechanism changed (e.g. callback -> DOM event, declarative -> imperative)
277+
- Not configurable but has a fixed internal value (note "Not supported" or
278+
"Hardcoded to X")
279+
280+
**Omit** props that map 1:1 as camelCase properties with dash-case attributes
281+
and identical semantics (e.g. React `entryDelay` -> attribute `entry-delay`).
282+
These are standard web component conventions, not divergences.
283+
284+
#### "Added" table (2 columns: Web component API | Notes)
285+
Web-component-only APIs not present in React (events, methods, slots, CSS
286+
custom properties).
287+
288+
**Accuracy rule:** verify each claim against the actual CSS and TS source.
289+
Don't claim CSS properties on the host affect shadow DOM internals. Check
290+
whether values are actually configurable or hardcoded.
291+
292+
See `elements/pf-v6-tooltip/README.md` for a reference example.
293+
294+
### Phase 9: Audit
259295

260296
Prompt the user to activate /review-api, /review-demos, and /review-a11y
261297

0 commit comments

Comments
 (0)