Skillshare skillshare-ui-website-style

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

/ui-ux-pro-max

The project has two distinct design systems sharing semantic color names but with different visual treatments:

ui/

website/

4px

8px

12px

255px 15px 225px 15px / ...

0 1px 3px rgba(...)

4px 4px 0px 0px #2d2d2d

#f7f6f3

#fdfbf7

UI Dashboard (

ui/

)

Reference implementation:

ui/src/pages/LogPage.tsx

For the full human-readable style guide (design philosophy, visual rules, anti-patterns), see

references/STYLE_GUIDE.md

bundled with this skill.

Design Tokens

Defined in

ui/src/index.css

ui/src/design.ts

// ui/src/design.ts
import { radius, shadows, palette } from '../design';

radius.sm   // '4px'  — badges, chips
radius.md   // '8px'  — cards, containers
radius.lg   // '12px' — modals, panels
radius.btn  // '9999px' — pill buttons (skillshare style)
radius.full // '9999px' — avatars

shadows.sm / .md / .lg / .hover / .active / .accent / .blue
palette.accent / .info / .success / .warning / .danger

Color Tokens (Tailwind classes)

text-pencil

text-pencil-light

text-muted-dark

text-success

text-warning

text-danger

text-blue

bg-surface

bg-paper

border-muted

Rule: Max one accent color per visual region. Don't double up — if a row has a colored dot, skip the colored badge (or vice versa).

Typography

• Body: DM Sans (via

  --font-hand

  )

• font-mono

  : timestamps, file paths, durations, code, hashes

• uppercase tracking-wider

  : command names, stat labels
• Size:

  text-2xl

  >

  text-xl

  >

  text-base

  >

  text-sm

  >

  text-xs

Page Structure (mandatory order)

Every page follows this layout:

<div className="space-y-5 animate-fade-in">
  <PageHeader icon={<Icon />} title="..." subtitle="..." actions={<>...</>} />

  {/* Toolbar: tabs + filters */}
  <div className="flex flex-wrap items-end gap-3">
    <SegmentedControl ... />
    <Select ... />
  </div>

  {/* Summary line or stat cards */}
  <SummaryLine ... />

  {/* Content: table, card list, or card grid */}
  {empty ? <EmptyState ... /> : <ContentArea />}

  {/* Dialogs (rendered at bottom, portal via DialogShell) */}
  <ConfirmDialog ... />
</div>

Component Library

Card

Card.tsx

variant="default|accent|outlined"

hover

overflow

tilt?

padding="none|sm|md"

Button

Button.tsx

variant="primary|secondary|danger|ghost|link"

size="sm|md|lg"

loading?

Badge

Badge.tsx

variant="default|success|warning|danger|info|accent"

size="sm|md"

dot?

PageHeader

PageHeader.tsx

icon

title

subtitle?

actions?

backTo?

EmptyState

EmptyState.tsx

icon

title

description?

action?

ConfirmDialog

ConfirmDialog.tsx

open

onConfirm

onCancel

title

message

variant="default|danger"

DialogShell

DialogShell.tsx

open

onClose

maxWidth

preventClose

Input

Input.tsx

label?

Textarea

Input.tsx

label?

Select

Select.tsx

label?

value

onChange

options[]

size="sm|md"

Checkbox

Checkbox.tsx

label

checked

onChange

indeterminate?

disabled?

size="sm|md"

Spinner

Spinner.tsx

size="sm|md|lg"

<RefreshCw className="animate-spin">

Tooltip

Tooltip.tsx

content: string

side="top|bottom"

SegmentedControl

SegmentedControl.tsx

value

onChange

options[]

connected?

colorFn?

Pagination

Pagination.tsx

page

totalPages

onPageChange

rangeText?

pageSize?

StatusBadge

StatusBadge.tsx

Skeleton

PageSkeleton

Skeleton.tsx

Toast

useToast

Toast.tsx

toast(message, 'success'|'error')

FilterTagInput

FilterTagInput.tsx

IconButton

IconButton.tsx

aria-label

Stats Patterns (choose one)

"42 ops · 3 errors · last: 2m ago"

Status Patterns (choose one per element)

w-2 h-2 rounded-full

<Badge variant="...">

List Patterns

Button Variants

danger

secondary

ghost

primary

Separator

Always:

border-dashed border-pencil-light/30

/20

/40

Animations

rotate(+-0.15deg)

:nth-child(odd/even)

rotate(+-0.3deg)

transition-all duration-150

animate-fade-in

Keyboard Shortcuts

Registered in

KeyboardShortcutsModal.tsx

useGlobalShortcuts.ts

• ?

  — shortcuts modal

• /

  — focus search

• g d/s/t/l

  — go to Dashboard/Skills/Targets/Log

• r

  — refresh page
• Only fire when no

  <input>

  /

  <textarea>

  focused
• Chord timeout: 500ms
• New shortcuts must be added to

  KeyboardShortcutsModal

• Never override browser-native shortcuts (

  Cmd+C

  , etc.)

Accessibility

focus:ring-2 focus:ring-blue/20

aria-label

role="dialog"

aria-modal="true"

useFocusTrap

role="combobox"

aria-expanded

role="listbox/option"

Card Overflow Gotcha

Card.tsx

overflow-hidden

overflow

className="!overflow-visible"

Data Fetching Pattern

Pages use

@tanstack/react-query

const { data, isPending } = useQuery({
  queryKey: queryKeys.someKey(...),
  queryFn: () => api.someEndpoint(...),
  staleTime: staleTimes.someCategory,
});

• Query keys:

  ui/src/lib/queryKeys.ts

• API client:

  ui/src/api/client.ts

• App context:

  ui/src/context/AppContext.tsx

  provides

  { isProjectMode, projectRoot }

Website (

website/

)

Docusaurus with hand-drawn "sketchy organic" design in

website/src/css/custom.css

Key Differences from UI Dashboard

• Wobbly borders:

  border-radius: var(--radius-wobbly)

  (not clean px values)
• Hard shadows:

  4px 4px 0px 0px #2d2d2d

  (no blur)
• Dot grid bg:

  radial-gradient(var(--color-muted) 1px, transparent 1px)

  on body
• Post-it yellow:

  --color-postit: #fff9c4

  for highlights
• Dashed borders everywhere: navbar, sidebar, tables, pagination, code blocks
• Button hover:

  transform: translate(2px, 2px)

  + shadow shrinks (press-down feel)
• Links: wavy underline (

  text-decoration-style: wavy

  )
• Dark mode: amber/gold primary (

  #e8a84c

  ) instead of blue

CSS Variables

See

website/src/css/custom.css

• --radius-wobbly[-sm|-md|-btn]

  — hand-drawn border-radius

• --color-postit[-dark]

  — yellow highlight

• --shadow-md: 4px 4px 0px 0px #2d2d2d

  — hard offset

• --card-bg

  ,

  --card-border

  ,

  --install-bg

  — component-specific

Docusaurus Classes

• .button--primary

  — green bg, pencil border, hard shadow

• .button--secondary

  — dashed border, no fill

• .markdown h2

  — dashed bottom border

• .admonition

  — wobbly border-radius, left stripe

• .menu__link--active

  — post-it yellow background

• .target-badge

  — wobbly border for target grid
• Code blocks get

  box-shadow: 4px 4px 0px 0px #101827

Homepage Components (

website/src/pages/index.tsx

)

• CARD_ROTATIONS

  array for random hand-drawn tilt

• WavyDivider

  — SVG dashed wavy line between sections

• InstallTabs

  — tabbed install commands with copy button
• Hero has hand-drawn SVG connector + underline

Anti-Patterns (Both Systems)

border-l-*

/20

/40

border-pencil-light/30

window.confirm()

<ConfirmDialog>

<EmptyState>

design.ts

overflow-visible

overflow

overflow

flex-wrap

Checklist Before Submitting

• Uses existing components (Card, Badge, Button, etc.) — no custom markup for solved patterns
• Page follows PageHeader → Toolbar → Summary → Content structure
• Color tokens from Tailwind (

  text-pencil

  , not hardcoded

  #141312

  )
• Separator is

  border-dashed border-pencil-light/30

• Empty states use

  <EmptyState>

• Destructive actions use

  <ConfirmDialog>

• All icon buttons have

  aria-label

• New shortcuts registered in

  KeyboardShortcutsModal

• animate-fade-in

  on root container
• Dark mode works (check both themes)