expand-toggle-without-refetch

Imported from martin-orona/paystub-parser-agent-built (.squad/skills/expand-toggle-without-refetch/SKILL.md). Install upstream with npx skills add martin-orona/paystub-parser-agent-built --skill expand-toggle-without-refetch. Copyright stays with the author.

Context

Use this when a page has already loaded a collection (rows, cards, accordions) and a user action only expands/collapses details for one item.

Patterns

• Cache the loaded collection in page/component state after the initial fetch.
• On expand/collapse, re-render from that cached collection; only fetch the detail payload needed for the expanded item.
• Add an E2E regression that fails the parent-collection endpoint during expand and proves the UI still opens the details pane without showing a global load error.

Examples

• apps/ui-vanilla/src/pages/rule-sets.ts now stores ruleSetsList locally and uses it during toggleExpandRuleSet().
• apps/ui-tests/tests/rule-sets.spec.ts routes GET /api/rule-sets to 500 after initial load and asserts expansion still succeeds.

Anti-Patterns

• Re-fetching the full parent collection on every expand/collapse.
• Showing a global page-load error for failures caused by an unnecessary refresh.