skills.rest
BruceTyndall
BruceTyndallCOMMUNITY
Explore all skills by this author →
GitHub

token-drift-scanner

Scan codebases for design token drift against canonical specifications and Figma mappings.

Updated Aug 27, 2026
Search Tags:#consistency#frontend#css#audit#figma#design tokens#tailwind
One-click install
npx skills add https://github.com/BruceTyndall/socelle-global --skill token-drift-scanner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-drift-scanner
Source: https://github.com/BruceTyndall/socelle-global/tree/main/.agents/skills/token-drift-scanner
Command: npx skills add https://github.com/BruceTyndall/socelle-global --skill token-drift-scanner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the common issue of design tokens becoming inconsistent across a codebase, leading to visual bugs and a fragmented user experience. It ensures that the implemented UI adheres to the established design system.

Core Features & Use Cases

  • Canonical Token Verification: Checks if design tokens (colors, fonts) in the codebase align with the project's canonical documentation (e.g., SOCELLE_CANONICAL_DOCTRINE.md).
  • Hardcoded Value Detection: Identifies instances of hardcoded hex color values or unauthorized font usage that bypass the design system.
  • Figma Parity Check: Compares design tokens defined in Figma (as reflected in Tailwind config or CSS variables) against their actual implementation.
  • Use Case: Before a major release, run this skill to automatically scan the SOCELLE-WEB application for any deviations from the approved color palette or font families, ensuring brand consistency.

Quick Start

Run the token-drift-scanner skill to audit the design tokens within the SOCELLE-WEB project.

Frequently Asked Questions about token-drift-scanner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit design token consistency between Figma and Tailwind config?▼

To audit design token consistency, scan your codebase to compare design tokens defined in Figma against their Tailwind config or CSS variable implementations, detecting any deviations from the canonical specifications.

What is design token drift and how does it affect frontend CSS?▼

Design token drift occurs when hardcoded hex color values or unauthorized fonts bypass design system rules, causing frontend CSS inconsistencies that lead to visual bugs and a fragmented user experience across components.

How do I detect hardcoded hex color values and unauthorized font usage in my codebase?▼

Detect hardcoded hex color values and unauthorized font usage by running a scanner that uses grep and shell utilities to identify style overrides and non-compliant values bypassing your established design system rules.

Can I check if my frontend components align with canonical design documentation?▼

Yes, you can verify frontend component alignment by validating implemented colors and fonts against canonical documentation like SOCELLE_CANONICAL_DOCTRINE.md, ensuring adherence to the established design system rules within your directory.

What's the best way to validate Figma token mapping in a frontend project before release?▼

The best way to validate Figma token mapping before release is to automatically scan the application for deviations from the approved color palette or font families, ensuring brand consistency and Figma parity.

Does the token drift scanner require specific directory structures or dependencies?▼

The token drift scanner operates within the SOCELLE-WEB directory and has no external dependencies, using standard shell utilities like grep to validate adherence to canonical doctrine and Figma token mapping files.

Related Skills

Explore More Software Engineering Skills→
dmlguq456dmlguq456
7

design-tokens

Define and validate reusable design tokens for colors, typography, and spacing.

Community
Advanced
klarbauklarbau
7

ckm:design-system

Standardize three-layer design tokens and generate brand-compliant slides with HTML validation.

Community
Advanced
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
managedcodemanagedcode
42

dotnet-stylelint

Configure and run Stylelint validation on CSS/SCSS assets in .NET web projects.

Official
Intermediate