website-feature: add page size menu to catalogs and Learning Hub

[jhauga]

Pull Request Checklist

• I have read and followed the CONTRIBUTING.md guidelines.
• I have read and followed the Guidance for submissions involving paid services.
• My contribution adds a new instruction, prompt, agent, skill, workflow, or canvas extension file in the correct directory.
• The file follows the required naming convention.
• The content is clearly structured and follows the example format.
• I have tested my instructions, prompt, agent, skill, workflow, or canvas extension with GitHub Copilot.
  • • Website feature
• I have run npm start and verified that README.md is up to date.
• I am targeting the main branch for this pull request.

---

Description

Demo

Note

Minified version of site. Enough to get the gist across

• Compressed site build of feature results (ctrl + click) at support repo.
• ctrl + click agent resource, then select from Resource page size to get directly to a demo

Add a page size menu to the catalog pages and the Learning Hub

Adds a "Resource page size" menu next to "Sort by" on the Agents, Extensions, Instructions, Plugins, and Skills catalogs and on the Learning Hub's Articles list. Readers can show 6 (the default and the previous fixed size), 25, 50, or 100 items per page. Changing the size returns to page 1, the same as changing the sort order or a filter.

• New CatalogResourceSizeControl reuses the sort menu's markup and classes, so the two menus match on every page. A 1px rule separates them and is hidden below 48rem.
• The trigger's accessible name includes the current size (for example "Skills per page: 6").
• The fixed page sizes in the six components are replaced by state.
• On the Learning Hub, the sort and page size menus are grouped in the Articles header. On phones that page keeps its existing design, where the Filters button replaces the menus.

Testing

• npm run --prefix website build passes (1,248 pages).
• npm run --prefix website a11y: 24 routes, dark and light, 0 violations.
• Playwright checks on all six pages (150 of 150): default size, card and page counts for each size, return to page 1, size kept across sort and filter changes, unchanged toolbar and header heights, and phone layouts.
• tsc --noEmit shows no new errors (the 26 existing ones are unchanged).

---

Type of Contribution

• New instruction file.
• New prompt file.
• New agent file.
• New plugin.
• New skill file.
• New agentic workflow.
• New canvas extension.
• Update to existing instruction, prompt, agent, plugin, skill, workflow, or canvas extension.
• Other (please specify): Website feature request

---

By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.

[github-actions]

🚦 Submission status: 👀 Ready for review

Risk tier: merge-risk:medium — New or substantially changed resource without privileged execution
Required to merge: passing submission-gate checks plus 1 approval from reviewers with write access.

Why this tier

• Adds 1 file(s), e.g. website/src/components/brand/CatalogResourceSizeControl.tsx
• Changes 623 lines (low-risk limit is 40)

Automated checks

Check	Status	Details
Line endings	✅ Passed	Passed · logs
Spelling	✅ Passed	Passed · logs
Contributor reputation	✅ Passed	Passed · logs
Duplicate resource scan	✅ Passed	Passed · logs
PR quality signal	⏭️ Skipped	Skipped by its workflow · logs

Review

• Approvals: 0/1
• Assigned reviewer: not assigned yet — comment /request-review to ask for one
• Review target date: not set
• Still needed: 1 more approval(s)
• No staffed reviewer pool owns these files yet; any reviewer with write access counts as the domain reviewer.

Commands

Command	Who	What it does
/rerun-checks	PR author, maintainers	Re-runs failed or incomplete checks and re-evaluates this gate
/request-review	PR author, maintainers	Asks the review rotation to assign a reviewer (adds needs-reviewer)

_{Updated for 14a6bb7 · gate run · This comment is maintained automatically — see submission gate docs.}

[Copilot]

🟡 Changes recommended

The shared menu has unresolved accessibility issues, and larger-page navigation needs scroll and focus handling.

3 open findings

• Trigger accessible name omits the visible resource page size label · New
• Popup menu lacks keyboard navigation and focus management · New
• Pagination does not return focus or scroll to the new page start · New

What changed in this PR

Adds configurable page sizes to the website’s resource catalogs and Learning Hub articles, preserving the six-item default.

Changes:

• Adds a shared menu offering 6, 25, 50, or 100 items.
• Updates pagination across six views and resets to page 1 when size changes.
• Adds matching separators and responsive Learning Hub controls.

File	Description
website/​src/​components/​brand/​styles/​skills.module.css	Adds responsive toolbar divider.
website/​src/​components/​brand/​styles/​plugins.module.css	Adds responsive toolbar divider.
website/​src/​components/​brand/​styles/​learning-hub-copilot-app.module.css	Groups menus and adjusts mobile visibility.
website/​src/​components/​brand/​styles/​instructions.module.css	Adds responsive toolbar divider.
website/​src/​components/​brand/​styles/​extensions.module.css	Adds responsive toolbar divider.
website/​src/​components/​brand/​styles/​agents.module.css	Adds responsive toolbar divider.
website/​src/​components/​brand/​SkillsCatalog.tsx	Integrates selectable page sizes.
website/​src/​components/​brand/​PluginsCatalog.tsx	Integrates selectable page sizes.
website/​src/​components/​brand/​LearningHubIndex.tsx	Adds article page-size selection.
website/​src/​components/​brand/​InstructionsCatalog.tsx	Integrates selectable page sizes.
website/​src/​components/​brand/​ExtensionsCatalog.tsx	Integrates selectable page sizes.
website/​src/​components/​brand/​CatalogResourceSizeControl.tsx	Defines shared menu, options, and default.
website/​src/​components/​brand/​AgentsCatalog.tsx	Integrates selectable page sizes.

🧠 Review effort: Max

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🔵 Needs a closer look

Menu, focus, and responsive interactions across six pages still warrant human verification.

1 open finding

• Add focus and scroll handling after pagination · New

3 resolved since last review

• Pagination does not return focus or scroll to the new page start
• Popup menu lacks keyboard navigation and focus management
• Trigger accessible name omits the visible resource page size label

🧠 Review effort: Max

[Copilot]

🔵 Needs a closer look

Pagination reset effects move keyboard focus away from active filters and page-size controls.

0 open findings

1 resolved since last review

• Add focus and scroll handling after pagination

Previously missed (1)

In code that hasn't changed since last review

Catalog resets steal focus from active filter, sort, or size controls

website/​src/​components/​brand/​SkillsCatalog.tsx:193

On page 2 or later, filter, sort, and size changes reset currentPage to 1, so this effect scrolls to #catalog and takes focus away from the control being used. It also overrides the size menu's closeMenu(true) focus restoration. InstructionsCatalog.tsx:210–220 introduces the same regression; the existing effects in Agents, Extensions, and Plugins also override focus for the new size menus.

Move the scroll/focus operation into each catalog's Pagination.onPageChange, following LearningHubIndex.tsx:875–890, and remove the unused previousPage refs and effect imports where applicable. Filter, sort, and size resets should leave focus on the active control.

🧠 Review effort: Max

[Copilot]

🔵 Needs a closer look

The custom menu interactions and pagination focus changes across six views warrant human keyboard and visual validation.

0 open findings

Previously missed (1)

In code that hasn't changed since last review

Align keyboard and dismissal behavior across toolbar menus

website/​src/​components/​brand/​CatalogResourceSizeControl.tsx:145

Recommended (non-blocking): only the page-size menu implements these keyboard and dismissal handlers. The adjacent sort menus in CatalogSortControl.tsx:47-65 and LearningHubIndex.tsx:693-714 still use plain <details>. Opening Sort by and then Resource page size leaves both overlays open; Escape closes only the page-size menu, and arrow-key navigation differs between the two visually matching controls. Share the keyboard and dismissal behavior across the page-size control and both sort implementations so the toolbar menus behave consistently.

🧠 Review effort: Max