recent-data
セッションストレージからの最近のデータ（最近のトピック、リソース、ページなど）の使用方法を指導し、アプリケーションのトップレベルでの初期化方法を提供します。
npx skills add lobehub/lobehub --skill recent-dataBefore / After 効果比較
1 组`recent-data` スキルがない場合、ユーザーは最近アクセスしたトピック、リソース、またはページを振り返ったり再利用したりする必要がある際、ブラウジング履歴やブックマークを手動で検索したり、アプリケーション内で段階的にナビゲートしたりすることがよくあります。これは時間がかかるだけでなく、情報量が多い場合には迷子になりやすく、作業効率とユーザーエクスペリエンスを低下させます。
`recent-data` スキルを使用すると、システムは最近アクセスしたトピック、リソース、およびページを自動的に記録し、迅速なアクセスを提供できます。ユーザーはワンクリックで必要な情報を取得でき、繰り返し検索したりナビゲートしたりする必要がなくなり、情報検索の効率とワークフローの流動性が大幅に向上します。
description SKILL.md
recent-data
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
Weekly Installs303Repositorylobehub/lobehubGitHub Stars73.8KFirst SeenJan 27, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled oncodex259opencode257gemini-cli256github-copilot242claude-code226cursor218
forumユーザーレビュー (0)
レビューを書く
レビューなし
統計データ
ユーザー評価
この Skill を評価