How do I install the Sync Design skill?

Run npx skillmds@latest add sahildave/sync-design-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Sync Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Sync Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Sync Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Sync Design?

sahildave (@sahildave) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Sync Design by sahildave — Agent Skill

Name: Sync Design
Author: sahildave

Sync Design

Reconcile docs/design/DESIGN.md with the current CSS design implementation after Chrome Inspect or UI changes. Use for design-system updates, token drift, typography changes, spacing changes, component styling changes, or motion changes.

sahildave Updated Sep 21, 2026

File contents

Sync Design System

Keep docs/design/DESIGN.md as the single agent-facing design source. Never create a second token file or a reference copy.

Workflow

Read docs/design/DESIGN.md, src/theme-variables.css, src/App.css, src/quick-pane.css, and the changed UI files.
Run npm run design:sync to reconcile frontmatter values that can be derived deterministically from the CSS source.
Update the Markdown prose in DESIGN.md when the change affects visual intent, component behavior, spacing, typography, accessibility, responsive behavior, or motion.
Keep the Stitch YAML frontmatter and prose consistent. Frontmatter is the structured design contract; prose explains how to apply it.
Run npm run design:check and git diff --check.

Guardrails

Do not overwrite intentional design decisions just because an unrelated CSS value differs; inspect the change and update the design contract deliberately.
Use semantic token names and preserve the existing Tailwind/shadcn patterns.
Keep runtime values in src/theme-variables.css; do not add a parallel tokens.json or duplicate design document.
If the source change is ambiguous, report the mismatch and ask for a design decision instead of guessing.

Useful commands

npm run design:check — fail when derivable CSS tokens drift from DESIGN.md.
npm run design:sync — update derivable frontmatter tokens and print the remaining semantic pass.
npm run design:watch — watch CSS/design files and sync derivable tokens as they change during Chrome Inspect work.

Frequently asked questions