← All skills
design-sync
82 / 100 · Low risk
Fine to try. Some of what it can do is expected: a coding skill usually runs build and test commands.
By justinlietz93/Perfect_Prompts (GitHub) · coding · 23 stars · scanned at commit ee649c7
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
- Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/package-validate.mjs, line 795
fail(`[RENDER_SKIPPED] render check did not run (${String(e).split('\n')[0]}) — \`npx playwright install chromium\` and re-run, or pass --no-render-check to acc - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/package-validate.mjs, line 803
console.error(errors ? `\n${errors} error(s) — open a <Name>.html in a browser via \`npx serve ${OUT}\` to inspect.` : `\n✓ bundle is complete${warnNote}`); - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 16
npx storybook build -c <storybookConfigDir> -o .design-sync/sb-reference - Prompts/System_Prompts_Leaks/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 - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 42
(cd .ds-sync && npm i esbuild ts-morph @types/react playwright && npx playwright install chromium) - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 45
If chromium install fails, `npx playwright install-deps chromium` first; if the environment can't install chromium, set `DS_CHROMIUM_PATH=<system-chromium>`. - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/compare.mjs, line 99
console.error(`[SB_REFERENCE_MISSING] ${SB || '(unset)'} has no iframe.html — build the reference storybook first (npx storybook build -o .design-sync/sb-refere - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/compare.mjs, line 118
console.error('[NO_CHROMIUM] compare requires playwright — 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. Expected for a coding skill.
Found in 13 places.
Show 10 more
- Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/non-storybook/SKILL.md, line 170
node .ds-sync/package-capture.mjs --out ./ds-bundle [--components A,B] - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/non-storybook/SKILL.md, line 186
node .ds-sync/storybook/http-serve.mjs ./ds-bundle # prints "serving … at http://127.0.0.1:<port>/", stays running - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/non-storybook/SKILL.md, line 244
node .ds-sync/resync.mjs --config .design-sync/config.json --node-modules <nm> \ - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/resync.mjs, line 63
import { spawnSync } from 'node:child_process'; - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/resync.mjs, line 131
const r = spawnSync(process.execPath, [here(script), ...args], { - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 16
npx storybook build -c <storybookConfigDir> -o .design-sync/sb-reference - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 40
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 - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 49
node .ds-sync/package-build.mjs --config .design-sync/config.json --node-modules <pkg-node-modules> \ - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 156
node .ds-sync/lib/preview-rebuild.mjs --config .design-sync/config.json --node-modules <nm> --out ./ds-bundle --components <Name> - Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync/storybook/SKILL.md, line 316
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/justinlietz93/Perfect_Prompts' "$d" && git -C "$d" checkout --quiet 'ee649c7a56c5a002f8d9be0d2ee78eb9168f90a5' -- 'Prompts/System_Prompts_Leaks/Anthropic/claude-code/skills/design-sync' && mkdir -p ~/.agents/skills && cp -R "$d"/'Prompts/System_Prompts_Leaks/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 justinlietz93/Perfect_Prompts shows the score of its lowest-scoring skill.

[](https://zalavijaysinh.github.io/skilltrust/repos/justinlietz93/Perfect_Prompts/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | ee649c7 | 82 |