Design system

Skill Xuan0629/shared-skills/design-system

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

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, 524 tokens by cl100k_base, 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

What ships with it: 1 file

649 B alongside SKILL.md

meta.yaml649 B