·ui-design-styling
*

ui-design-styling

Design and style UI components for ryOS following the 4 OS themes (System 7, macOS Aqua, Windows XP, Windows 98). Use when creating UI components, styling elements, working with themes, adding visual effects, or implementing retro OS aesthetics.

26Installs·1Trend·@ryokun6

Installation

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

How to Install ui-design-styling

Quickly install ui-design-styling AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/ryokun6/ryos --skill ui-design-styling
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: ryokun6/ryos.

SKILL.md

View raw

| 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 |

| 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) |

| 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 |

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/ryokun6/ryos --skill ui-design-styling
Category
*Creative Media
Verified
First Seen
2026-02-25
Updated
2026-03-10

Browse more skills from ryokun6/ryos

Quick answers

What is ui-design-styling?

Design and style UI components for ryOS following the 4 OS themes (System 7, macOS Aqua, Windows XP, Windows 98). Use when creating UI components, styling elements, working with themes, adding visual effects, or implementing retro OS aesthetics. Source: ryokun6/ryos.

How do I install ui-design-styling?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/ryokun6/ryos --skill ui-design-styling Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/ryokun6/ryos

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-25