ReddRadar
Agent skill
recent-data
Guide for using Recent Data (topics, resources, pages). Use when working with recently accessed items, implementing recent lists, or accessing session store recent data. Triggers on recent data usage or implementation tasks.
Install this agent skill to your Project
npx add-skill https://github.com/lobehub/lobehub/tree/canary/.agents/skills/recent-data
SKILL.md
Recent Data Usage Guide
Recent data (recentTopics, recentResources, recentPages) is stored in session store.
Initialization
In app top-level (e.g., RecentHydration.tsx):
import { useInitRecentTopic } from '@/hooks/useInitRecentTopic';
import { useInitRecentResource } from '@/hooks/useInitRecentResource';
import { useInitRecentPage } from '@/hooks/useInitRecentPage';
const App = () => {
useInitRecentTopic();
useInitRecentResource();
useInitRecentPage();
return <YourComponents />;
};
Usage
Method 1: Read from Store (Recommended)
import { useSessionStore } from '@/store/session';
import { recentSelectors } from '@/store/session/selectors';
const Component = () => {
const recentTopics = useSessionStore(recentSelectors.recentTopics);
const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
if (!isInit) return <div>Loading...</div>;
return (
<div>
{recentTopics.map((topic) => (
<div key={topic.id}>{topic.title}</div>
))}
</div>
);
};
Method 2: Use Hook Return (Single component)
const { data: recentTopics, isLoading } = useInitRecentTopic();
Available Selectors
Recent Topics
const recentTopics = useSessionStore(recentSelectors.recentTopics);
// Type: RecentTopic[]
const isInit = useSessionStore(recentSelectors.isRecentTopicsInit);
// Type: boolean
RecentTopic type:
interface RecentTopic {
agent: {
avatar: string | null;
backgroundColor: string | null;
id: string;
title: string | null;
} | null;
id: string;
title: string | null;
updatedAt: Date;
}
Recent Resources
const recentResources = useSessionStore(recentSelectors.recentResources);
// Type: FileListItem[]
const isInit = useSessionStore(recentSelectors.isRecentResourcesInit);
Recent Pages
const recentPages = useSessionStore(recentSelectors.recentPages);
const isInit = useSessionStore(recentSelectors.isRecentPagesInit);
Features
- Auto login detection: Only loads when user is logged in
- Data caching: Stored in store, no repeated loading
- Auto refresh: SWR refreshes on focus (5-minute interval)
- Type safe: Full TypeScript types
Best Practices
- Initialize all recent data at app top-level
- Use selectors to read from store
- For multi-component use, prefer Method 1
- Use selectors for render optimization
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
lobehub/lobehub
task
lobehub/lobehub
i18n
Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
lobehub/lobehub
data-fetching
Data fetching architecture guide using Service layer + Zustand Store + SWR. Use when implementing data fetching, creating services, working with store hooks, or migrating from useEffect. Triggers on data loading, API calls, service creation, or store data fetching tasks.
lobehub/lobehub
hotkey
Guide for adding keyboard shortcuts. Use when implementing new hotkeys, registering shortcuts, or working with keyboard interactions. Triggers on hotkey implementation or keyboard shortcut tasks.
lobehub/lobehub
debug
Debug package usage guide. Use when adding debug logging, understanding log namespaces, or implementing debugging features. Triggers on debug logging requests or logging implementation.
lobehub/lobehub
trpc-router
TRPC router development guide. Use when creating or modifying TRPC routers (src/server/routers/**), adding procedures, or working with server-side API endpoints. Triggers on TRPC router creation, procedure implementation, or API endpoint tasks.
Didn't find tool you were looking for?