diff --git a/.claude/rules/svelte-components.md b/.claude/rules/svelte-components.md
index bc5b6c3e0..ad3bb9fb2 100644
--- a/.claude/rules/svelte-components.md
+++ b/.claude/rules/svelte-components.md
@@ -57,6 +57,8 @@ Use `$props()`, `$state()`, `$derived()`, `$effect()` in all components:
 - **Component**: independent logic, >30 lines, multi-file reuse
 - Define snippets at **top level** (outside tags)
 
+**Context trap:** Snippets capture context at definition site, not render site. Never define a snippet outside a context provider (e.g. `<Tabs>`) and `{@render}` it inside — `TabItem` calls `getContext` on init and throws during HMR when `<Tabs>` is not in its ancestor chain. Place children directly inside the provider.
+
 ## Async/Abort Handling
 
 When user can trigger same action multiple times, use `AbortController`:
diff --git a/src/routes/problems/+page.svelte b/src/routes/problems/+page.svelte
index 504e6f13d..ca943f540 100644
--- a/src/routes/problems/+page.svelte
+++ b/src/routes/problems/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-
   import { Tabs } from 'flowbite-svelte';
 
   import type { TaskResults } from '$lib/types/task';
@@ -43,30 +41,30 @@
     ulClass="flex flex-wrap md:flex-nowrap md:gap-2 rtl:space-x-reverse items-start"
   >
     <!-- Contest table -->
-    {@render problemListTab('コンテスト別（アルファ版）', 'contestTable', contestTable)}
+    <ProblemListTabItem
+      title="コンテスト別（アルファ版）"
+      activeProblemList="contestTable"
+      isOpen={isActiveTab('contestTable')}
+    >
+      <TaskTable {taskResults} {isLoggedIn} {isAtCoderVerified} {voteResults} />
+    </ProblemListTabItem>
 
     <!-- Grades -->
-    {@render problemListTab('グレード別', 'listByGrade', listByGrade)}
+    <ProblemListTabItem
+      title="グレード別"
+      activeProblemList="listByGrade"
+      isOpen={isActiveTab('listByGrade')}
+    >
+      <TaskGradeList {taskResults} {isLoggedIn}></TaskGradeList>
+    </ProblemListTabItem>
 
     <!-- Grade guidelines -->
-    {@render problemListTab('グレードの目安', 'gradeGuidelineTable', gradeGuidelineTable)}
+    <ProblemListTabItem
+      title="グレードの目安"
+      activeProblemList="gradeGuidelineTable"
+      isOpen={isActiveTab('gradeGuidelineTable')}
+    >
+      <GradeGuidelineTable />
+    </ProblemListTabItem>
   </Tabs>
 </div>
-
-{#snippet problemListTab(title: string, tab: ActiveProblemListTab, children: Snippet)}
-  <ProblemListTabItem {title} activeProblemList={tab} isOpen={isActiveTab(tab)}>
-    {@render children()}
-  </ProblemListTabItem>
-{/snippet}
-
-{#snippet contestTable()}
-  <TaskTable {taskResults} {isLoggedIn} {isAtCoderVerified} {voteResults} />
-{/snippet}
-
-{#snippet listByGrade()}
-  <TaskGradeList {taskResults} {isLoggedIn}></TaskGradeList>
-{/snippet}
-
-{#snippet gradeGuidelineTable()}
-  <GradeGuidelineTable />
-{/snippet}