菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | desqta-page-redesign-consistency |
| description | 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. |
When redesigning a page to match courses, directory, and analytics:
<div class="container max-w-none w-full p-5 mx-auto flex flex-col h-full gap-6" in:fade={{ duration: 400 }}>
container max-w-none w-full p-5 mx-autoflex flex-col h-full gap-6 for pages with scrollable contentspace-y-6 for simpler pagesin:fade={{ duration: 400 }} for page-level fade-in<div class="shrink-0">
<h1 class="mb-2 text-3xl font-bold text-zinc-900 dark:text-white">
<T key="..." fallback="Page Title" />
</h1>
<p class="text-zinc-600 dark:text-zinc-400">
<T key="...page_description" fallback="Short description." />
</p>
</div>
For panels, sidebars, and content areas:
rounded-xl border border-zinc-200/50 dark:border-zinc-700/50 bg-white/80 dark:bg-zinc-900/60 shadow-lg overflow-hidden
flex-1 min-h-0 overflow-hidden (allows flex child to shrink)flex-1 min-h-0 overflow-y-auto (not flex-none—that breaks scroll)[scrollbar-gutter:stable] for stable layoutAdd page_description key to the page's section in en.json and other locale files.
src/routes/courses/+page.svelte – Full layout with sidebarsrc/routes/directory/+page.svelte – Simpler layout with fadesrc/routes/analytics/+page.svelte – Filters and card layoutsrc/routes/direqt-messages/+page.svelte – Multi-panel layoutUse 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.
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.
Apply soft, organic, and premium UI patterns to create a refined user experience. Use when styling data visualizations, page layouts, article content, RSS feeds, semi-transparent panels, or when the user asks for a soft, rich, premium, or meticulously designed feel.