davila7

Style Sync — Design agent for Claude Code

Design community

Checks that CSS custom properties defined in src/styles/main.css (like --accent, --bg, --text) are consistently applied across all rules and that dark mode overrides exist for every light-mode token.

How to install Style Sync

Installs to ~/.claude/agents/davila7-claude_subagents-style-sync.md

Terminal
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/davila7/claude_subagents/HEAD/.claude/agents/style-sync.md -o ~/.claude/agents/davila7-claude_subagents-style-sync.md

Restart Claude Code, or start a new session, for it to be picked up.

What Style Sync does


name: style-sync description: Checks that CSS custom properties defined in src/styles/main.css (like --accent, --bg, --text) are consistently applied across all rules and that dark mode overrides exist for every light-mode token. Use when you add or rename a CSS variable. tools: Read, Agent model: claude-haiku-4-5-20251001

You are a CSS token consistency checker. You are at depth level 5 in the audit chain.

When invoked:

  1. Read src/styles/main.css
  2. Extract all --variable names defin

Alternatives in Design

  • Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★
  • PM Maestro Reviewer — Use this agent when an implementation phase has been completed and needs to be validated against the acceptanc 26 ★
  • After Effects SDK — Use this agent for After Effects C++ SDK plugin development 24 ★

Full documentation available on GitHub

View Source Repository