Individual skill

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, 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.

.skillshare/skills/skillshare-ui-website-style/SKILL.md

Read pinned source

Source commit 45acab5fd5d0bcd8e7d272023a21e0c619094089

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 2,961
Repository last updated: Nov 7, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

cli Repository topic
codex Repository topic
skills Repository topic
skillshare Repository topic
cross-machine-sync Repository topic
claude-code Repository topic
openclaw Repository topic
skills-audit Repository topic
skills-manager Repository topic
ai-agents Repository topic
design Derived category
engineering Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 18,103 bytes
SKILL.mdcore · 18,103 bytes
SKILL.mdcore · 18,103 bytes
SKILL.mdcore · 18,103 bytes
references/STYLE_GUIDE.mddoc · 8,630 bytes

Read excerpt


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.

---