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.
|
Warning Review limit reached
Next review available in: 36 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR refreshes TEDI React integration documentation with version-pinned source guidance, provider setup updates, component discovery instructions, revised form examples and handler conventions, theming and token guidance, common pitfalls, and README installation instructions for the integration skill. ChangesIntegration Documentation
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 -->
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.
…-skill # Conflicts: # skills/tedi-react/references/components.md
|
Suurem muutus skilli loogikas (välja tulnud arutlusest @tobre6 ): skillist on eemaldatud konkreetsed sisse kirjutatud viited komponentidele (components.md). Selmet on "Authorative sources" nimekiri ja components.md sees viited vastava versiooni komponentidele githubis. Niiviisi kaob ära vajadus skilli components.md faili pidevale kaasajastamisele ning skill oskab vastavalt kasutusel olevale TEDI versioonile õigeid komponente otsida. Skilli osadeks jäävad konseptuaalsed põhimõtted ja üldised kasutusjuhised. Aitab kaasa ka konteksti kontrolli all hoidmisele (seni loeti kõik ~1000 rida components.md sisse, nüüd otsitakse ainult vajalikke asju). |
There was a problem hiding this comment.
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 `@skills/tedi-react/references/forms.md`:
- Line 411: Update the “Choice inputs” documentation bullet to separate Checkbox
and Radio from ChoiceGroup: retain the `(value, checked)` onChange signature for
Checkbox/Radio, and document ChoiceGroup as accepting a parsed ChoiceGroupValue
(`string | string[] | null`).
In `@skills/tedi-react/references/theming.md`:
- Around line 31-33: Update the ThemeProvider persistence description in the
theming documentation to state that themes are stored in both localStorage and
document.cookie, with localStorage read before the cookie. Keep the existing
guidance about verifying theme names and the cookie name against authoritative
sources.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 57a7b5eb-110e-4562-b6e4-3abd462f43ca
📒 Files selected for processing (4)
skills/tedi-react/SKILL.mdskills/tedi-react/references/components.mdskills/tedi-react/references/forms.mdskills/tedi-react/references/theming.md
🚧 Files skipped from review as they are similar to previous changes (1)
- skills/tedi-react/SKILL.md
2 participants
Summary by CodeRabbit
helperusage and parsed value/handler expectations).