← All skills
design-sync
82 / 100 · Low risk
Fine to try.
By asgeirtj/system_prompts_leaks (GitHub) · design · 71,387 stars · scanned at commit 2209631
Push a React design system to claude.ai/design. This runs a converter that bundles the real component code (from Storybook or a bare package) and uploads it. Use when the user runs /design-sync or says "sync my design system to Claude Design".
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 11 places.
Show 8 more
- Anthropic/claude-code/skills/design-sync/package-validate.mjs, line 796
fail(`[RENDER_SKIPPED] render check did not run (${String(e).split('\n')[0]}) \u2014 \`npx playwright install chromium\` and re-run, or pass --no-render-check t - Anthropic/claude-code/skills/design-sync/package-validate.mjs, line 804
console.error(errors ? `\n${errors} error(s) \u2014 open a <Name>.html in a browser via \`npx serve ${OUT}\` to inspect.` : `\n\u2713 bundle is complete${warnNo - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 16
npx --no-install storybook build -c <storybookConfigDir> -o .design-sync/sb-reference - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 19
Run it from the directory whose `package.json` has the storybook devDependencies - usually the one containing `.storybook/`; monorepos often have several storyb - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 41
(cd .ds-sync && npm i esbuild ts-morph @types/react playwright && npx playwright install chromium) - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 44
If chromium install fails, `npx playwright install-deps chromium` first; if the environment can't install chromium, set `DS_CHROMIUM_PATH=<system-chromium>`. - Anthropic/claude-code/skills/design-sync/storybook/compare.mjs, line 99
console.error(`[SB_REFERENCE_MISSING] ${SB || '(unset)'} has no iframe.html \u2014 build the reference storybook first (npx --no-install storybook build -o .des - Anthropic/claude-code/skills/design-sync/storybook/compare.mjs, line 118
console.error('[NO_CHROMIUM] compare requires playwright \u2014 npm i playwright && npx playwright install chromium');
Runs commands on your computer
This is disclosed by the author in the skill's SKILL.md or README.
Found in 13 places.
Show 10 more
- Anthropic/claude-code/skills/design-sync/non-storybook/SKILL.md, line 169
node .ds-sync/package-capture.mjs --out ./ds-bundle [--components A,B] - Anthropic/claude-code/skills/design-sync/non-storybook/SKILL.md, line 185
node .ds-sync/storybook/http-serve.mjs ./ds-bundle # prints "serving ... at http://127.0.0.1:<port>/", stays running - Anthropic/claude-code/skills/design-sync/non-storybook/SKILL.md, line 243
node .ds-sync/resync.mjs --config .design-sync/config.json --node-modules <nm> \ - Anthropic/claude-code/skills/design-sync/resync.mjs, line 63
import { spawnSync } from 'node:child_process'; - Anthropic/claude-code/skills/design-sync/resync.mjs, line 131
const r = spawnSync(process.execPath, [here(script), ...args], { - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 16
npx --no-install storybook build -c <storybookConfigDir> -o .design-sync/sb-reference - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 39
mkdir -p .ds-sync && cp -r "<skill-base-dir>"/package-build.mjs "<skill-base-dir>"/package-validate.mjs "<skill-base-dir>"/resync.mjs "<skill-base-dir>"/lib "<s - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 48
node .ds-sync/package-build.mjs --config .design-sync/config.json --node-modules <pkg-node-modules> \ - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 155
node .ds-sync/lib/preview-rebuild.mjs --config .design-sync/config.json --node-modules <nm> --out ./ds-bundle --components <Name> - Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 315
node .ds-sync/resync.mjs --config .design-sync/config.json --node-modules <nm> \
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'design-sync' ] || [ -L ~/.agents/skills/'design-sync' ]; then echo 'A skill folder named design-sync already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/asgeirtj/system_prompts_leaks' "$d" && git -C "$d" checkout --quiet '2209631d6d3da737c22159ed03c5127734b187f3' -- 'Anthropic/claude-code/skills/design-sync' && mkdir -p ~/.agents/skills && cp -R "$d"/'Anthropic/claude-code/skills/design-sync' ~/.agents/skills/'design-sync' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'design-sync' ~/.claude/skills/'design-sync' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for asgeirtj/system_prompts_leaks shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/asgeirtj/system_prompts_leaks/)
Score history
| Date | Version | Score |
|---|
| 2026-11-14 | 2209631 | 82 |
| 2026-11-10 | fc0108f | 82 |