菜单
Optimize DesQTA for mobile-first UX on Tauri Android/iOS. Use when improving mobile layout, navigation, touch targets, safe areas, or when the user asks for mobile-first changes, responsive design for phones, or native mobile feel.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use the analytics-style custom dropdown instead of Select components for consistency. Use when adding dropdowns, label selectors, or filter pickers that should match the analytics page styling.
Fix scrollable content inside flex containers. Use when a list or content area is not scrollable, or when overflow-y-auto does not work inside a flex layout.
Apply soft, rounded mobile UI styling for a native feel. Use when improving mobile layout, bottom nav, header, safe areas, or when the user asks for mobile UI to be less square and more rounded.
Redesign DesQTA pages to match the consistent layout and styling used on courses, directory, and analytics. Use when redesigning a page, making pages look consistent, or when the user asks for page layout updates to match other pages.
Add new settings to the Rust backend so they persist. Use when adding a new setting, config option, or when settings are not saving correctly.
Add new sidebar customization features like hiding pages, reordering, or folders. Use when extending the Customize Sidebar dialog, adding menu visibility toggles, or modifying sidebar behavior.
| name | mobile-first-optimizations |
| description | Optimize DesQTA for mobile-first UX on Tauri Android/iOS. Use when improving mobile layout, navigation, touch targets, safe areas, or when the user asks for mobile-first changes, responsive design for phones, or native mobile feel. |
Always use platformStore for mobile detection. Do not add local isMobile state or checkMobile() in components.
import { platformStore } from '$lib/stores/platform';
let isMobile = $derived($platformStore.isMobile);
let isNativeMobile = $derived($platformStore.isNativeMobile);
isMobile: true when native mobile (Android/iOS) OR viewport ≤ 640pxisNativeMobile: true only on Tauri iOS/Androidsm)Call platformStore.checkPlatform() in layout onMount; subscribe via $platformStore for reactivity.
| Context | Desktop | Mobile |
|---|---|---|
| Navigation | Sidebar + header hamburger | Bottom nav (MobileBottomNav) + "More" tab opens sidebar |
| Header | Hamburger, weather, questionnaire | Logo + search only; no hamburger (use bottom nav "More") |
| Sidebar | Open by default | Closed by default; overlay when open |
| Main content | rounded-br-2xl | Full-bleed, no rounded corners |
| Content padding | Standard | pb-[56px] to clear fixed bottom nav |
src/lib/stores/platform.ts – platform detectionsrc/lib/components/MobileBottomNav.svelte – bottom nav (visible when isMobile && !needsSetup)src/routes/+layout.svelte – shell, sidebar state, mobile effectssrc/lib/components/AppHeader.svelte – receives isMobile, hides hamburger/weather on mobilesrc/lib/components/AppSidebar.svelte – overlay on mobile, min-h-[44px] on linksmin-h-[44px])transition-all duration-200 and active:scale-95 for tap feedbackapp.css: touch-action: manipulation on button, a, [role="button"] for coarse pointers (removes 300ms tap delay)var(--safe-area-top) for status bar (root layout)--safe-area-bottom to nav or main content paddingapp.css defines --safe-area-top and --safe-area-bottom; only top is used in layoutviewport-fit=cover in app.html for iOS webviewhandlePageNavigation sets sidebarOpen = false when isMobile)AppSidebar calls onMenuItemClick on all linksdisableDrag/disableResize on mobileday view on mobile, week on desktop$effect syncs sidebarOpen = !isMobile$platformStore.isMobile (not local state)isMobilepnpm tauri android dev)