DevTeam Design Drift Command | devteam | ClaudePluginHub

Skill

DevTeam Design Drift Command

Current session: !`source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_current_session 2>/dev/null || echo "No active session"`

Install

$

npx claudepluginhub michael-harris/devteam --plugin devteam

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Current session: !`source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_current_session 2>/dev/null || echo "No active session"`

SKILL.md

Similar Skills

design-system

Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.

team-skills-platform

163.7k

ui-demo

Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.

team-skills-platform

163.7k

kotlin-patterns

Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.

team-skills-platform

163.7k

Stats

Stars6

Forks1

Last CommitFeb 26, 2026

Actions

View Source View Plugin View on GitHub View README

Current session: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_current_session 2>/dev/null || echo "No active session" Active sprint: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_kv_state "active_sprint" 2>/dev/null || echo "None" Failure count: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_kv_state "consecutive_failures" 2>/dev/null || echo "0"

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 <path>`	Limit scan to specific files/directories
`--check <aspect>`	Focus on: colors, typography, spacing, layout, all
`--fix`	Generate remediation tasks for detected drift
`--threshold <level>`	Drift tolerance: strict, normal, relaxed

Your Process

Phase 0: Initialize Session

source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh"
source "${CLAUDE_PLUGIN_ROOT}/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