ui-design-styling
Installation
SKILL.md
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();
Related skills
More from ryokun6/ryos
update-docs
Update ryOS documentation by analyzing the codebase and syncing docs with current implementation. Use when updating docs, syncing documentation, or when docs are outdated.
27localize
Localize ryOS apps and components by extracting hardcoded strings, replacing with translation keys, and syncing across languages. Use when localizing an app, adding i18n support, translating UI text, or working with translation files.
26create-ryos-app
Create new applications for ryOS following established patterns and conventions. Use when building a new app, adding an application to the desktop, creating app components, or scaffolding app structures.
24