Skillshare UI Website Style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website...
Install
npx skills add runkids/skillshare --skill skillshare-ui-website-style -g -a claude-code -y- Repository
- runkids/skillshare2.9k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard, fix visual bugs in either frontend, or need to know which design tokens, ss-* classes, components, or patterns to use. Covers the two dashboard styles (Clean / Playful) in light and dark, design tokens, the ss-* class system, component API, page structure, accessibility, keyboard shortcuts, and anti-patterns. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.
Enforce the skillshare design system across the two frontends. $ARGUMENTS is the file or area being worked on.
Before acting, run python3 scripts/ai-context.py frontend. That topic and the CSS/source files it identifies are the source of truth; this skill retains the component catalog and visual QA checklist.
| Aspect | UI Dashboard (ui/) | Website (website/) |
|---|---|---|
| Stack | React 19 + Vite + Tailwind CSS v4 | Docusaurus 3 + custom CSS |
| Source of truth | ui/src/components.css (tokens + ss-* classes), ui/src/index.css (Tailwind mapping) | website/src/css/custom.css (docs), website/src/pages/*.module.css (homepage, features) |
| Looks | Two styles, Clean and Playful, each in light and dark | Docs: clean. Homepage: hand-drawn string board |
This file names tokens and classes and says when to use them. It does not copy their values. Colours, radii, fonts and shadows change; read them from the CSS when you need one.
UI Dashboard (ui/)
Reference pages: ui/src/pages/TargetsPage.tsx (list page), ui/src/pages/HubPage.tsx (tabs), ui/src/pages/ResourcesPage.tsx (list + tiles + bulk toolbar).
Design rules and the reasoning behind them:
references/STYLE_GUIDE.md.
Two styles, two modes
Style and mode are independent, so every screen has four looks.
| Axis | Values | How it is set |
|---|---|---|
| Style | Clean, Playful (default) | html[data-theme="playful"]; attribute absent = Clean |
| Mode | light, dark, system | html.dark |
Set by ui/src/context/ThemeContext.tsx, switched in ThemePopover.tsx. ?theme=clean|playful|dark|light in the URL forces one, which is handy for screenshots.
All four looks come from CSS variables alone. A page that uses only tokens and ss-* classes gets all four for free; a hardcoded colour, radius or shadow breaks three of them.
