design-token-audit

name	design-token-audit
description	Audit SCSS/CSS for hardcoded values and suggest design tokens
trigger	automatic

Design Token Audit Skill

This skill audits stylesheets for hardcoded values and suggests replacements with design system tokens.

Purpose

Audit SCSS/CSS files for hardcoded values (colors, spacing, typography) and suggest replacements with Southleft design system tokens.

Trigger Conditions

• Automatic: When .css or .scss files are edited
• Manual: Invoked by /check-design command

Actions

1. Scan Stylesheets:

   • Locate SCSS files in src/assets/css/
   • Search for hardcoded values:
     • Hex color values (e.g., #ffffff, #000000)
     • RGB/RGBA color values
     • Pixel spacing values (e.g., 12px, 24px, 48px)
     • Font size values
     • Font family names

2. Knowledge Query:

   • Use mcp_southleft-ds-mcp_search_design_knowledge to find relevant tokens for:
     • Color: Search for color tokens matching or similar to hardcoded hex values
     • Spacing (Layout): Search for spacing tokens matching pixel values
     • Typography: Search for font family and size tokens

3. Comparison & Analysis:

   • Compare local hardcoded values with available Southleft tokens
   • Identify exact matches or close approximations
   • Note values that don't have token equivalents

4. Suggest Replacements:

   • Propose CSS variable replacements using Southleft tokens
   • Provide before/after examples:

     // Before
     color: #1a1a1a;
     margin: 24px;
     
     // After
     color: var(--sl-color-text-primary);
     margin: var(--sl-spacing-lg);
     

5. Interactive States Check:

   • Check buttons and links for missing hover/focus/active states
   • Propose CSS to add smooth transitions if missing
   • Ensure :focus-visible states are implemented for keyboard accessibility

Implementation Details

• Focus on src/assets/css/ directory
• Look for common spacing patterns (4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px)
• Consider color variations and shades
• Check for typography scale consistency

Notes

• Not all hardcoded values need to be replaced (some may be intentional)
• Suggest tokens that match the design intent, not just the exact value
• This skill helps maintain design system consistency across the portfolio
• The Southleft design system MCP provides access to the token library