claude-skills-vault

Semantic Coding

Scan files, replace hardcoded styles with semantic design tokens (colors, typography, spacing, sizing), edit files directly.

Refactored from semantic-colors (color-only) into a comprehensive design system skill.

Usage

/semantic-coding [path]

DO NOT TOUCH (Non-Negotiable)

• Gradients: from-, via-, to-, bg-gradient-, linear-gradient(), radial-gradient(), conic-gradient()
• SVG defs: <linearGradient>, <radialGradient>, <stop>, url(#...), anything inside <defs>
• Glass morphism: rgba(255,255,255,0.0x) overlays on gradient backgrounds
• Decorative shadows: boxShadow glow effects tied to gradient LED/orb effects
• Animations: @keyframes, animation timing values, transform values
• Template literals: ` border-${color}-500 `, dynamic class construction
• Arbitrary values: bg-[#hex], text-[14px], p-[20px] (JIT bracket syntax)
• Component props: Color/style values passed as non-className props (e.g., <Button color="red-500" />)
• Token source files: globals.css, tailwind.config.*, tokens.ts, theme.ts
• Excluded dirs: node_modules, .next, lib/generated, prisma/, dist/, __tests__/, .test., .spec.

If a value is inside a protected context, skip and log ⚠ skipped (protected context).

Color Rules

Color Replacements

Note: Color-to-semantic mapping depends on your project's brand palette. The defaults below assume orange=brand, blue=info. If your brand uses blue/indigo/etc., map that family to brand instead and adjust accordingly.

| Hardcoded | Semantic | |-----------|----------| | text-red-, text-rose- | text-error | | text-green-, text-emerald-, text-teal- | text-success | | text-yellow-, text-amber- | text-warning | | text-blue-, text-cyan- | text-info | | text-orange- | text-brand | | text-indigo-, text-violet-, text-purple- | text-primary | | text-pink-, text-fuchsia- | text-accent | | text-gray-, text-slate-, text-zinc-, text-stone-, text-neutral-, text-ink- | text-muted-foreground | | text-gray-900, text-slate-900, text-zinc-900 | text-foreground | | text-white (on semantic bg) | text-{bg-token}-foreground | | text-black | text-foreground | | bg-red-, bg-rose- (shade ≥500) | bg-error | | bg-red-, bg-rose- (shade <500) | bg-error/10 | | bg-green-, bg-emerald-, bg-teal- (shade ≥500) | bg-success | | bg-green-, bg-emerald-, bg-teal- (shade <500) | bg-success/10 | | bg-yellow-, bg-amber- (shade ≥500) | bg-warning | | bg-yellow-, bg-amber- (shade <500) | bg-warning/10 | | bg-blue-, bg-cyan- (shade ≥500) | bg-info | | bg-blue-, bg-cyan- (shade <500) | bg-info/10 | | bg-orange- | bg-brand or bg-brand/10 | | bg-indigo-, bg-violet-, bg-purple- | bg-primary or bg-primary/10 | | bg-gray-, bg-slate-, bg-zinc-, bg-stone-, bg-neutral-, bg-ink- | bg-muted | | bg-white (page-level) | bg-background | | bg-white (inside card/panel) | bg-card | | bg-black/50 (overlay) | bg-overlay | | border-gray-, border-slate-, border-zinc-, border-stone-, border-neutral-, border-ink- | border-border | | border-red-, border-rose- | border-error | | border-green-, border-emerald-, border-teal- | border-success | | border-blue-, border-cyan- | border-info | | border-yellow-, border-amber- | border-warning | | border-orange- | border-brand | | border-indigo-, border-violet-, border-purple- | border-primary | | shadow-emerald-, shadow-green- | shadow-success | | shadow-red- | shadow-error | | shadow-blue- | shadow-info | | ring-red- | ring-error | | ring-green- | ring-success | | ring-blue- | ring-info | | divide-gray-, divide-slate- | divide-border | | placeholder-gray- | placeholder-muted-foreground |

Foreground Pairing

| Background | Foreground | |------------|------------| | bg-primary | text-primary-foreground | | bg-brand | text-brand-foreground | | bg-success | text-success-foreground | | bg-error | text-error-foreground | | bg-warning | text-warning-foreground | | bg-info | text-info-foreground |

Dark Mode Override Removal

Collapse light+dark pairs into one semantic token:

- className="text-green-600 dark:text-green-400"
+ className="text-success"

- className="bg-red-100 dark:bg-red-900/20 border-red-200 dark:border-red-800"
+ className="bg-error/10 border-error"

Typography Rules

Font Family

| Hardcoded | Semantic | |-----------|----------| | font-sans (body text) | font-body | | font-sans (headings) | font-heading | | font-mono | font-mono | | font-serif | font-display | | Inline fontFamily: 'Inter' | var(--font-body) | | Inline fontFamily: 'monospace' | var(--font-mono) |

Font Size (Text Scale)

| Hardcoded | Semantic | Use Case | |-----------|----------|----------| | text-xs | text-caption | Labels, hints, timestamps | | text-sm | text-body-sm | Secondary content, metadata | | text-base | text-body | Body text, paragraphs | | text-lg | text-body-lg | Lead paragraphs, emphasis | | text-xl | text-heading-sm | Small headings, card titles | | text-2xl | text-heading-md | Section headings | | text-3xl | text-heading-lg | Page titles | | text-4xl, text-5xl | text-heading-xl | Hero headings | | text-6xl, text-7xl, text-8xl, text-9xl | text-display | Display/marketing headings | | Inline fontSize: '14px' | var(--text-body-sm) | | Inline fontSize: '24px' | var(--text-heading-md) |

Font Weight

| Hardcoded | Semantic | Use Case | |-----------|----------|----------| | font-extralight (200) | font-thin | Decorative, display text | | font-light (300) | font-light | Subtle body text | | font-normal (400) | font-normal | Body text | | font-medium (500) | font-medium | Emphasis, labels | | font-semibold (600) | font-semibold | Subheadings | | font-bold (700) | font-bold | Headings, CTAs | | font-extrabold (800), font-black (900) | font-heavy | Display, marketing |

Line Height

| Hardcoded | Semantic | Use Case | |-----------|----------|----------| | leading-none | leading-none | Display text, single-line | | leading-tight | leading-tight | Headings | | leading-snug | leading-snug | Subheadings | | leading-normal | leading-normal | Body text | | leading-relaxed | leading-relaxed | Long-form content | | leading-loose | leading-loose | Legal, fine print |

Letter Spacing

| Hardcoded | Semantic | |-----------|----------| | tracking-tighter | tracking-heading | | tracking-tight | tracking-heading | | tracking-normal | tracking-body | | tracking-wide | tracking-label | | tracking-wider | tracking-label | | tracking-widest + uppercase | tracking-overline |

Composite Typography Patterns

Match multi-class patterns before individual classes. Apply the first matching composite rule.

| Hardcoded Pattern | Semantic | |-------------------|----------| | text-6xl+ font-bold/extrabold | text-display | | text-4xl font-bold tracking-tight | text-heading-xl | | text-3xl font-semibold | text-title | | text-2xl font-semibold | text-subtitle | | text-lg font-medium | text-lead | | text-base | text-body | | text-sm text-gray-* | text-muted | | text-xs uppercase tracking-wide | text-overline | | text-xs font-medium | text-label |

Spacing Rules

Semantic Spacing Scale

| Hardcoded | Semantic | Value | |-----------|----------|-------| | `p