mirror of
https://github.com/dream-pep/koring-launcher.git
synced 2026-09-12 05:45:18 +08:00
优化显示效果
优化切换动画 优化darkmode适配问题 新增3种菜单栏状态
This commit is contained in:
@@ -0,0 +1,659 @@
|
||||
---
|
||||
name: ui-ux-pro-max
|
||||
description: "UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples."
|
||||
---
|
||||
|
||||
# UI/UX Pro Max - Design Intelligence
|
||||
|
||||
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 161 color palettes, 57 font pairings, 161 product types with reasoning rules, 99 UX guidelines, and 25 chart types across 10 technology stacks. Searchable database with priority-based recommendations.
|
||||
|
||||
## When to Apply
|
||||
|
||||
This Skill should be used when the task involves **UI structure, visual design decisions, interaction patterns, or user experience quality control**.
|
||||
|
||||
### Must Use
|
||||
|
||||
This Skill must be invoked in the following situations:
|
||||
|
||||
- Designing new pages (Landing Page, Dashboard, Admin, SaaS, Mobile App)
|
||||
- Creating or refactoring UI components (buttons, modals, forms, tables, charts, etc.)
|
||||
- Choosing color schemes, typography systems, spacing standards, or layout systems
|
||||
- Reviewing UI code for user experience, accessibility, or visual consistency
|
||||
- Implementing navigation structures, animations, or responsive behavior
|
||||
- Making product-level design decisions (style, information hierarchy, brand expression)
|
||||
- Improving perceived quality, clarity, or usability of interfaces
|
||||
|
||||
### Recommended
|
||||
|
||||
This Skill is recommended in the following situations:
|
||||
|
||||
- UI looks "not professional enough" but the reason is unclear
|
||||
- Receiving feedback on usability or experience
|
||||
- Pre-launch UI quality optimization
|
||||
- Aligning cross-platform design (Web / iOS / Android)
|
||||
- Building design systems or reusable component libraries
|
||||
|
||||
### Skip
|
||||
|
||||
This Skill is not needed in the following situations:
|
||||
|
||||
- Pure backend logic development
|
||||
- Only involving API or database design
|
||||
- Performance optimization unrelated to the interface
|
||||
- Infrastructure or DevOps work
|
||||
- Non-visual scripts or automation tasks
|
||||
|
||||
**Decision criteria**: If the task will change how a feature **looks, feels, moves, or is interacted with**, this Skill should be used.
|
||||
|
||||
## Rule Categories by Priority
|
||||
|
||||
*For human/AI reference: follow priority 1→10 to decide which rule category to focus on first; use `--domain <Domain>` to query details when needed. Scripts do not read this table.*
|
||||
|
||||
| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
|
||||
|----------|----------|--------|--------|------------------------|------------------------|
|
||||
| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
|
||||
| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
|
||||
| 3 | Performance | HIGH | `ux` | WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |
|
||||
| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
|
||||
| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
|
||||
| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
|
||||
| 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
|
||||
| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
|
||||
| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
|
||||
| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### 1. Accessibility (CRITICAL)
|
||||
|
||||
- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
|
||||
- `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
|
||||
- `alt-text` - Descriptive alt text for meaningful images
|
||||
- `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
|
||||
- `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG)
|
||||
- `form-labels` - Use label with for attribute
|
||||
- `skip-links` - Skip to main content for keyboard users
|
||||
- `heading-hierarchy` - Sequential h1→h6, no level skip
|
||||
- `color-not-only` - Don't convey info by color alone (add icon/text)
|
||||
- `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)
|
||||
- `reduced-motion` - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
|
||||
- `voiceover-sr` - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)
|
||||
- `escape-routes` - Provide cancel/back in modals and multi-step flows (Apple HIG)
|
||||
- `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)
|
||||
|
||||
### 2. Touch & Interaction (CRITICAL)
|
||||
|
||||
- `touch-target-size` - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
|
||||
- `touch-spacing` - Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
|
||||
- `hover-vs-tap` - Use click/tap for primary interactions; don't rely on hover alone
|
||||
- `loading-buttons` - Disable button during async operations; show spinner or progress
|
||||
- `error-feedback` - Clear error messages near problem
|
||||
- `cursor-pointer` - Add cursor-pointer to clickable elements (Web)
|
||||
- `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll
|
||||
- `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web)
|
||||
- `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
|
||||
- `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
|
||||
- `press-feedback` - Visual feedback on press (ripple/highlight; MD state layers)
|
||||
- `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)
|
||||
- `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions
|
||||
- `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges
|
||||
- `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges
|
||||
- `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial)
|
||||
- `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags
|
||||
|
||||
### 3. Performance (HIGH)
|
||||
|
||||
- `image-optimization` - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets
|
||||
- `image-dimension` - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)
|
||||
- `font-loading` - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
|
||||
- `font-preload` - Preload only critical fonts; avoid overusing preload on every variant
|
||||
- `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
|
||||
- `lazy-loading` - Lazy load non-hero components via dynamic import / route-level splitting
|
||||
- `bundle-splitting` - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI
|
||||
- `third-party-scripts` - Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
|
||||
- `reduce-reflows` - Avoid frequent layout reads/writes; batch DOM reads then writes
|
||||
- `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
|
||||
- `lazy-load-below-fold` - Use loading="lazy" for below-the-fold images and heavy media
|
||||
- `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance
|
||||
- `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)
|
||||
- `progressive-loading` - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)
|
||||
- `input-latency` - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)
|
||||
- `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG)
|
||||
- `debounce-throttle` - Use debounce/throttle for high-frequency events (scroll, resize, input)
|
||||
- `offline-support` - Provide offline state messaging and basic fallback (PWA / mobile)
|
||||
- `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations)
|
||||
|
||||
### 4. Style Selection (HIGH)
|
||||
|
||||
- `style-match` - Match style to product type (use `--design-system` for recommendations)
|
||||
- `consistency` - Use same style across all pages
|
||||
- `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis
|
||||
- `color-palette-from-product` - Choose palette from product/industry (search `--domain color`)
|
||||
- `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
|
||||
- `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
|
||||
- `state-clarity` - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
|
||||
- `elevation-consistent` - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
|
||||
- `dark-mode-pairing` - Design light/dark variants together to keep brand, contrast, and style consistent
|
||||
- `icon-style-consistent` - Use one icon set/visual language (stroke width, corner radius) across the product
|
||||
- `system-controls` - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
|
||||
- `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
|
||||
- `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)
|
||||
|
||||
### 5. Layout & Responsive (HIGH)
|
||||
|
||||
- `viewport-meta` - width=device-width initial-scale=1 (never disable zoom)
|
||||
- `mobile-first` - Design mobile-first, then scale up to tablet and desktop
|
||||
- `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
|
||||
- `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom)
|
||||
- `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars
|
||||
- `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width
|
||||
- `spacing-scale` - Use 4pt/8dp incremental spacing system (Material Design)
|
||||
- `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps
|
||||
- `container-width` - Consistent max-width on desktop (max-w-6xl / 7xl)
|
||||
- `z-index-management` - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
|
||||
- `fixed-element-offset` - Fixed navbar/bottom bar must reserve safe padding for underlying content
|
||||
- `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience
|
||||
- `viewport-units` - Prefer min-h-dvh over 100vh on mobile
|
||||
- `orientation-support` - Keep layout readable and operable in landscape mode
|
||||
- `content-priority` - Show core content first on mobile; fold or hide secondary content
|
||||
- `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone
|
||||
|
||||
### 6. Typography & Color (MEDIUM)
|
||||
|
||||
- `line-height` - Use 1.5-1.75 for body text
|
||||
- `line-length` - Limit to 65-75 characters per line
|
||||
- `font-pairing` - Match heading/body font personalities
|
||||
- `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32)
|
||||
- `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white)
|
||||
- `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
|
||||
- `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
|
||||
- `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
|
||||
- `color-dark-mode` - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
|
||||
- `color-accessible-pairs` - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
|
||||
- `color-not-decorative-only` - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
|
||||
- `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
|
||||
- `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
|
||||
- `number-tabular` - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
|
||||
- `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)
|
||||
|
||||
### 7. Animation (MEDIUM)
|
||||
|
||||
- `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
|
||||
- `transform-performance` - Use transform/opacity only; avoid animating width/height/top/left
|
||||
- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms
|
||||
- `excessive-motion` - Animate 1-2 key elements per view max
|
||||
- `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
|
||||
- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
|
||||
- `state-transition` - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
|
||||
- `continuity` - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
|
||||
- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
|
||||
- `spring-physics` - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
|
||||
- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
|
||||
- `stagger-sequence` - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
|
||||
- `shared-element-transition` - Use shared element / hero transitions for visual continuity between screens (MD, HIG)
|
||||
- `interruptible` - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)
|
||||
- `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG)
|
||||
- `fade-crossfade` - Use crossfade for content replacement within the same container (MD)
|
||||
- `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)
|
||||
- `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)
|
||||
- `hierarchy-motion` - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)
|
||||
- `motion-consistency` - Unify duration/easing tokens globally; all animations share the same rhythm and feel
|
||||
- `opacity-threshold` - Fading elements should not linger below opacity 0.2; either fade fully or remain visible
|
||||
- `modal-motion` - Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)
|
||||
- `navigation-direction` - Forward navigation animates left/up; backward animates right/down — keep direction logically consistent (HIG)
|
||||
- `layout-shift-avoid` - Animations must not cause layout reflow or CLS; use transform for position changes
|
||||
|
||||
### 8. Forms & Feedback (MEDIUM)
|
||||
|
||||
- `input-labels` - Visible label per input (not placeholder-only)
|
||||
- `error-placement` - Show error below the related field
|
||||
- `submit-feedback` - Loading then success/error state on submit
|
||||
- `required-indicators` - Mark required fields (e.g. asterisk)
|
||||
- `empty-states` - Helpful message and action when no content
|
||||
- `toast-dismiss` - Auto-dismiss toasts in 3-5s
|
||||
- `confirmation-dialogs` - Confirm before destructive actions
|
||||
- `input-helper-text` - Provide persistent helper text below complex inputs, not just placeholder (Material Design)
|
||||
- `disabled-states` - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
|
||||
- `progressive-disclosure` - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)
|
||||
- `inline-validation` - Validate on blur (not keystroke); show error only after user finishes input (MD)
|
||||
- `input-type-keyboard` - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)
|
||||
- `password-toggle` - Provide show/hide toggle for password fields (MD)
|
||||
- `autofill-support` - Use autocomplete / textContentType attributes so the system can autofill (HIG, MD)
|
||||
- `undo-support` - Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG)
|
||||
- `success-feedback` - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)
|
||||
- `error-recovery` - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)
|
||||
- `multi-step-progress` - Multi-step flows show step indicator or progress bar; allow back navigation (MD)
|
||||
- `form-autosave` - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)
|
||||
- `sheet-dismiss-confirm` - Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG)
|
||||
- `error-clarity` - Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD)
|
||||
- `field-grouping` - Group related fields logically (fieldset/legend or visual grouping) (MD)
|
||||
- `read-only-distinction` - Read-only state should be visually and semantically different from disabled (MD)
|
||||
- `focus-management` - After submit error, auto-focus the first invalid field (WCAG, MD)
|
||||
- `error-summary` - For multiple errors, show summary at top with anchor links to each field (WCAG)
|
||||
- `touch-friendly-input` - Mobile input height ≥44px to meet touch target requirements (Apple HIG)
|
||||
- `destructive-emphasis` - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)
|
||||
- `toast-accessibility` - Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG)
|
||||
- `aria-live-errors` - Form errors use aria-live region or role="alert" to notify screen readers (WCAG)
|
||||
- `contrast-feedback` - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)
|
||||
- `timeout-feedback` - Request timeout must show clear feedback with retry option (MD)
|
||||
|
||||
### 9. Navigation Patterns (HIGH)
|
||||
|
||||
- `bottom-nav-limit` - Bottom navigation max 5 items; use labels with icons (Material Design)
|
||||
- `drawer-usage` - Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
|
||||
- `back-behavior` - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
|
||||
- `deep-linking` - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
|
||||
- `tab-bar-ios` - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
|
||||
- `top-app-bar-android` - Android: use Top App Bar with navigation icon for primary structure (Material Design)
|
||||
- `nav-label-icon` - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
|
||||
- `nav-state-active` - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
|
||||
- `nav-hierarchy` - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
|
||||
- `modal-escape` - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
|
||||
- `search-accessible` - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
|
||||
- `breadcrumb-web` - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)
|
||||
- `state-preservation` - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)
|
||||
- `gesture-nav-support` - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)
|
||||
- `tab-badge` - Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD)
|
||||
- `overflow-menu` - When actions exceed available space, use overflow/more menu instead of cramming (MD)
|
||||
- `bottom-nav-top-level` - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)
|
||||
- `adaptive-navigation` - Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive)
|
||||
- `back-stack-integrity` - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)
|
||||
- `navigation-consistency` - Navigation placement must stay the same across all pages; don't change by page type
|
||||
- `avoid-mixed-patterns` - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level
|
||||
- `modal-vs-navigation` - Modals must not be used for primary navigation flows; they break the user's path (HIG)
|
||||
- `focus-on-route-change` - After page transition, move focus to main content region for screen reader users (WCAG)
|
||||
- `persistent-nav` - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)
|
||||
- `destructive-nav-separation` - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)
|
||||
- `empty-nav-state` - When a nav destination is unavailable, explain why instead of silently hiding it (MD)
|
||||
|
||||
### 10. Charts & Data (LOW)
|
||||
|
||||
- `chart-type` - Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)
|
||||
- `color-guidance` - Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD)
|
||||
- `data-table` - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)
|
||||
- `pattern-texture` - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)
|
||||
- `legend-visible` - Always show legend; position near the chart, not detached below a scroll fold (MD)
|
||||
- `tooltip-on-interact` - Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)
|
||||
- `axis-labels` - Label axes with units and readable scale; avoid truncated or rotated labels on mobile
|
||||
- `responsive-chart` - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)
|
||||
- `empty-data-state` - Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD)
|
||||
- `loading-chart` - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame
|
||||
- `animation-optional` - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)
|
||||
- `large-dataset` - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)
|
||||
- `number-formatting` - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)
|
||||
- `touch-target-chart` - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)
|
||||
- `no-pie-overuse` - Avoid pie/donut for >5 categories; switch to bar chart for clarity
|
||||
- `contrast-data` - Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)
|
||||
- `legend-interactive` - Legends should be clickable to toggle series visibility (MD)
|
||||
- `direct-labeling` - For small datasets, label values directly on the chart to reduce eye travel
|
||||
- `tooltip-keyboard` - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)
|
||||
- `sortable-table` - Data tables must support sorting with aria-sort indicating current sort state (WCAG)
|
||||
- `axis-readability` - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens
|
||||
- `data-density` - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed
|
||||
- `trend-emphasis` - Emphasize data trends over decoration; avoid heavy gradients/shadows that obscure the data
|
||||
- `gridline-subtle` - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data
|
||||
- `focusable-elements` - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)
|
||||
- `screen-reader-summary` - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)
|
||||
- `error-state-chart` - Data load failure must show error message with retry action, not a broken/empty chart
|
||||
- `export-option` - For data-heavy products, offer CSV/image export of chart data
|
||||
- `drill-down-consistency` - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb
|
||||
- `time-scale-clarity` - Time series charts must clearly label time granularity (day/week/month) and allow switching
|
||||
|
||||
## How to Use
|
||||
|
||||
Search specific domains using the CLI tool below.
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Check if Python is installed:
|
||||
|
||||
```bash
|
||||
python3 --version || python --version
|
||||
```
|
||||
|
||||
If Python is not installed, install it based on user's OS:
|
||||
|
||||
**macOS:**
|
||||
```bash
|
||||
brew install python3
|
||||
```
|
||||
|
||||
**Ubuntu/Debian:**
|
||||
```bash
|
||||
sudo apt update && sudo apt install python3
|
||||
```
|
||||
|
||||
**Windows:**
|
||||
```powershell
|
||||
winget install Python.Python.3.12
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How to Use This Skill
|
||||
|
||||
Use this skill when the user requests any of the following:
|
||||
|
||||
| Scenario | Trigger Examples | Start From |
|
||||
|----------|-----------------|------------|
|
||||
| **New project / page** | "Build a landing page", "Build a dashboard" | Step 1 → Step 2 (design system) |
|
||||
| **New component** | "Create a pricing card", "Add a modal" | Step 3 (domain search: style, ux) |
|
||||
| **Choose style / color / font** | "What style fits a fintech app?", "Recommend a color palette" | Step 2 (design system) |
|
||||
| **Review existing UI** | "Review this page for UX issues", "Check accessibility" | Quick Reference checklist above |
|
||||
| **Fix a UI bug** | "Button hover is broken", "Layout shifts on load" | Quick Reference → relevant section |
|
||||
| **Improve / optimize** | "Make this faster", "Improve mobile experience" | Step 3 (domain search: ux, react) |
|
||||
| **Implement dark mode** | "Add dark mode support" | Step 3 (domain: style "dark mode") |
|
||||
| **Add charts / data viz** | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
|
||||
| **Stack best practices** | "React performance tips"、"SwiftUI navigation" | Step 4 (stack search) |
|
||||
|
||||
Follow this workflow:
|
||||
|
||||
### Step 1: Analyze User Requirements
|
||||
|
||||
Extract key information from user request:
|
||||
- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
|
||||
- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)
|
||||
- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
|
||||
- **Stack**: React Native (this project's only tech stack)
|
||||
|
||||
### Step 2: Generate Design System (REQUIRED)
|
||||
|
||||
**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
|
||||
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
|
||||
```
|
||||
|
||||
This command:
|
||||
1. Searches domains in parallel (product, style, color, landing, typography)
|
||||
2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
|
||||
3. Returns complete design system: pattern, style, colors, typography, effects
|
||||
4. Includes anti-patterns to avoid
|
||||
|
||||
**Example:**
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
|
||||
```
|
||||
|
||||
### Step 2b: Persist Design System (Master + Overrides Pattern)
|
||||
|
||||
To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
|
||||
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
|
||||
```
|
||||
|
||||
This creates:
|
||||
- `design-system/MASTER.md` — Global Source of Truth with all design rules
|
||||
- `design-system/pages/` — Folder for page-specific overrides
|
||||
|
||||
**With page-specific override:**
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
|
||||
```
|
||||
|
||||
This also creates:
|
||||
- `design-system/pages/dashboard.md` — Page-specific deviations from Master
|
||||
|
||||
**How hierarchical retrieval works:**
|
||||
1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
|
||||
2. If the page file exists, its rules **override** the Master file
|
||||
3. If not, use `design-system/MASTER.md` exclusively
|
||||
|
||||
**Context-aware retrieval prompt:**
|
||||
```
|
||||
I am building the [Page Name] page. Please read design-system/MASTER.md.
|
||||
Also check if design-system/pages/[page-name].md exists.
|
||||
If the page file exists, prioritize its rules.
|
||||
If not, use the Master rules exclusively.
|
||||
Now, generate the code...
|
||||
```
|
||||
|
||||
### Step 3: Supplement with Detailed Searches (as needed)
|
||||
|
||||
After getting the design system, use domain searches to get additional details:
|
||||
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
|
||||
```
|
||||
|
||||
**When to use detailed searches:**
|
||||
|
||||
| Need | Domain | Example |
|
||||
|------|--------|---------|
|
||||
| Product type patterns | `product` | `--domain product "entertainment social"` |
|
||||
| More style options | `style` | `--domain style "glassmorphism dark"` |
|
||||
| Color palettes | `color` | `--domain color "entertainment vibrant"` |
|
||||
| Font pairings | `typography` | `--domain typography "playful modern"` |
|
||||
| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
|
||||
| UX best practices | `ux` | `--domain ux "animation accessibility"` |
|
||||
| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
|
||||
| Individual Google Fonts | `google-fonts` | `--domain google-fonts "sans serif popular variable"` |
|
||||
| Landing structure | `landing` | `--domain landing "hero social-proof"` |
|
||||
| React Native perf | `react` | `--domain react "rerender memo list"` |
|
||||
| App interface a11y | `web` | `--domain web "accessibilityLabel touch safe-areas"` |
|
||||
| AI prompt / CSS keywords | `prompt` | `--domain prompt "minimalism"` |
|
||||
|
||||
### Step 4: Stack Guidelines (React Native)
|
||||
|
||||
Get React Native implementation-specific best practices:
|
||||
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Search Reference
|
||||
|
||||
### Available Domains
|
||||
|
||||
| Domain | Use For | Example Keywords |
|
||||
|--------|---------|------------------|
|
||||
| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
|
||||
| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
|
||||
| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
|
||||
| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
|
||||
| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
|
||||
| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
|
||||
| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
|
||||
| `google-fonts` | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |
|
||||
| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
|
||||
| `web` | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
|
||||
| `prompt` | AI prompts, CSS keywords | (style name) |
|
||||
|
||||
### Available Stacks
|
||||
|
||||
| Stack | Focus |
|
||||
|-------|-------|
|
||||
| `react-native` | Components, Navigation, Lists |
|
||||
|
||||
---
|
||||
|
||||
## Example Workflow
|
||||
|
||||
**User request:** "Make an AI search homepage."
|
||||
|
||||
### Step 1: Analyze Requirements
|
||||
- Product type: Tool (AI search engine)
|
||||
- Target audience: C-end users looking for fast, intelligent search
|
||||
- Style keywords: modern, minimal, content-first, dark mode
|
||||
- Stack: React Native
|
||||
|
||||
### Step 2: Generate Design System (REQUIRED)
|
||||
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
|
||||
```
|
||||
|
||||
**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
|
||||
|
||||
### Step 3: Supplement with Detailed Searches (as needed)
|
||||
|
||||
```bash
|
||||
# Get style options for a modern tool product
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
|
||||
|
||||
# Get UX best practices for search interaction and loading
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
|
||||
```
|
||||
|
||||
### Step 4: Stack Guidelines
|
||||
|
||||
```bash
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
|
||||
```
|
||||
|
||||
**Then:** Synthesize design system + detailed searches and implement the design.
|
||||
|
||||
---
|
||||
|
||||
## Output Formats
|
||||
|
||||
The `--design-system` flag supports two output formats:
|
||||
|
||||
```bash
|
||||
# ASCII box (default) - best for terminal display
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
|
||||
|
||||
# Markdown - best for documentation
|
||||
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips for Better Results
|
||||
|
||||
### Query Strategy
|
||||
|
||||
- Use **multi-dimensional keywords** — combine product + industry + tone + density: `"entertainment social vibrant content-dense"` not just `"app"`
|
||||
- Try different keywords for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
|
||||
- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about
|
||||
- Always add `--stack react-native` for implementation-specific guidance
|
||||
|
||||
### Common Sticking Points
|
||||
|
||||
| Problem | What to Do |
|
||||
|---------|------------|
|
||||
| Can't decide on style/color | Re-run `--design-system` with different keywords |
|
||||
| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |
|
||||
| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |
|
||||
| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |
|
||||
| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |
|
||||
| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |
|
||||
| Performance / jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |
|
||||
|
||||
### Pre-Delivery Checklist
|
||||
|
||||
- Run `--domain ux "animation accessibility z-index loading"` as a UX validation pass before implementation
|
||||
- Run through Quick Reference **§1–§3** (CRITICAL + HIGH) as a final review
|
||||
- Test on 375px (small phone) and landscape orientation
|
||||
- Verify behavior with **reduced-motion** enabled and **Dynamic Type** at largest size
|
||||
- Check dark mode contrast independently (don't assume light mode values work)
|
||||
- Confirm all touch targets ≥44pt and no content hidden behind safe areas
|
||||
|
||||
---
|
||||
|
||||
## Common Rules for Professional UI
|
||||
|
||||
These are frequently overlooked issues that make UI look unprofessional:
|
||||
Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.
|
||||
|
||||
### Icons & Visual Elements
|
||||
|
||||
| Rule | Standard | Avoid | Why It Matters |
|
||||
|------|----------|--------|----------------|
|
||||
| **No Emoji as Structural Icons** | Use vector-based icons (e.g., Lucide, react-native-vector-icons, @expo/vector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |
|
||||
| **Vector-Only Assets** | Use SVG or platform vector icons that scale cleanly and support theming. | Raster PNG icons that blur or pixelate. | Ensures scalability, crisp rendering, and dark/light mode adaptability. |
|
||||
| **Stable Interaction States** | Use color, opacity, or elevation transitions for press states without changing layout bounds. | Layout-shifting transforms that move surrounding content or trigger visual jitter. | Prevents unstable interactions and preserves smooth motion/perceived quality on mobile. |
|
||||
| **Correct Brand Logos** | Use official brand assets and follow their usage guidelines (spacing, color, clear space). | Guessing logo paths, recoloring unofficially, or modifying proportions. | Prevents brand misuse and ensures legal/platform compliance. |
|
||||
| **Consistent Icon Sizing** | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt / 24pt / 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |
|
||||
| **Stroke Consistency** | Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px). | Mixing thick and thin stroke styles arbitrarily. | Inconsistent strokes reduce perceived polish and cohesion. |
|
||||
| **Filled vs Outline Discipline** | Use one icon style per hierarchy level. | Mixing filled and outline icons at the same hierarchy level. | Maintains semantic clarity and stylistic coherence. |
|
||||
| **Touch Target Minimum** | Minimum 44×44pt interactive area (use hitSlop if icon is smaller). | Small icons without expanded tap area. | Meets accessibility and platform usability standards. |
|
||||
| **Icon Alignment** | Align icons to text baseline and maintain consistent padding. | Misaligned icons or inconsistent spacing around them. | Prevents subtle visual imbalance that reduces perceived quality. |
|
||||
| **Icon Contrast** | Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs. | Low-contrast icons that blend into the background. | Ensures accessibility in both light and dark modes. |
|
||||
|
||||
|
||||
### Interaction (App)
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Tap feedback** | Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms | No visual response on tap |
|
||||
| **Animation timing** | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |
|
||||
| **Accessibility focus** | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |
|
||||
| **Disabled state clarity** | Use disabled semantics (`disabled`/native disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |
|
||||
| **Touch target minimum** | Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller | Tiny tap targets or icon-only hit areas without padding |
|
||||
| **Gesture conflict prevention** | Keep one primary gesture per region and avoid nested tap/drag conflicts | Overlapping gestures causing accidental actions |
|
||||
| **Semantic native controls** | Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |
|
||||
|
||||
### Light/Dark Mode Contrast
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Surface readability (light)** | Keep cards/surfaces clearly separated from background with sufficient opacity/elevation | Overly transparent surfaces that blur hierarchy |
|
||||
| **Text contrast (light)** | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |
|
||||
| **Text contrast (dark)** | Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces | Dark mode text that blends into background |
|
||||
| **Border and divider visibility** | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |
|
||||
| **State contrast parity** | Keep pressed/focused/disabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |
|
||||
| **Token-driven theming** | Use semantic color tokens mapped per theme across app surfaces/text/icons | Hardcoded per-screen hex values |
|
||||
| **Scrim and modal legibility** | Use a modal scrim strong enough to isolate foreground content (typically 40-60% black) | Weak scrim that leaves background visually competing |
|
||||
|
||||
### Layout & Spacing
|
||||
|
||||
| Rule | Do | Don't |
|
||||
|------|----|----- |
|
||||
| **Safe-area compliance** | Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |
|
||||
| **System bar clearance** | Add spacing for status/navigation bars and gesture home indicator | Let tappable content collide with OS chrome |
|
||||
| **Consistent content width** | Keep predictable content width per device class (phone/tablet) | Mixing arbitrary widths between screens |
|
||||
| **8dp spacing rhythm** | Use a consistent 4/8dp spacing system for padding/gaps/section spacing | Random spacing increments with no rhythm |
|
||||
| **Readable text measure** | Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets) | Full-width long text that hurts readability |
|
||||
| **Section spacing hierarchy** | Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy | Similar UI levels with inconsistent spacing |
|
||||
| **Adaptive gutters by breakpoint** | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes/orientations |
|
||||
| **Scroll and fixed element coexistence** | Add bottom/top content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers/footers |
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
|
||||
Before delivering UI code, verify these items:
|
||||
Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons come from a consistent icon family and style
|
||||
- [ ] Official brand assets are used with correct proportions and clear space
|
||||
- [ ] Pressed-state visuals do not shift layout bounds or cause jitter
|
||||
- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)
|
||||
|
||||
### Interaction
|
||||
- [ ] All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
|
||||
- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
|
||||
- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing
|
||||
- [ ] Disabled states are visually clear and non-interactive
|
||||
- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive
|
||||
- [ ] Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts)
|
||||
|
||||
### Light/Dark Mode
|
||||
- [ ] Primary text contrast >=4.5:1 in both light and dark mode
|
||||
- [ ] Secondary text contrast >=3:1 in both light and dark mode
|
||||
- [ ] Dividers/borders and interaction states are distinguishable in both modes
|
||||
- [ ] Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)
|
||||
- [ ] Both themes are tested before delivery (not inferred from a single theme)
|
||||
|
||||
### Layout
|
||||
- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars
|
||||
- [ ] Scroll content is not hidden behind fixed/sticky bars
|
||||
- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)
|
||||
- [ ] Horizontal insets/gutters adapt correctly by device size and orientation
|
||||
- [ ] 4/8dp spacing rhythm is maintained across component, section, and page levels
|
||||
- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)
|
||||
|
||||
### Accessibility
|
||||
- [ ] All meaningful images/icons have accessibility labels
|
||||
- [ ] Form fields have labels, hints, and clear error messages
|
||||
- [ ] Color is not the only indicator
|
||||
- [ ] Reduced motion and dynamic text size are supported without layout breakage
|
||||
- [ ] Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly
|
||||
@@ -0,0 +1 @@
|
||||
../../../src/ui-ux-pro-max/data
|
||||
@@ -0,0 +1 @@
|
||||
../../../src/ui-ux-pro-max/scripts
|
||||
@@ -1,7 +1,151 @@
|
||||
# Tauri + React + Typescript
|
||||
# Koring Launcher
|
||||
|
||||
This template should help get you started developing with Tauri, React and Typescript in Vite.
|
||||
Minecraft launcher built with Tauri 2 + React 19 + TypeScript + Sidecar (Node.js/@xmcl).
|
||||
|
||||
## Recommended IDE Setup
|
||||
## Quick Start
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm dev:t # full app (frontend + Rust + sidecar skip in dev)
|
||||
pnpm dev # frontend only (vite, port 1420)
|
||||
cd sidecar && pnpm dev # sidecar dev (tsx)
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
pnpm tauri build # production (auto-switches to run icon)
|
||||
pnpm build:beta # beta build
|
||||
cd sidecar && pnpm compile # compile sidecar to exe first
|
||||
```
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
src/ Frontend (React 19 + Vite 7 + Tailwind v4 + shadcn/ui + Zustand)
|
||||
src-tauri/ Backend (Rust/Tauri 2)
|
||||
sidecar/ Node.js sidecar (@xmcl/* packages)
|
||||
public/ Static assets (icons, fonts, images)
|
||||
scripts/ Build scripts
|
||||
```
|
||||
|
||||
**IPC Flow:**
|
||||
Frontend → `invoke()` → Rust commands → sidecar stdin → sidecar stdout → Tauri events → Frontend
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/ # Frontend API layer (sidecar IPC wrappers)
|
||||
│ ├── sidecar.ts # Generic request/response
|
||||
│ ├── background.ts # Background control
|
||||
│ ├── install.ts # Minecraft install
|
||||
│ ├── launch.ts # Game launch
|
||||
│ ├── auth.ts # Microsoft/offline auth
|
||||
│ ├── mods.ts # Modrinth/CurseForge
|
||||
│ └── instance.ts # Instance management
|
||||
├── stores/ # Zustand state stores
|
||||
├── components/
|
||||
│ ├── background/ # Background layer (z-0)
|
||||
│ ├── system/ # Title bar + window controls (z-100)
|
||||
│ └── ui/ # shadcn/ui components
|
||||
├── layouts/
|
||||
│ └── RootLayout.tsx # Three-layer page structure
|
||||
├── pages/
|
||||
│ ├── Home.tsx # Main page
|
||||
│ └── Debug.tsx # Debug tools
|
||||
├── lib/
|
||||
│ ├── mode.ts # Build mode detection (dev/beta/run)
|
||||
│ └── utils.ts # cn() helper
|
||||
└── App.tsx # Root component with state router
|
||||
```
|
||||
|
||||
## Three-Layer Page Structure
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ z-index: 100 System Layer │ pointer-events: none
|
||||
│ ┌──────────────────────────────┐ │
|
||||
│ │ TitleBar (frosted glass) │ │ pointer-events: auto
|
||||
│ │ WindowControls (25px btns) │ │
|
||||
│ └──────────────────────────────┘ │
|
||||
├──────────────────────────────────────┤
|
||||
│ z-index: 1 Content Layer │ pointer-events: auto
|
||||
│ All page content │
|
||||
├──────────────────────────────────────┤
|
||||
│ z-index: 0 Background Layer │ pointer-events: none
|
||||
│ Image / color / gradient / blur │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Splash Screen
|
||||
|
||||
- Standalone HTML/CSS (`splash.html`), no React/Vite dependency
|
||||
- Loads instantly while Vite dev server starts
|
||||
- Window: 480×320, no decorations, transparent, locked size
|
||||
- Auto-adapts to system dark mode (`prefers-color-scheme`)
|
||||
- Logo: `filter: invert(1)` in dark mode
|
||||
|
||||
## Icon System
|
||||
|
||||
Three icon variants in `public/`:
|
||||
|
||||
| Mode | File | Use Case |
|
||||
|------|------|----------|
|
||||
| dev | `dev.png` / `dev.ico` | Development |
|
||||
| beta | `beta.png` / `beta.ico` | Testing |
|
||||
| run | `run.png` / `run.ico` | Production release |
|
||||
|
||||
**Auto-switching:** Build scripts automatically copy the correct icon to `src-tauri/icons/` before building.
|
||||
|
||||
**Frontend usage:**
|
||||
```tsx
|
||||
import { APP_ICON, BUILD_MODE, isDev } from "@/lib/mode";
|
||||
|
||||
<img src={APP_ICON} />
|
||||
{isDev && <span>Dev Mode</span>}
|
||||
```
|
||||
|
||||
**Manual switch:**
|
||||
```bash
|
||||
pnpm icon:dev # switch to dev icon
|
||||
pnpm icon:beta # switch to beta icon
|
||||
pnpm icon:run # switch to release icon
|
||||
```
|
||||
|
||||
## Sidecar
|
||||
|
||||
Node.js process communicating with Rust via stdin/stdout JSON protocol.
|
||||
|
||||
**Handlers:**
|
||||
- `install:*` — Minecraft install, mod loader, version lists
|
||||
- `launch:*` — Game launch, diagnose
|
||||
- `auth:*` — Microsoft OAuth, offline login
|
||||
- `mods:*` — Modrinth/CurseForge search, install
|
||||
- `instance:*` — Instance CRUD
|
||||
- `background:*` — Background image/color/blur/animation/theme
|
||||
|
||||
**Compile:**
|
||||
```bash
|
||||
cd sidecar
|
||||
pnpm compile # ARM64 Windows (default)
|
||||
pnpm compile:x64 # x86_64 Windows
|
||||
```
|
||||
|
||||
## Key Gotchas
|
||||
|
||||
- **Sidecar binary required**: `src-tauri/binaries/koring-sidecar-<target-triple>.exe` must exist. Skipped in debug mode (`#[cfg(debug_assertions)]`).
|
||||
- **@xmcl packages are Node.js only**: `@xmcl/core`, `@xmcl/installer` require `fs`/`child_process`. Only `@xmcl/user`, `@xmcl/modrinth`, `@xmcl/curseforge` work in browser.
|
||||
- **Path alias**: `@/` maps to `src/`.
|
||||
- **Window dragging**: Use `appWindow.startDragging()` API, not `data-tauri-drag-region` (unreliable with transparent windows).
|
||||
- **Transparent windows**: Require `decorations: false` + `transparent: true` in tauri.conf.json.
|
||||
- **Permissions**: Window creation needs `core:webview:allow-create-webview-window` (not `core:window`).
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|-------|-----------|
|
||||
| Frontend | React 19, Vite 7, Tailwind CSS v4, shadcn/ui, Zustand |
|
||||
| Backend | Rust, Tauri 2 |
|
||||
| Sidecar | Node.js, TypeScript, @xmcl/* packages |
|
||||
| Build | pnpm, Cargo, bun (sidecar compile) |
|
||||
|
||||
@@ -25,10 +25,9 @@ if (!existsSync(ico)) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Tauri 2 only needs icon.png (source) + icon.ico
|
||||
// It auto-generates 32x32, 128x128, 128x128@2x, icns from icon.png during build
|
||||
cpSync(png, join(iconsDir, "icon.png"), { overwrite: true });
|
||||
cpSync(ico, join(iconsDir, "icon.ico"), { overwrite: true });
|
||||
cpSync(png, join(iconsDir, "32x32.png"), { overwrite: true });
|
||||
cpSync(png, join(iconsDir, "128x128.png"), { overwrite: true });
|
||||
cpSync(png, join(iconsDir, "128x128@2x.png"), { overwrite: true });
|
||||
|
||||
console.log(`[switch-icon] Mode: ${mode} → icons updated`);
|
||||
console.log(`[switch-icon] Mode: ${mode} → icon.png + icon.ico updated`);
|
||||
|
||||
@@ -48,6 +48,12 @@
|
||||
"sourceType": "github",
|
||||
"skillPath": "skills/gsap-utils/SKILL.md",
|
||||
"computedHash": "72af4a036d417d6eaef7478eca2f28e760631fb78db822ba34a9c706797aab62"
|
||||
},
|
||||
"ui-ux-pro-max": {
|
||||
"source": "nextlevelbuilder/ui-ux-pro-max-skill",
|
||||
"sourceType": "github",
|
||||
"skillPath": ".claude/skills/ui-ux-pro-max/SKILL.md",
|
||||
"computedHash": "6337038fe1fe6bbe1b9f252ab678ee575859190bab6f0f246f4061824eb40875"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 974 B After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 393 KiB |
@@ -13,7 +13,7 @@
|
||||
"windows": [
|
||||
{
|
||||
"label": "splashscreen",
|
||||
"title": "splashscreen",
|
||||
"title": "正在启动",
|
||||
"url": "/splash.html",
|
||||
"width": 480,
|
||||
"height": 320,
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
{
|
||||
"label": "main",
|
||||
"title": "koring-launcher",
|
||||
"title": "Koring Launcher",
|
||||
"width": 800,
|
||||
"height": 600,
|
||||
"decorations": false,
|
||||
@@ -45,10 +45,7 @@
|
||||
"active": true,
|
||||
"targets": "all",
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.png",
|
||||
"icons/icon.ico"
|
||||
],
|
||||
"externalBin": [
|
||||
|
||||
+20
-7
@@ -1,17 +1,30 @@
|
||||
import { useState } from "react";
|
||||
import { RootLayout } from "./layouts/RootLayout";
|
||||
import { Home } from "./pages/Home";
|
||||
import { Debug } from "./pages/Debug";
|
||||
import { useRouteStore } from "./stores/routeStore";
|
||||
import { useTheme } from "./hooks/useTheme";
|
||||
import { Home } from "./pages/home";
|
||||
import { Store } from "./pages/store";
|
||||
import { Today } from "./pages/today";
|
||||
import { PlayLink } from "./pages/play-link";
|
||||
import { Setting } from "./pages/setting";
|
||||
import { Debug } from "./pages/setting/debug";
|
||||
|
||||
type Page = "home" | "debug";
|
||||
const pageMap = {
|
||||
home: Home,
|
||||
store: Store,
|
||||
today: Today,
|
||||
"play-link": PlayLink,
|
||||
setting: Setting,
|
||||
debug: Debug,
|
||||
} as const;
|
||||
|
||||
function App() {
|
||||
const [page, setPage] = useState<Page>("home");
|
||||
useTheme();
|
||||
const current = useRouteStore((s) => s.current);
|
||||
const Page = pageMap[current];
|
||||
|
||||
return (
|
||||
<RootLayout>
|
||||
{page === "home" && <Home onNavigate={setPage} />}
|
||||
{page === "debug" && <Debug onNavigate={setPage} />}
|
||||
<Page key={current} />
|
||||
</RootLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -77,6 +77,7 @@ export function BackgroundLayer() {
|
||||
}
|
||||
`}</style>
|
||||
<div style={getBackgroundStyle()} />
|
||||
<div className="dark:block hidden fixed inset-0 z-0 pointer-events-none bg-black/35" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import { useRef, useState, useEffect, useCallback } from "react";
|
||||
import { useRouteStore, routes } from "@/stores/routeStore";
|
||||
import { WindowControls } from "./WindowControls";
|
||||
|
||||
interface TitleBarProps {
|
||||
@@ -13,6 +15,119 @@ export function TitleBar({
|
||||
showClose = true,
|
||||
}: TitleBarProps) {
|
||||
const appWindow = getCurrentWindow();
|
||||
const current = useRouteStore((s) => s.current);
|
||||
const navigate = useRouteStore((s) => s.navigate);
|
||||
const titleBarMode = useRouteStore((s) => s.titleBarMode);
|
||||
const goBack = useRouteStore((s) => s.goBack);
|
||||
|
||||
const isSub = titleBarMode === "sub";
|
||||
const isDefault = titleBarMode === "default";
|
||||
|
||||
const currentIdx = routes.findIndex((r) => r.key === current);
|
||||
|
||||
const navRef = useRef<HTMLDivElement>(null);
|
||||
const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);
|
||||
const [indicator, setIndicator] = useState({ left: 0, width: 0 });
|
||||
|
||||
const isDragging = useRef(false);
|
||||
const hasDragged = useRef(false);
|
||||
const dragStartX = useRef(0);
|
||||
const dragStartLeft = useRef(0);
|
||||
const dragWidth = useRef(0);
|
||||
|
||||
const updateIndicator = useCallback((idx: number) => {
|
||||
const btn = btnRefs.current[idx];
|
||||
const nav = navRef.current;
|
||||
if (!btn || !nav) return;
|
||||
const navRect = nav.getBoundingClientRect();
|
||||
const btnRect = btn.getBoundingClientRect();
|
||||
setIndicator({
|
||||
left: btnRect.left - navRect.left,
|
||||
width: btnRect.width,
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDefault) {
|
||||
// 延迟一帧等 DOM 更新后再计算指示条位置
|
||||
requestAnimationFrame(() => updateIndicator(currentIdx));
|
||||
}
|
||||
}, [currentIdx, updateIndicator, isDefault]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDefault) return;
|
||||
const onResize = () => updateIndicator(currentIdx);
|
||||
window.addEventListener("resize", onResize);
|
||||
return () => window.removeEventListener("resize", onResize);
|
||||
}, [currentIdx, updateIndicator, isDefault]);
|
||||
|
||||
// document 级别拖拽事件
|
||||
useEffect(() => {
|
||||
if (!isDefault) return;
|
||||
|
||||
const onMove = (e: PointerEvent) => {
|
||||
if (!isDragging.current) return;
|
||||
const dx = e.clientX - dragStartX.current;
|
||||
if (Math.abs(dx) > 3) hasDragged.current = true;
|
||||
if (!hasDragged.current) return;
|
||||
|
||||
const nav = navRef.current;
|
||||
if (!nav) return;
|
||||
const maxLeft = nav.scrollWidth - dragWidth.current;
|
||||
const clampedLeft = Math.max(0, Math.min(maxLeft, dragStartLeft.current + dx));
|
||||
|
||||
setIndicator((prev) => ({ ...prev, left: clampedLeft }));
|
||||
|
||||
let nearestIdx = 0;
|
||||
let minDist = Infinity;
|
||||
btnRefs.current.forEach((btn, i) => {
|
||||
if (!btn) return;
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const navRect = nav.getBoundingClientRect();
|
||||
const btnCenter = rect.left - navRect.left + rect.width / 2;
|
||||
const dist = Math.abs(clampedLeft + dragWidth.current / 2 - btnCenter);
|
||||
if (dist < minDist) { minDist = dist; nearestIdx = i; }
|
||||
});
|
||||
|
||||
const latest = useRouteStore.getState().current;
|
||||
if (routes[nearestIdx] && routes[nearestIdx].key !== latest) {
|
||||
navigate(routes[nearestIdx].key);
|
||||
}
|
||||
};
|
||||
|
||||
const onUp = () => {
|
||||
if (!isDragging.current) return;
|
||||
isDragging.current = false;
|
||||
const idx = routes.findIndex((r) => r.key === useRouteStore.getState().current);
|
||||
updateIndicator(idx);
|
||||
};
|
||||
|
||||
document.addEventListener("pointermove", onMove);
|
||||
document.addEventListener("pointerup", onUp);
|
||||
return () => {
|
||||
document.removeEventListener("pointermove", onMove);
|
||||
document.removeEventListener("pointerup", onUp);
|
||||
};
|
||||
}, [navigate, updateIndicator, isDefault]);
|
||||
|
||||
const handleNavPointerDown = useCallback(
|
||||
(e: React.PointerEvent) => {
|
||||
if (e.button !== 0) return;
|
||||
const nav = navRef.current;
|
||||
if (!nav) return;
|
||||
const btn = btnRefs.current[currentIdx];
|
||||
if (!btn) return;
|
||||
const navRect = nav.getBoundingClientRect();
|
||||
const btnRect = btn.getBoundingClientRect();
|
||||
|
||||
isDragging.current = true;
|
||||
hasDragged.current = false;
|
||||
dragStartX.current = e.clientX;
|
||||
dragStartLeft.current = btnRect.left - navRect.left;
|
||||
dragWidth.current = btnRect.width;
|
||||
},
|
||||
[currentIdx],
|
||||
);
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
@@ -20,24 +135,118 @@ export function TitleBar({
|
||||
appWindow.startDragging();
|
||||
};
|
||||
|
||||
const handleBtnClick = useCallback(
|
||||
(key: string) => {
|
||||
if (hasDragged.current) {
|
||||
hasDragged.current = false;
|
||||
return;
|
||||
}
|
||||
navigate(key as any);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="titlebar fixed top-0 left-0 right-0 h-[40px] flex items-center justify-between z-[100] pointer-events-auto"
|
||||
className="titlebar fixed top-0 left-0 right-0 h-[40px] flex items-center z-[100] pointer-events-auto"
|
||||
onMouseDown={handleMouseDown}
|
||||
style={{
|
||||
background: "rgba(255, 255, 255, 0.1)",
|
||||
backdropFilter: "blur(12px) saturate(180%)",
|
||||
WebkitBackdropFilter: "blur(12px) saturate(180%)",
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
|
||||
background: "var(--titlebar-bg)",
|
||||
backdropFilter: "blur(16px)",
|
||||
WebkitBackdropFilter: "blur(16px)",
|
||||
borderBottom: "1px solid var(--titlebar-border)",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<div className="flex-1" />
|
||||
<WindowControls
|
||||
showMinimize={showMinimize}
|
||||
showMaximize={showMaximize}
|
||||
showClose={showClose}
|
||||
/>
|
||||
{/* 左侧区域：返回按钮 + 品牌文字 */}
|
||||
<div className="flex items-center pl-3 shrink-0 relative z-10">
|
||||
{/* 返回按钮：sub 模式显示 */}
|
||||
<div
|
||||
data-no-drag
|
||||
className="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
|
||||
style={{
|
||||
width: isSub ? 68 : 0,
|
||||
opacity: isSub ? 1 : 0,
|
||||
marginRight: isSub ? 8 : 0,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={goBack}
|
||||
className="flex items-center gap-1.5 px-2 py-1 rounded-md transition-colors hover:bg-black/5 dark:hover:bg-white/10 text-foreground/60 hover:text-foreground whitespace-nowrap"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M10 3L5 8L10 13" />
|
||||
</svg>
|
||||
<span className="text-[13px] font-medium">返回</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className="text-sm font-semibold tracking-wide text-foreground/80 transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] whitespace-nowrap"
|
||||
>
|
||||
Koring Launcher
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 中间区域：胶囊菜单，绝对定位居中 */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 flex justify-center transition-opacity duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
|
||||
style={{
|
||||
opacity: isDefault ? 1 : 0,
|
||||
pointerEvents: isDefault ? "auto" : "none",
|
||||
}}
|
||||
>
|
||||
{isDefault && (
|
||||
<div
|
||||
ref={navRef}
|
||||
className="relative flex items-center"
|
||||
data-no-drag
|
||||
onPointerDown={handleNavPointerDown}
|
||||
style={{ touchAction: "none" }}
|
||||
>
|
||||
<div
|
||||
className="absolute h-[28px] rounded-full"
|
||||
style={{
|
||||
left: indicator.left,
|
||||
width: indicator.width,
|
||||
background: "var(--indicator-bg)",
|
||||
boxShadow: "var(--indicator-shadow)",
|
||||
transition: isDragging.current
|
||||
? "none"
|
||||
: "left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{routes.map((r, i) => {
|
||||
const active = current === r.key;
|
||||
return (
|
||||
<button
|
||||
key={r.key}
|
||||
ref={(el) => { btnRefs.current[i] = el; }}
|
||||
onClick={() => handleBtnClick(r.key)}
|
||||
className={[
|
||||
"relative z-10 px-4 py-[5px] text-[13px] font-medium rounded-full transition-colors duration-200 cursor-default",
|
||||
active
|
||||
? "text-foreground"
|
||||
: "text-foreground/40 hover:text-foreground/60",
|
||||
].join(" ")}
|
||||
>
|
||||
{r.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧：窗口控制 */}
|
||||
<div className="flex items-center shrink-0 justify-end ml-auto relative z-10">
|
||||
<WindowControls
|
||||
showMinimize={showMinimize}
|
||||
showMaximize={showMaximize}
|
||||
showClose={showClose}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Empty({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty"
|
||||
className={cn(
|
||||
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-header"
|
||||
className={cn("flex max-w-sm flex-col items-center gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const emptyMediaVariants = cva(
|
||||
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function EmptyMedia({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-icon"
|
||||
data-variant={variant}
|
||||
className={cn(emptyMediaVariants({ variant, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-title"
|
||||
className={cn(
|
||||
"font-heading text-sm font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-description"
|
||||
className={cn(
|
||||
"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="empty-content"
|
||||
className={cn(
|
||||
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Empty,
|
||||
EmptyHeader,
|
||||
EmptyTitle,
|
||||
EmptyDescription,
|
||||
EmptyContent,
|
||||
EmptyMedia,
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
export function useTheme() {
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
const apply = (dark: boolean) => {
|
||||
document.documentElement.classList.toggle("dark", dark);
|
||||
};
|
||||
|
||||
// 初始应用
|
||||
apply(mq.matches);
|
||||
|
||||
// 监听系统切换
|
||||
const handler = (e: MediaQueryListEvent) => apply(e.matches);
|
||||
mq.addEventListener("change", handler);
|
||||
return () => mq.removeEventListener("change", handler);
|
||||
}, []);
|
||||
}
|
||||
+57
-1
@@ -90,6 +90,12 @@
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
|
||||
/* 标题栏 & 导航 - 亮色 */
|
||||
--titlebar-bg: rgba(255, 255, 255, 0.5);
|
||||
--titlebar-border: rgba(0, 0, 0, 0.08);
|
||||
--indicator-bg: rgba(0, 0, 0, 0.1);
|
||||
--indicator-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -124,6 +130,12 @@
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
|
||||
/* 标题栏 & 导航 - 暗色 */
|
||||
--titlebar-bg: rgba(0, 0, 0, 0.2);
|
||||
--titlebar-border: rgba(255, 255, 255, 0.08);
|
||||
--indicator-bg: rgba(255, 255, 255, 0.15);
|
||||
--indicator-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -136,4 +148,48 @@
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
View Transitions — 页面切换动效
|
||||
============================================ */
|
||||
|
||||
/* root 转场：禁用，只让内容区参与动画 */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* 内容区转场：前进方向 */
|
||||
::view-transition-old(content) {
|
||||
animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) both page-out-forward;
|
||||
}
|
||||
::view-transition-new(content) {
|
||||
animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both page-in-forward;
|
||||
}
|
||||
|
||||
/* 内容区转场：后退方向 */
|
||||
:root[data-transition-dir="backward"] ::view-transition-old(content) {
|
||||
animation-name: page-out-backward;
|
||||
}
|
||||
:root[data-transition-dir="backward"] ::view-transition-new(content) {
|
||||
animation-name: page-in-backward;
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
|
||||
@keyframes page-out-forward {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(0.97); }
|
||||
}
|
||||
@keyframes page-in-forward {
|
||||
from { opacity: 0; transform: scale(0.97); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes page-out-backward {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(0.97); }
|
||||
}
|
||||
@keyframes page-in-backward {
|
||||
from { opacity: 0; transform: scale(0.97); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@@ -21,7 +21,10 @@ export function RootLayout({
|
||||
<BackgroundLayer />
|
||||
|
||||
{/* Layer 1: Content */}
|
||||
<div className="absolute z-[1] left-0 right-0 bottom-0 top-[40px] overflow-auto">
|
||||
<div
|
||||
className="absolute z-[1] left-0 right-0 bottom-0 top-[40px] overflow-auto"
|
||||
style={{ viewTransitionName: "content" } as React.CSSProperties}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface HomeProps {
|
||||
onNavigate: (page: "debug") => void;
|
||||
}
|
||||
|
||||
export function Home({ onNavigate }: HomeProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Koring Launcher</h1>
|
||||
<p className="text-muted-foreground mb-6">Core 调试模式</p>
|
||||
<Button variant="outline" onClick={() => onNavigate("debug")}>
|
||||
Debug
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export function Home() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 text-foreground">Koring Launcher</h1>
|
||||
<p className="text-muted-foreground">欢迎使用 Koring 启动器</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export function PlayLink() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 text-foreground">联机</h1>
|
||||
<p className="text-muted-foreground">多人联机与服务器</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,7 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
|
||||
|
||||
interface DebugProps {
|
||||
onNavigate: (page: "home") => void;
|
||||
}
|
||||
|
||||
export function Debug({ onNavigate }: DebugProps) {
|
||||
export function Debug() {
|
||||
const openSplash = async () => {
|
||||
try {
|
||||
const existing = await WebviewWindow.getByLabel("splashscreen");
|
||||
@@ -52,16 +48,11 @@ export function Debug({ onNavigate }: DebugProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-2xl font-bold mb-6">Debug</h1>
|
||||
<h1 className="text-2xl font-bold mb-6 text-foreground">Debug</h1>
|
||||
<div className="flex gap-3">
|
||||
<Button onClick={openSplash}>Open Splash</Button>
|
||||
<Button variant="destructive" onClick={closeSplash}>Close Splash</Button>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<Button variant="ghost" onClick={() => onNavigate("home")}>
|
||||
Back to Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useRouteStore } from "@/stores/routeStore";
|
||||
|
||||
export function Setting() {
|
||||
const navigate = useRouteStore((s) => s.navigate);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 text-foreground">设置</h1>
|
||||
<p className="text-muted-foreground mb-6">启动器设置与配置</p>
|
||||
<div className="flex gap-3 justify-center">
|
||||
<Button variant="outline" onClick={() => navigate("debug")}>调试</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export function Store() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 text-foreground">资源</h1>
|
||||
<p className="text-muted-foreground">Mod / 整合包 / 材质包</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export function Today() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 text-foreground">资讯</h1>
|
||||
<p className="text-muted-foreground">最新资讯与动态</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { create } from "zustand";
|
||||
|
||||
export type RouteKey = "home" | "store" | "today" | "play-link" | "setting" | "debug";
|
||||
|
||||
export type TitleBarMode = "default" | "sub" | "window";
|
||||
|
||||
export type TransitionDirection = "forward" | "backward";
|
||||
|
||||
interface RouteItem {
|
||||
key: RouteKey;
|
||||
label: string;
|
||||
path: string;
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
export const routes: RouteItem[] = [
|
||||
{ key: "home", label: "首页", path: "/home" },
|
||||
{ key: "store", label: "资源", path: "/store" },
|
||||
{ key: "today", label: "资讯", path: "/today" },
|
||||
{ key: "play-link", label: "联机", path: "/play-link" },
|
||||
{ key: "setting", label: "设置", path: "/setting" },
|
||||
];
|
||||
|
||||
export const allRoutes: RouteItem[] = [
|
||||
...routes,
|
||||
{ key: "debug", label: "调试", path: "/debug", hidden: true },
|
||||
];
|
||||
|
||||
const parentMap: Partial<Record<RouteKey, RouteKey>> = {
|
||||
debug: "setting",
|
||||
};
|
||||
|
||||
function startTransition(dir: TransitionDirection, callback: () => void) {
|
||||
document.documentElement.dataset.transitionDir = dir;
|
||||
if (document.startViewTransition) {
|
||||
document.startViewTransition(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
interface RouteState {
|
||||
current: RouteKey;
|
||||
titleBarMode: TitleBarMode;
|
||||
direction: TransitionDirection;
|
||||
navigate: (key: RouteKey) => void;
|
||||
setTitleBarMode: (mode: TitleBarMode) => void;
|
||||
goBack: () => void;
|
||||
}
|
||||
|
||||
export const useRouteStore = create<RouteState>((set, get) => ({
|
||||
current: "home",
|
||||
titleBarMode: "default",
|
||||
direction: "forward",
|
||||
navigate: (key) => {
|
||||
const parent = parentMap[key];
|
||||
const isForward = parent !== undefined;
|
||||
startTransition("forward", () => {
|
||||
set({
|
||||
current: key,
|
||||
titleBarMode: isForward ? "sub" : "default",
|
||||
direction: "forward",
|
||||
});
|
||||
});
|
||||
},
|
||||
setTitleBarMode: (mode) => set({ titleBarMode: mode }),
|
||||
goBack: () => {
|
||||
const { current } = get();
|
||||
const parent = parentMap[current];
|
||||
if (parent) {
|
||||
startTransition("backward", () => {
|
||||
set({
|
||||
current: parent,
|
||||
titleBarMode: "default",
|
||||
direction: "backward",
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user