michael-harris

DevTeam Design Drift Command

Design community intermediate

SOURCE https://github.com/michael-harris/devteam

Description

**Command:** `/devteam:design-drift [scope] [options]` Detect design inconsistencies and drift from the design system. Launches the Design Drift Detector to analyze the codebase for deviations.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for michael-harris/devteam, shared by 20 entries in this directory. It describes the repository, not this entry specifically.

DevTeam Design Drift Command

**Command:** `/devteam:design-drift [scope] [options]`

Detect design inconsistencies and drift from the design system. Launches the Design Drift Detector to analyze the codebase for deviations.

Usage

# Full codebase scan
/devteam:design-drift

# Scan specific directory
/devteam:design-drift --scope "src/components/"

# Check specific design aspect
/devteam:design-drift --check colors
/devteam:design-drift --check typography
/devteam:design-drift --check spacing

# Generate remediation plan
/devteam:design-drift --fix

Options

Option	Description
`--scope`	Limit scan to specific files/directories
`--check`	Focus on: colors, typography, spacing, layout, all
`--fix`	Generate remediation tasks for detected drift
`--threshold`	Drift tolerance: strict, normal, relaxed

Your Process

Phase 0: Initialize Session

source scripts/state.sh
source scripts/events.sh

SESSION_ID=$(start_session "/devteam:design-drift $*" "design-drift")
log_session_started "/devteam:design-drift $*" "design-drift"

Phase 1: Launch Design Drift Detector

Delegate to the `ux:design-drift-detector` agent, which will:

Scan codebase for design token usage
Compare implementations against design system specifications
Identify hardcoded values that should use tokens
Detect inconsistent patterns across components
Generate a drift report with severity ratings

const result = await Task({
    subagent_type: "ux:design-drift-detector",
    prompt: `Design drift analysis:

        Scope: ${scope || 'full codebase'}
        Check: ${aspect || 'all'}
        Threshold: ${threshold || 'normal'}

        Analyze for:
        1. Hardcoded colors/fonts/spacing that should use design tokens
        2. Inconsistent component patterns
        3. Deviations from established design system
        4. Accessibility regressions
        5. Cross-platform inconsistencies`
})

Phase 2: Report

Output a drift report showing:

Number of drift instances found
Severity breakdown (critical, warning, info)
Affected files and locations
Recommended fixes

Phase 3: Remediation (if --fix)

If `--fix` is specified, create remediation tasks for each drift instance.

See Also

/devteam:design - Coordinate design work
/devteam:implement - Implement design fixes
/devteam:status - Check progress