skillshare-ui-website-style
Installation
SKILL.md
Enforce the skillshare design system across the two frontends. $ARGUMENTS is the file or area being worked on.
Companion skill: For UX design decisions beyond token/component usage — layout strategy, information hierarchy, interaction patterns, micro-copy, or when designing a new page from scratch — also invoke /ui-ux-pro-max for higher-level design guidance. This skill handles what components and tokens to use; /ui-ux-pro-max handles how to design the experience.
The project has two distinct design systems sharing semantic color names but with different visual treatments:
| Aspect | UI Dashboard (ui/) |
Website (website/) |
|---|---|---|
| Stack | React 19 + Vite + Tailwind CSS v4 | Docusaurus 3 + custom CSS |
| Font body | DM Sans | IBM Plex Sans |
| Font heading | DM Sans | Inter |
| Font mono | SFMono-Regular, Menlo | JetBrains Mono |
| Border-radius | Clean: 4px/8px/12px/pill |
Wobbly: 255px 15px 225px 15px / ... |
| Shadows | Subtle blur: 0 1px 3px rgba(...) |
Hard offset: 4px 4px 0px 0px #2d2d2d |
| Background | Flat #f7f6f3 |
Dot grid on #fdfbf7 |
| Philosophy | skillshare-inspired minimal | Hand-drawn sketchy organic |