Design system

Skill Xuan0629/shared-skills/design-system

One source. Every agent. Zero drift. | 跨 Agent 共享 Skill 管理系统 — 单一数据源，同步到 Claude Code / Codex / Hermes / OpenClaw

Install

npx -y skills add Xuan0629/shared-skills --skill design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.4 KB, as published. Nobody here has run it

Design System — Agent-Generated UI Consistency

Design Tokens

colors:
  primary: "hsl(0, 0%, 88%)"
  secondary: "hsl(0, 0%, 47%)"
  tertiary: "hsl(38, 70%, 60%)"
  neutral: "hsl(0, 0%, 4%)"
  surface:
    bg: "hsl(0, 0%, 4%)"
    card: "hsl(0, 0%, 8%)"
    sidebar: "hsl(0, 0%, 5%)"
    raised: "hsl(0, 0%, 11%)"
  semantic:
    red: "hsl(0, 65%, 55%)"
    orange: "hsl(30, 80%, 52%)"
    blue: "hsl(210, 60%, 55%)"
    green: "hsl(120, 40%, 50%)"
typography:
  body: {fontFamily: "system-ui, sans-serif", fontSize: "14px"}
  heading: {fontFamily: "system-ui, sans-serif", fontSize: "20px", weight: "600"}
  mono: {fontFamily: "ui-monospace, monospace", fontSize: "13px"}
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
spacing:
  xs: "4px" | sm: "8px" | md: "12px" | lg: "16px"
  xl: "24px" | xxl: "32px" | xxxl: "48px"
border:
  default: "hsl(0, 0%, 16%)"
  focus: "hsl(38, 70%, 55%)"

Rules for All Agents

When generating HTML/CSS/JS:

Use CSS custom properties matching the tokens — never inline styles
4.5:1 minimum contrast ratio for all text
Use predictable class naming (BEM or similar) — no auto-generated hash classes
Dark mode default, light mode via [data-theme="light"]
Responsive: mobile-first, sidebar collapses at 768px
Zero external dependencies — no webfont CDNs, no CSS frameworks
JS: diff-based DOM patching, no full re-renders

Gives 1 of the 12 instructions most design systems skills give

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

create a custom theme if neededin 54 of 528, across 10 files
read the corresponding theme filein 54 of 528, across 10 files
ask which theme to applyin 53 of 528, across 9 files
show the theme showcasein 53 of 528, across 9 files
maintain visual identity across all slidesin 50 of 528, across 6 files
apply the specified colors and fontsin 47 of 528, across 3 files
get explicit confirmationin 45 of 528, across 1 file
Generate a design system before codingin 19 of 528, across 6 files
Maintain at least 4.5:1 color contrast ratiohere, and in 19 of 528, across 8 files
Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
Check Python installation and install if missingin 17 of 528, across 4 files
Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

use predictable class naming
support light mode via data-theme attribute
collapse the sidebar at 768px
patch the dom via diffs

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.