skills.rest
michael-harris
michael-harrisCOMMUNITY
Explore all skills by this author →
GitHub

devteam-design-drift

Detects design inconsistencies and drift from design tokens in a codebase.

17|8|Updated Oct 30, 2025
Search Tags:#code quality#consistency#UI/UX#drift detection#design system#design tokens
One-click install
npx skills add https://github.com/michael-harris/devteam --skill devteam-design-drift
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devteam-design-drift
Source: https://github.com/michael-harris/devteam/tree/main/skills/devteam-design-drift
Command: npx skills add https://github.com/michael-harris/devteam --skill devteam-design-drift

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill identifies and helps to rectify deviations from established design systems within a codebase, ensuring visual and functional consistency across the application.

Core Features & Use Cases

  • Design Drift Detection: Scans the codebase to find hardcoded values, inconsistent patterns, and deviations from design tokens.
  • Aspect-Specific Checks: Allows focusing the analysis on specific design elements like colors, typography, spacing, or layout.
  • Remediation Planning: Can generate actionable tasks to fix detected design inconsistencies.
  • Use Case: A developer has made changes to a component, and you want to ensure it still adheres to the company's design system before merging.

Quick Start

Run /devteam:design-drift to detect design inconsistencies across the entire codebase.

Frequently Asked Questions about devteam-design-drift

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

FAQPage Schema
How do I detect design system drift and hardcoded values in my codebase?▼

Design drift detection scans your codebase to identify hardcoded values, inconsistent patterns, and deviations from design tokens. It analyzes specified aspects like colors, typography, spacing, and layout to ensure UI/UX consistency.

Can I check for typography and color inconsistencies in specific UI components?▼

Yes, aspect-specific checks allow you to focus the analysis on individual design elements like colors, typography, spacing, or layout. This targets the scan to find deviations from design tokens within specific components.

What is the best way to remediate design inconsistencies found during codebase analysis?▼

The best way to remediate design inconsistencies is to generate actionable remediation tasks for the identified drift. This creates a structured plan to replace hardcoded values and align code with your design system.

Do I need to configure design tokens before scanning for UI inconsistencies?▼

You need established design tokens within your codebase before scanning for UI inconsistencies. The detection mechanism compares your code against these predefined tokens to accurately report deviations across colors, typography, and spacing.

Does design drift detection work without external dependencies or libraries?▼

Yes, design drift detection works without external dependencies or libraries. It uses internal scripts to analyze your codebase directly, identifying hardcoded values and inconsistent patterns without requiring additional installations.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
wredziowredzio

using-tailwind-design-tokens

Enforce Tailwind design tokens from globals.css in TSX/CSS files.

Community
Basic
pavegpaveg
2

ui-design-standards

Enforce UI design standards across frontend projects with theme tokens and component architecture.

Community
Advanced
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced