Skip to content

feat(instantsearch): add React search results page pattern (2/4)#23

Open
vascobettencourt wants to merge 1 commit into
feat/instantsearch-source-of-truthfrom
feat/instantsearch-search-results-page
Open

feat(instantsearch): add React search results page pattern (2/4)#23
vascobettencourt wants to merge 1 commit into
feat/instantsearch-source-of-truthfrom
feat/instantsearch-search-results-page

Conversation

@vascobettencourt
Copy link
Copy Markdown
Member

@vascobettencourt vascobettencourt commented May 18, 2026

What does this skill do?

Adds the highest-value new pattern to the InstantSearch skill: a search results page reference for React (covers faceted search, sort, pagination as one bundle, since the same widget tree underlies all three). The reference scaffolds the canonical widget tree and points at .d.ts files / live docs for prop-level details rather than baking them in (those go stale).

This is part 2 of 4. Stacks on #22 (PR 1), so review PR 1 first, then this.

What's in this PR

  • New references/react/search-results-page/features.md — discovery (route, schema, refinement attributes, sort replicas), the canonical widget tree (<SearchBox> + <Configure> + <Hits> + <Pagination> + <Stats> + <NoResultsBoundary>), refinements catalog (<RefinementList>, <HierarchicalMenu>, <RangeInput>, <ToggleRefinement>, <CurrentRefinements>, <ClearRefinements>), sort with replicas, multi-index guidance, features checklist.
  • New references/react/search-results-page/styling.mdais-* class hierarchy for results layout (refinements panel, hits grid, pagination, mobile drawer pattern).
  • New references/react/search-results-page/anti-patterns.md — pattern-specific anti-patterns (rebuilding pagination, missing no-results boundary, refinements outside their target <Index>, etc.).
  • SKILL.md: adds the search-results-page row to the patterns table.
  • evals/evals.json: adds eval 6 (full results page on App Router) and eval 7 (searchable refinement list + active-filter chips).

Stacking note

This PR's diff against main looks larger because it includes PR 1's commit until PR 1 merges. After PR 1 merges, please rebase this onto main (or it'll auto-rebase via the merge queue). Reviewing only the second commit (feat(instantsearch): add React search results page pattern) is sufficient.

Checklist

  • python3 scripts/validate_skills.py . passes (31/31)
  • Skill description unchanged (still 602/1024)
  • evals/evals.json has 8 prompts after this PR
  • Skill is self-contained — only intra-skill ../ links
  • Registered in marketplace.json — N/A
  • Goes in skills/

Behavioral test

Evals 6 and 7 were exercised via fresh subagents. Eval 6 (full results page on App Router) hit 11/11 expectations: <InstantSearchNext> at the layout level, routing={true} and insights={true}, <Configure> with the three required keys, <RefinementList> for brand and <HierarchicalMenu> for category, <SortBy> with replicas, <Pagination> (no <InfiniteHits>), NoResultsBoundary from useInstantSearch().results.nbHits, <Highlight> on hit text, .d.ts provenance for non-baked props, no getServerState on App Router. Eval 7 hit 6/6: searchable refinement list with type-sourced props, <CurrentRefinements> for chips, no rebuild-via-hooks.

Adds the canonical widget tree (SearchBox, Configure, Hits, Pagination,
Stats, NoResultsBoundary), the refinements catalog (RefinementList,
HierarchicalMenu, RangeInput, ToggleRefinement, CurrentRefinements,
ClearRefinements), sort via SortBy with replicas, and multi-index
guidance. The pattern reference points reviewers at types and live docs
for prop-level details rather than baking them in. Adds evals 6 and 7
covering the full results page and a searchable refinement list with
active-filter chips.

Stacks on feat/instantsearch-source-of-truth.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant