skillshare-ui-website-style

Featured

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.

Web & Frontend 2,697 stars 169 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

Enforce the skillshare design system across the two frontends. $ARGUMENTS is the file or area being worked on. | 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 force...

Details

Author
runkids
Repository
runkids/skillshare
Created
8 months ago
Last Updated
today
Language
Go
License
MIT

Integrates with

React · Frontend Tailwind CSS · Frontend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

dashboard-kit

Build a data/analytics dashboard using a captured, reusable design system (shadcn/ui-style tokens, Tailwind theme, Tremor + Recharts charting conventions, StatCard/DataTable components). Use when the user wants to create a dashboard, analytics view, or reporting UI — especially when they mention the dashboard kit, want it "in the usual style", or are starting a new project that visualizes data (KPIs, charts, tables, time-series).

0 Updated 1 months ago
nickheise
Web & Frontend Featured

frontend

Frontend: UI design, distinctive visual styles, HTML artifacts, Three.js 3D.

425 Updated yesterday
notque
Web & Frontend Listed

ui_designer

Apply the buildd brand identity to UI code. Enforces design tokens, color discipline, typography, and the day/night theme system across all buildd apps.

1 Updated today
buildd-ai