| name | videorc-design |
| description | Videorc's UI design language — a Raycast-style dark glass command-palette aesthetic, built exclusively from shadcn/ui components. Use whenever building, styling, reviewing, or planning ANY Videorc UI (new components, screens, dialogs, lists, toolbars), when the user mentions "our design", "the design skill", "Raycast style", or asks how something should look. |
Videorc Design Language
The single source of truth for how Videorc looks and feels. Every UI task follows this skill. The reference is the Videorc logo: a glossy BLACK-GLASS orb with chrome/silver detail and one LED-red accent — expressed as a Raycast-style command surface: floating translucent black-glass panels, crisp chrome typography, muted gray metadata, hairline structure, vivid rounded-square icons, and keyboard-first affordances. Light mode is the porcelain-white twin of the same structure.
Status: shipped. The renderer was migrated to this language 2026-06-24 (17 slices) and retuned to the black-glass palette 2026-07-02 (styles.css is the implementation of the token table below; main-side data-URL windows mirror it via src/main/window-palette.ts). Do not restyle screens ad hoc — fix tokens, not components.
Hard rules
- shadcn/ui only. Every interface element is a shadcn/ui component (or a composition of them), installed and customized per the
shadcn skill (.agents/skills/shadcn/, with reference docs in ~/.claude/skills/shadcn/). No other component libraries, no hand-rolled widgets when a shadcn primitive exists. Tailwind utilities + shadcn CSS variables carry the theming.
- Dark glass first, light glass supported. Dark is the default and the reference expression of this language. Light mode STAYS as a first-class twin: identical structure, patterns, spacing, and rules, with the light token column below — never a separately-designed theme. Both themes remain reachable via the existing theme toggle.
- Keyboard-first. Every primary action has a visible shortcut, rendered as key chips (see Patterns). Footers advertise the current context's actions.
