DesQTA

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.

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.

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.

Create and modify Android home screen app widgets for Tauri apps. Use when adding widgets, creating widget layouts, AppWidgetProvider classes, or sharing data between the app and widgets. Covers gen/android structure, RemoteViews, and Tauri data bridge.

Analyze a page or module in its entirety and create a comprehensive FEATURES.md listing every feature in detail. Use when documenting features, creating FEATURES.md, listing page capabilities, or when the user asks to document what a page/module does.

Review Svelte components and pages for i18n compliance. Ensures user-facing strings use translation keys via $_() or T component, keys exist in en.json, and keys are translated in all 15 locale files. Use when reviewing components for i18n, adding new UI strings, or when the user asks to check or fix i18n.

Create new dashboard widgets and layout templates for DesQTA. Use when adding new widget types, creating widget components, defining widget templates, or modifying dashboard layouts. Covers widget registry, component structure, template creation, and position normalization.

Apply premium animation and UI refinement patterns to create polished, refined user experiences. Use when working on animations, transitions, UI polish, or when the user asks about making elements feel more premium or refined.