sahildavesahildave/skilltopia/.claude/skills/sync-design/SKILL.md

sync-design

Skill0 starsChanged 3 months agoMITView on GitHub

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.

1 other project uses a version of this.

Adopted by

Most recently taken up by

e-dul/opencl-labtheir own version, first seen Mar 23, 2026

Other versions1 project uses a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 1
e-dul/opencl-lab★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository12 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- ai-image-generationSkill
- change-package-managerSkill
- checkSkill
- cleanupSkill
- initSkill
- sync-designSkill
- change-package-managerSkill
- checkSkill
- cleanupSkill
- initSkill

The file

We split this skill into the rules it gives an agent

10 rules. About 0 are common, 4 are distinctive, and 6 are very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈4
Distinctive · estimate
This author's own choices. Worth a look.
6
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Keep docs/design/DESIGN.md as the single agent-facing design source.
line 10
Very specific:
Read docs/design/DESIGN.md, src/theme-variables.css, src/App.css, src/quick-pane.css, and the changed UI files.
line 15
Very specific:
Run npm run design:sync to reconcile frontmatter values that can be derived deterministically from the CSS source.
line 17
Very specific:
Update the Markdown prose in DESIGN.md when the change affects visual intent, component behavior, spacing, typography, accessibility, …
line 19
Distinctive:
Keep the Stitch YAML frontmatter and prose consistent.
line 22
Very specific:
Run npm run design:check and git diff --check.
line 24
Distinctive:
Do not overwrite intentional design decisions just because an unrelated CSS value differs.
line 28
Distinctive:
Use semantic token names and preserve the existing Tailwind/shadcn patterns.
line 30
Very specific:
Keep runtime values in src/theme-variables.css.
line 31
Distinctive:
If the source change is ambiguous, report the mismatch and ask for a design decision instead of guessing.
line 33

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free