ui-design-styling

仓库: ryokun6/ryos
安装量: 38
排名: #18515

安装

npx skills add https://github.com/ryokun6/ryos --skill ui-design-styling

ryOS UI Design & Styling The 4 Themes Theme ID Key Traits System 7 system7 Black/white, square corners, Chicago font, dotted patterns macOS Aqua macosx Pinstripes, traffic lights, glossy buttons, Lucida Grande Windows XP xp Blue gradients, Luna style, soft shadows, Tahoma Windows 98 win98 Gray 3D bevels, classic blue title bars, MS Sans Serif Essential Utilities import { cn } from "@/lib/utils" ; import { useTheme } from "@/contexts/ThemeContext" ; const { osTheme } = useTheme ( ) ; // Theme-conditional classes className = { cn ( "base-classes" , osTheme === "macosx" && "aqua-specific" , osTheme === "system7" && "system7-specific" ) } OS-Aware Tailwind Classes className = "bg-os-window-bg" // Window background className = "border-os-window" // Window border className = "rounded-os" // Theme-appropriate radius className = "font-os-ui" // UI font stack className = "font-os-mono" // Monospace font className = "shadow-os-window" // Window shadow className = "h-os-titlebar" // Title bar height CSS Variables Access via var(--name) : --os-font-ui , --os-font-mono --os-color-window-bg , --os-color-window-border --os-color-titlebar-active-bg , --os-color-titlebar-inactive-bg --os-color-button-face , --os-color-button-highlight , --os-color-button-shadow --os-color-selection-bg , --os-color-selection-text --os-metrics-border-width , --os-metrics-radius --os-metrics-titlebar-height , --os-metrics-menubar-height Theme-Specific Styling System 7 < div className = { cn ( "border-2 border-black bg-white rounded-none" , "font-chicago text-black" , "shadow-[2px_2px_0px_0px_rgba(0,0,0,0.5)]" ) }

macOS Aqua < div className = { cn ( "bg-[#E8E8E8] border border-black/30" , "rounded-lg font-lucida-grande" , "shadow-[0_3px_10px_rgba(0,0,0,0.3)]" ) }

< button className = " aqua-button primary "

OK </ button

</ div

Windows XP < div className = { cn ( "bg-[#ECE9D8] border-[3px] border-[#0054E3]" , "rounded-[0.5rem] font-tahoma" , "shadow-[0_4px_8px_rgba(0,0,0,0.25)]" ) }

Windows 98 < div className = { cn ( "bg-[#C0C0C0] border-2 rounded-none font-ms-sans-serif" , "border-t-white border-l-white" , "border-b-[#808080] border-r-[#808080]" ) }

Theme Specifications System 7 ( system7 ) Property Value Fonts Chicago, Monaco (mono) Window BG

FFFFFF

Border 2px solid #000000 Radius 0px Selection Black bg, white text Shadow 2px 2px 0px 0px rgba(0,0,0,0.5) macOS Aqua ( macosx ) Property Value Fonts Lucida Grande, Monaco (mono) Window BG

E8E8E8

Border 0.5px solid rgba(0,0,0,0.3) Radius 0.45rem (8px) Selection

3875D7

bg, white text Shadow 0 3px 10px rgba(0,0,0,0.3) Traffic Lights Red

FF5F57

, Yellow

FEBC2E

, Green

28C840

Windows XP ( xp ) Property Value Fonts Tahoma, Consolas (mono) Window BG

ECE9D8

Border 3px solid #0054E3 Radius 0.5rem (8px) Selection

316AC5

bg, white text Shadow 0 4px 8px rgba(0,0,0,0.25) Title Bar Blue gradient

0A246A

→

0054E3

Windows 98 ( win98 ) Property Value Fonts MS Sans Serif, Fixedsys (mono) Window BG

C0C0C0

Raised Bevel border: 2px solid; border-color: #FFF #808080 #808080 #FFF Sunken Bevel border: 2px solid; border-color: #808080 #FFF #FFF #808080 Radius 0px Selection

000080

bg, white text Title Bar Gradient

000080

→

1084D0

Component Patterns Theme-Adaptive Button import { Button } from "@/components/ui/button" ; < Button variant = " default "

Standard </ Button

< Button variant = " retro "

Retro Style </ Button

< Button variant = " aqua "

Aqua (macOS) </ Button

Aqua Buttons (CSS classes) < button className = " aqua-button "

Default </ button

< button className = " aqua-button primary "

Primary (pulsing) </ button

< button className = " aqua-button secondary "

Secondary </ button

Win98 3D Button < button className = { cn ( "px-4 py-1 bg-[#C0C0C0]" , "border-2 border-t-white border-l-white" , "border-b-[#808080] border-r-[#808080]" , "active:border-t-[#808080] active:border-l-[#808080]" , "active:border-b-white active:border-r-white" ) }

Glassmorphism < div className = " bg-white/80 backdrop-blur-lg rounded-lg "

< div className = " bg-black/40 backdrop-blur-xl text-white "

Theme-Aware Panel < div className = { cn ( "p-4 bg-os-window-bg border-os-window rounded-os" , osTheme === "system7" && "border-2 border-black" , osTheme === "macosx" && "shadow-md" , osTheme === "win98" && "border-2 border-t-white border-l-white border-b-[#808080] border-r-[#808080]" ) }

Custom Components Component Usage AudioBars Frequency visualization PlaybackBars Equalizer animation VolumeBar Horizontal volume indicator Dial Circular dial control (sm/md/lg) RightClickMenu Context menu wrapper Dial Example import { Dial } from "@/components/ui/dial" ; < Dial value = { 50 } onChange = { setValue } size = " md " label = " Volume " /> Window Materials Mode Use Case default Standard opaque windows transparent Semi-transparent (iPod, Photo Booth) notitlebar Immersive with floating controls (Videos) Best Practices Always search for existing patterns before creating new styles or components Always use cn() for conditional class merging Use OS-aware classes ( bg-os- , border-os- ) when available Check theme with useTheme() for complex conditional rendering Prefer CSS variables over hardcoded colors Test all 4 themes when adding styled components x

← 返回排行榜