docs(skills): update integration skill #630#631
Conversation
Bring the consumer-facing `tedi-react` skill back in sync with the current library exports and tighten the parts that consumers trip on most often. - Add missing TEDI-Ready entries: Toggle, InputGroup, Tabs, Pagination, StatusIndicator, EmptyState, plus a Utility Components sub-section covering Affix, Ellipsis, Print, ScrollFade, ScrollVisibility, StretchContent, HashTrigger and the form primitives. - Mark Community Toggle, Tabs, ChoiceGroup as deprecated and flag the legacy Tabs API divergence from TEDI-Ready Tabs. - Fix the ChoiceGroup example in forms.md: `variant` accepts `'default' | 'card'`, not `'segmented'`; only `layout="segmented"` is valid. - Rewrite SKILL.md description with concrete trigger phrases and an explicit guard against confusion with the contributor skill. - Wire AccessibilityProvider into the setup snippet to match the prose, and note PrintingProvider as an inner wrapper. - Add a "Common Pitfalls" section covering the wrong-import-path, TEDI-Ready vs Community, missing `id`, hardcoded colors, var() fallbacks, dual-mode form controls, and the useBreakpointProps test mock.
Point consumers of the `tedi-react` skill at the public canonical references so they can verify props and discover components that post-date the bundled snapshot. - Link the GitHub repo, the live Storybook (with prop tables), the cross-framework wiki, npm packages (`react`, `core`, `angular`), CHANGELOG and Issues. - Include the file-path hint for fetching a component's TSX directly — its JSDoc'd `interface ...Props` is the canonical spec when the bundled `references/*.md` drift.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR updates the TEDI-React integration skill documentation across three files, adding guidance for setup and common pitfalls, expanding component API references with TEDI-Ready entries, deprecating older Community components, and refining form usage examples with prop-based configuration. ChangesIntegration Guidance and Component Reference
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
skills/tedi-react/references/components.md (3)
383-402: ⚡ Quick winConsider demonstrating both controlled and uncontrolled patterns.
The example shows only controlled usage (
page={page}), but the props document bothpageanddefaultPage. A note about uncontrolled usage would make the documentation more complete.📚 Add uncontrolled example note
After or within the example, you could note:
For uncontrolled state, use `defaultPage`: ```tsx <Pagination pageCount={20} defaultPage={1} onPageChange={handlePageChange} /></details> As per coding guidelines, "if a form control is shown, demonstrate/expect both controlled and uncontrolled behavior" from `.claude/skills/contributing/references/best-practices.md`. <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@skills/tedi-react/references/components.mdaround lines 383 - 402, The doc
currently only demonstrates controlled usage of the Pagination component; add a
short uncontrolled example and note showing use of defaultPage and that
onPageChange still receives updates (reference Pagination, PaginationProps,
page, defaultPage, onPageChange); update the example block to include a second
snippet or a brief sentence like “For uncontrolled state use defaultPage” and
show so readers see both patterns.</details> --- `364-381`: _⚡ Quick win_ **Consider demonstrating both controlled and uncontrolled patterns.** The example shows only uncontrolled usage (`defaultValue="overview"`), but the props correctly document both `value` and `defaultValue`. Showing both patterns helps developers understand when to use each approach. <details> <summary>📚 Add a note about controlled usage</summary> After the current example, you could add: ```markdown For controlled state, use `value` and `onChange`: ```tsx <Tabs value={activeTab} onChange={setActiveTab}> {/* ... */} </Tabs></details> As per coding guidelines, "if a form control is shown, demonstrate/expect both controlled and uncontrolled behavior" from `.claude/skills/contributing/references/best-practices.md`. <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@skills/tedi-react/references/components.mdaround lines 364 - 381, The
example for Tabs only shows uncontrolled usage (defaultValue) but the props
include both value and defaultValue; add a short controlled-example using Tabs
with value and onChange (e.g., show using value={activeTab}
onChange={setActiveTab}) immediately after the existing example and add a
one-line note mentioning when to use controlled vs uncontrolled; reference the
Tabs component and subcomponents (Tabs.List, Tabs.Trigger, Tabs.Content) and the
TabsProps fields (value, defaultValue, onChange) so readers can map the example
to the API.</details> --- `268-281`: _⚡ Quick win_ **Consider demonstrating both controlled and uncontrolled patterns.** The example shows only controlled usage (`checked={on}`), but the props correctly document both `checked` and `defaultChecked`. Per coding guidelines, form control examples should demonstrate both patterns to help developers understand their options. <details> <summary>📚 Enhanced example showing both patterns</summary> ```diff ```tsx +// Controlled <Toggle id="notifications" label="Email me" checked={on} onChange={setOn} /> + +// Uncontrolled +<Toggle id="marketing" label="Marketing emails" defaultChecked={true} /></details> As per coding guidelines, "if a form control is shown, demonstrate/expect both controlled and uncontrolled behavior" from `.claude/skills/contributing/references/best-practices.md`. <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@skills/tedi-react/references/components.mdaround lines 268 - 281, The
Toggle docs currently only show the controlled pattern (using Toggle with
checked and onChange); add a parallel uncontrolled example to demonstrate
defaultChecked usage so both patterns from ToggleProps are visible—update the
example block to include a controlled example (Toggle id="notifications"
label="Email me" checked={on} onChange={setOn}) and an uncontrolled example
(e.g., Toggle id="marketing" label="Marketing emails" defaultChecked={true}) and
ensure the props list still references checked and defaultChecked so readers see
both options.</details> </blockquote></details> <details> <summary>skills/tedi-react/references/forms.md (1)</summary><blockquote> `143-152`: _⚡ Quick win_ **Add uncontrolled examples for ChoiceGroup with segmented and card layouts.** The examples at lines 143–152 (segmented layout) and lines 154–164 (card variant) only demonstrate controlled mode with `value` and `onChange`. Line 31 explicitly requires: *"Every form component must accept both `value` (controlled) and `defaultValue` (uncontrolled)"*, and the TextField examples (lines 22–29) follow this pattern. Add uncontrolled variants showing `defaultValue` usage for both new examples to maintain consistency with the stated rule and established documentation pattern. <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@skills/tedi-react/references/forms.mdaround lines 143 - 152, The segmented
and card ChoiceGroup examples currently only demonstrate controlled usage with
value={view} and onChange={setView}; add uncontrolled variants that use
defaultValue instead (e.g., defaultValue="list" or another option from
viewOptions) to follow the "value/defaultValue" pattern; update the two examples
that render <ChoiceGroup layout="segmented" ...> and <ChoiceGroup variant="card"
...> to include additional snippets showing defaultValue usage (remove the
controlled value prop or replace it with defaultValue and omit setView) so the
documentation demonstrates both controlled (ChoiceGroup with value/onChange) and
uncontrolled (ChoiceGroup with defaultValue) modes for the ChoiceGroup
component.</details> </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>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@skills/tedi-react/references/forms.md:
- Around line 154-164: Add an uncontrolled example of the card-style
ChoiceGroup: duplicate the existing card example that currently uses ChoiceGroup
with props id/name/label/variant/layout/items/value={plan}/onChange={setPlan}
and provide an uncontrolled variant that uses defaultValue (e.g.,
defaultValue="basic") instead of value and onChange so the component manages its
own state; reference ChoiceGroup, planOptions, and remove
value={plan}/onChange={setPlan} in the uncontrolled snippet.
Nitpick comments:
In@skills/tedi-react/references/components.md:
- Around line 383-402: The doc currently only demonstrates controlled usage of
the Pagination component; add a short uncontrolled example and note showing use
of defaultPage and that onPageChange still receives updates (reference
Pagination, PaginationProps, page, defaultPage, onPageChange); update the
example block to include a second snippet or a brief sentence like “For
uncontrolled state use defaultPage” and show so readers see both patterns.- Around line 364-381: The example for Tabs only shows uncontrolled usage
(defaultValue) but the props include both value and defaultValue; add a short
controlled-example using Tabs with value and onChange (e.g., show using
value={activeTab} onChange={setActiveTab}) immediately after the existing
example and add a one-line note mentioning when to use controlled vs
uncontrolled; reference the Tabs component and subcomponents (Tabs.List,
Tabs.Trigger, Tabs.Content) and the TabsProps fields (value, defaultValue,
onChange) so readers can map the example to the API.- Around line 268-281: The Toggle docs currently only show the controlled
pattern (using Toggle with checked and onChange); add a parallel uncontrolled
example to demonstrate defaultChecked usage so both patterns from ToggleProps
are visible—update the example block to include a controlled example (Toggle
id="notifications" label="Email me" checked={on} onChange={setOn}) and an
uncontrolled example (e.g., Toggle id="marketing" label="Marketing emails"
defaultChecked={true}) and ensure the props list still references checked and
defaultChecked so readers see both options.In
@skills/tedi-react/references/forms.md:
- Around line 143-152: The segmented and card ChoiceGroup examples currently
only demonstrate controlled usage with value={view} and onChange={setView}; add
uncontrolled variants that use defaultValue instead (e.g., defaultValue="list"
or another option from viewOptions) to follow the "value/defaultValue" pattern;
update the two examples that render <ChoiceGroup layout="segmented" ...> and
<ChoiceGroup variant="card" ...> to include additional snippets showing
defaultValue usage (remove the controlled value prop or replace it with
defaultValue and omit setView) so the documentation demonstrates both controlled
(ChoiceGroup with value/onChange) and uncontrolled (ChoiceGroup with
defaultValue) modes for the ChoiceGroup component.</details> <details> <summary>🪄 Autofix (Beta)</summary> Fix all unresolved CodeRabbit comments on this PR: - [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended) - [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: Path: .coderabbit.yaml **Review profile**: CHILL **Plan**: Pro **Run ID**: `ae6a0066-14c9-4b50-a8e2-0f66bd0df8ee` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 7285c2a3d1f784ac3b2545b8d9289afdd5ee14cf and 81a1dbeeae3488bca20f4aa1f423df9fab35d0c2. </details> <details> <summary>📒 Files selected for processing (3)</summary> * `skills/tedi-react/SKILL.md` * `skills/tedi-react/references/components.md` * `skills/tedi-react/references/forms.md` </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
| // Card-style choices (each item rendered as a selectable card) | ||
| <ChoiceGroup | ||
| id="plan" | ||
| name="plan" | ||
| label="Plan" | ||
| variant="card" | ||
| layout="separated" | ||
| items={planOptions} | ||
| value={plan} | ||
| onChange={setPlan} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify ChoiceGroup supports variant="card" and layout="separated", and check if both props should be used together
# Search for ChoiceGroup prop type definitions
ast-grep --pattern $'interface $PROPS {
$$$
variant$_: $_
$$$
layout$_: $_
$$$
}'
# Search for variant and layout prop usage patterns in ChoiceGroup
rg -nP --type=tsx --type=ts 'variant.*card|layout.*separated' -C5 -g '*ChoiceGroup*'
# Check if there are examples or tests showing variant + layout together
rg -nP --type=tsx --type=ts 'variant=.*card.*layout=|layout=.*separated.*variant=' -C3Repository: TEDI-Design-System/react
Length of output: 124
🏁 Script executed:
#!/bin/bash
# Find ChoiceGroup component files
find . -type f -name "*hoice*roup*" | head -20Repository: TEDI-Design-System/react
Length of output: 1333
🏁 Script executed:
#!/bin/bash
# Search for ChoiceGroup component definition in .ts, .tsx files using proper syntax
rg "export.*ChoiceGroup|interface.*ChoiceGroup.*Props|type.*ChoiceGroup.*Props" -t ts -A 10 | head -50Repository: TEDI-Design-System/react
Length of output: 5173
🏁 Script executed:
#!/bin/bash
# Look for ChoiceGroup implementation and prop definitions
rg "variant.*card|layout.*separated" -t ts -B 2 -A 2 | head -80Repository: TEDI-Design-System/react
Length of output: 8028
🏁 Script executed:
#!/bin/bash
# Check the ChoiceGroup props interface
cat src/tedi/components/form/choice-group/choice-group.types.tsRepository: TEDI-Design-System/react
Length of output: 430
🏁 Script executed:
#!/bin/bash
# Check the ChoiceGroup component implementation - check for value/onChange and defaultValue
head -100 src/tedi/components/form/choice-group/choice-group.tsxRepository: TEDI-Design-System/react
Length of output: 3759
🏁 Script executed:
#!/bin/bash
# Check the coding guidelines and best practices referenced in CLAUDE.md
cat .claude/skills/contributing/references/best-practices.md | grep -A 20 "form control"Repository: TEDI-Design-System/react
Length of output: 647
🏁 Script executed:
#!/bin/bash
# Check the forms.md file to see the segmented example and understand the pattern
head -200 skills/tedi-react/references/forms.md | tail -100Repository: TEDI-Design-System/react
Length of output: 1917
🏁 Script executed:
#!/bin/bash
# Look at the full context around lines 154-164 in forms.md
sed -n '130,180p' skills/tedi-react/references/forms.mdRepository: TEDI-Design-System/react
Length of output: 1053
🏁 Script executed:
#!/bin/bash
# Check the beginning of forms.md for any uncontrolled examples mentioned
head -60 skills/tedi-react/references/forms.mdRepository: TEDI-Design-System/react
Length of output: 1901
🏁 Script executed:
#!/bin/bash
# Look for defaultValue in the entire forms.md file
rg "defaultValue" skills/tedi-react/references/forms.md -B 3 -A 3Repository: TEDI-Design-System/react
Length of output: 376
Add an uncontrolled example for the card-style ChoiceGroup.
This example only demonstrates controlled mode (value + onChange). Per the documented rule (line 31: "Every form component must accept both value (controlled) and defaultValue (uncontrolled)"), include an uncontrolled variant:
// Uncontrolled — component manages state internally
<ChoiceGroup
id="plan"
name="plan"
label="Plan"
variant="card"
layout="separated"
items={planOptions}
defaultValue="basic"
/>🤖 Prompt for 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.
In `@skills/tedi-react/references/forms.md` around lines 154 - 164, Add an
uncontrolled example of the card-style ChoiceGroup: duplicate the existing card
example that currently uses ChoiceGroup with props
id/name/label/variant/layout/items/value={plan}/onChange={setPlan} and provide
an uncontrolled variant that uses defaultValue (e.g., defaultValue="basic")
instead of value and onChange so the component manages its own state; reference
ChoiceGroup, planOptions, and remove value={plan}/onChange={setPlan} in the
uncontrolled snippet.
Add an "AI Agent Skills" section pointing consumers at the bundled `skills/tedi-react/` integration skill. The skill conforms to the skill.sh standard so it works with any modern AI coding agent, not just Claude Code. - Summarize what the skill teaches an agent (import paths, providers, component APIs, theming, common pitfalls, authoritative sources). - Include a tool-agnostic install snippet using `degit` with placeholder paths so consumers substitute their own agent's skills directory. - Note that contributor-facing skills live in the separate TEDI-Design-System/ai-skills repository.
Address three accuracy issues found in review of the tedi-react integration skill and its README pointer. - README: replace the placeholder `degit` install snippet with the canonical `npx skills add TEDI-Design-System/react`. The skills.sh runtime auto-discovers `SKILL.md` files, so no extra flag is needed for our single-skill repo. - SKILL.md (Authoritative Sources): restructure to instruct the agent to resolve the consumer's installed `@TEDI-Design-System/react` version from `package.json` and browse the matching `react-<version>` git tag rather than `main`. Includes a worked example URL set for `17.0.0-rc.8` and a fallback rule for missing tags. Notes that the public Storybook tracks `main` and the installed tag wins on conflict. - HashTrigger reference: prop entry was wrong — fixed `hash` → `id`, added the required `children` and the `scrollOnMatch?: boolean` prop, and corrected `onMatch` to receive the matched id. Added a usage snippet matching the wrapper pattern.
2 participants
Summary by CodeRabbit