Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →runkids/skillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/).
6 of 23 test cases passed with the skill.
Tokens, turns and time describe resource use, not a dollar price.
Lift withheld: 6 comparable cases; this report requires 8.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/1/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
When overriding a specific property like `min-height` on an element that has an `.ss-r` class from `@layer components`, how should the Tailwind utility class be written so it takes precedence?
| Checked | Without skill | With skill |
|---|---|---|
| Uses Tailwind important prefix !min-h-[56px] to override component layer properties | Missed | Passed |
The instructions your model reads when the skill loads.
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/)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.
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.
.ss-only-clean / .ss-only-playful (Dashboard shows a count strip in Clean and a pin board in Playful).Defined per look at the top of ui/src/components.css. ui/src/index.css exposes them to Tailwind through @theme inline, so text-ink-2, bg-surface, border-line all follow the active look.
test cases passed with the skill
More skills from the same source and nearby in the registry, with their headline benchmark lift.