ui-design-styling_skill

Overview

This skill designs and styles UI components for ryOS using four distinct operating system themes: System 7, macOS Aqua, Windows XP, and Windows 98. It provides theme-aware utilities, CSS variables, Tailwind-friendly classes, and component patterns to build consistent, retro-accurate interfaces. Use it to apply visual rules, fonts, shadows, and interaction styles that match each OS aesthetic.

How this skill works

The skill exposes a small set of conventions and utilities: a ThemeContext hook (useTheme) for runtime theme detection, a cn() helper for conditional class merging, OS-aware Tailwind classes (bg-os-*, border-os-*, rounded-os, etc.), and CSS variables for colors and metrics. Theme-specific snippets and component patterns demonstrate how to compose panels, buttons, title bars, and 3D bevels that switch styles based on osTheme.

When to use it

• Creating new UI components that must match one of the four ryOS themes
• Styling windows, dialogs, title bars, buttons, and panels with retro OS aesthetics
• Implementing visual effects like shadows, glassmorphism, or traffic-light controls
• Building theme-adaptive components that switch appearance at runtime
• Ensuring consistent fonts, selection colors, and metrics across themes

Best practices

• Always check for existing patterns before adding new styles
• Use cn() to merge conditional classes and keep JSX readable
• Prefer CSS variables (--os-*) over hardcoded color or metric values
• Use OS-aware utility classes (bg-os-*, border-os-*, rounded-os) where available
• Test components in all four themes (system7, macosx, xp, win98) to catch layout and contrast issues
• Use ThemeContext (useTheme) for complex conditional rendering rather than scattering theme logic

Example use cases

• A theme-adaptive panel that uses bg-os-window-bg, border-os-window and rounded-os to render properly in every theme
• A set of buttons: macOS aqua glossy buttons, a Win98 3D button, a System 7 square button, and an XP rounded button with blue gradients
• A custom Dial, VolumeBar, or RightClickMenu component that respects font stacks and selection colors per theme
• Applying transparent or notitlebar window materials for media components while preserving theme metrics and shadows
• Implementing a title bar that renders traffic lights on macOS or a gradient title bar on Windows XP