recent-data_skill

Overview

This skill guides developers on using Recent Data (recentTopics, recentResources, recentPages) stored in the session store. It explains initialization, recommended read patterns, available selectors, and practical tips for efficient rendering and caching. Use it when you need to surface or implement recently accessed items in an app.

How this skill works

Recent data is hydrated at app top-level and kept in the session store, with TypeScript types for safety. Initialization hooks populate recentTopics, recentResources, and recentPages only when the user is logged in, and SWR-style refresh keeps data fresh on focus. Consumers read data via selectors from the session store or use the single-component hook return for ad-hoc usage.

When to use it

• When showing recently opened topics, files, or pages in UI panels or dashboards
• When implementing a session-based recent items list with caching and auto-refresh
• When multiple components need the same recent data to avoid duplicate loads
• When you need type-safe access to recent items in a TypeScript codebase
• When you want auto login detection so recent data only loads for authenticated users

Best practices

• Initialize recentTopics, recentResources, and recentPages at the app top-level (e.g., RecentHydration.tsx)
• Prefer reading from the session store via selectors for multi-component usage to avoid redundant fetches
• Use the hook return (useInitRecentTopic/useInitRecentResource/useInitRecentPage) only for single-component or one-off reads
• Rely on isInit selectors to show loading states and avoid rendering incomplete data
• Leverage selectors to optimize renders and keep components focused on UI, not data fetching

Example use cases

• Display a "Recently Viewed" sidebar that lists recentTopics with avatars and timestamps
• Implement a file picker that surfaces recentResources for quick access
• Show recentPages on a dashboard with fast load because data is cached in the session store
• Hydrate recent data once during app startup to enable instant access across routes
• Use isRecentTopicsInit to render skeletons until data is ready