feat(FR-1861): Create agent skills for infinity scroll select components #5053
Conversation
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has required the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
There was a problem hiding this comment.
Pull request overview
This PR adds a comprehensive Claude skill for creating Relay-based infinite scroll select components. The skill provides detailed documentation for two implementation patterns: Pattern A (name-based values using usePaginationFragment) and Pattern B (ID-based values using useLazyLoadQuery + useLazyPaginatedQuery).
Changes:
- Added main SKILL.md with activation triggers, decision tree, implementation checklists, and best practices
- Added reference pattern implementations for BAIAdminResourceGroupSelect (Pattern A) and BAIVFolderSelect (Pattern B)
- Added documentation for custom hooks (useLazyPaginatedQuery, useFetchKey, useEventNotStable)
- Added documentation for helper utilities (relay-helpers, mergeFilterValues)
- Added BAISelect base component API documentation
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| .claude/skills/relay-infinite-scroll-select/SKILL.md | Main skill documentation with decision tree, pattern comparison, implementation checklists, and quick reference guide |
| .claude/skills/relay-infinite-scroll-select/references/patterns/BAIVFolderSelect.md | Pattern B reference implementation showing ID-based select with dual query architecture and optimistic updates |
| .claude/skills/relay-infinite-scroll-select/references/patterns/BAIAdminResourceGroupSelect.md | Pattern A reference implementation showing simple name-based select with single fragment |
| .claude/skills/relay-infinite-scroll-select/references/hooks/useLazyPaginatedQuery.md | Documentation for custom hook handling offset-based pagination with automatic reset and deduplication |
| .claude/skills/relay-infinite-scroll-select/references/hooks/useFetchKey.md | Documentation for cache invalidation and refetch mechanism using ISO timestamps |
| .claude/skills/relay-infinite-scroll-select/references/hooks/useEventNotStable.md | Documentation for stable callback reference hook inspired by React's useEffectEvent |
| .claude/skills/relay-infinite-scroll-select/references/helpers/relay-helpers.md | Documentation for Global ID conversion utilities (toGlobalId, toLocalId) and array filtering helpers |
| .claude/skills/relay-infinite-scroll-select/references/helpers/mergeFilterValues.md | Documentation for GraphQL filter composition utility with operator support |
| .claude/skills/relay-infinite-scroll-select/references/base/BAISelect.md | Base component API documentation covering infinite scroll, async search, and custom footer features |
nowgnuesLee
force-pushed
the
feat/create-agent-skills-for-infinity-scroll-select-components
branch
from
2d08ba9 to
38d47d4
Compare
ironAiken2
left a comment
ironAiken2
left a comment
There was a problem hiding this comment.
Should the skill files be in the webui directory? Shouldn't they be in the bui directory?
We’re not managing Claude on a per-project basis. We manage it at the repository level, so we put it in the |
nowgnuesLee
force-pushed
the
feat/create-agent-skills-for-infinity-scroll-select-components
branch
from
38d47d4 to
f6d1081
Compare
| - [ ] ValueQuery with @skip directive | ||
| - [ ] PaginatedQuery with offset/limit | ||
| - [ ] selectedFilter uses toLocalId() for Global IDs | ||
| - [ ] Both queries have id, row_id, name |
There was a problem hiding this comment.
We prefer to use toLocalId(id) instead of row_id. I'm not sure if it's a good idea for us to guide using row_id
There was a problem hiding this comment.
It’s included to account for cases like vfolder select where both id and row_id are supported. Since we can configure which value to use via a prompt, it shouldn’t matter much.
nowgnuesLee
force-pushed
the
feat/create-agent-skills-for-infinity-scroll-select-components
branch
from
f6d1081 to
5895891
Compare
resolves #4933 (FR-1861)
Relay Infinite Scroll Select Component Creator Skill
Added a new Claude skill that helps create Relay-based infinite scroll select components extending BAISelect. The skill supports two implementation patterns:
usePaginationFragmentwhen the entity's name is both the value and labeluseLazyLoadQuery+useLazyPaginatedQuerywhen the entity's ID is different from the display nameThe skill includes:
This skill will help developers quickly implement standardized select components with infinite scrolling, search, optimistic updates, and multiple selection modes.
Checklist: