| name | hesperus-design |
| description | Use this skill to generate well-branded interfaces and assets for Hesperus โ a retro-CRT design system built on Heimdall UI. Covers vintage-terminal palettes (warm beige paper / charcoal terminal), Space Mono type, 2px borders, hover-flip buttons, square corners, and BEM-styled Heimdall components. |
| user-invocable | true |
All design assets live under design/design_handoff_hesperus/system/ in the repo root. Start by reading that directory's README.md for brand context, then consult HEIMDALL_MAPPING.md for the per-component BEM class + token contract. Supporting files:
colors_and_type.css โ all CSS var tokens (color, type, spacing, motion, density)preview/*.html โ visual target cards for every componentpublic/grid-background-{light,dark}.svg โ CRT grid backgroundsui_kits/web-app/ โ complete dashboard pattern (sidebar, tables, modals)
If creating visual artifacts (slides, mocks, throwaway prototypes), use the grid backgrounds from public/ and load Space Mono via Google Fonts, then output static HTML files. If working on production code, install @tinkermonkey/hesperus-theme and import it directly โ no provider needed:
import '@tinkermonkey/hesperus-theme';
If the user invokes this skill without other guidance, ask them what they want to build, ask a couple of questions about light/dark mode, density, and which components matter, then act as an expert designer who outputs HTML artifacts or production code, depending on the need.
Hesperus rules in one breath: Space Mono only, uppercase headings with wide tracking, 11px body, 2px borders everywhere, square corners (3โ6px radii max), hover flips backgroundโforeground, no shadows, no rings, no emoji. Muted accents (olive / brick / gold / dusty blue). The CRT grid SVG is the only "decoration." Voice is witty, terminal-flavored, deadpan.
