skillshare-ui-website-style
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, components, or patterns to use. This skill covers color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations, and anti-patterns for both frontends. Even if the user
npx skills add runkids/skillshare --skill skillshare-ui-website-style --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
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-
- UI Dashboard (ui/)
- Design Tokens
- Color Tokens (Tailwind classes)
- Typography
- Page Structure (mandatory order)
- Component Library
- Stats Patterns (choose one)
- Status Patterns (choose one per element)
- List Patterns
- Button Variants
- Separator
- Animations
- Keyboard Shortcuts
- Accessibility
What does the skillshare-ui-website-style skill do?
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, components, or patterns to use. This skill covers color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations, and anti-patterns for both frontends. Even if the user
How do I install it?
Run `npx skills add runkids/skillshare --skill skillshare-ui-website-style --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From runkids/skillshare, a repository with 2,519 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.