From devteam
Detects design drift and inconsistencies from design systems by scanning codebases for deviations in colors, typography, spacing, layout, hardcoded values, and accessibility issues. Generates reports and remediation plans.
How this skill is triggered — by the user, by Claude, or both
Slash command
/devteam:devteam-design-driftThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Current session: !`source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_current_session 2>/dev/null || echo "No active session"`
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"
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.
# 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
| 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 |
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"
Delegate to the ux:design-drift-detector agent, which will:
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`
})
Output a drift report showing:
If --fix is specified, create remediation tasks for each drift instance.
/devteam:design - Coordinate design work/devteam:implement - Implement design fixes/devteam:status - Check progressnpx claudepluginhub michael-harris/devteam --plugin devteamIdentifies system-wide drift in design systems: components diverging from specs, local token overrides, forked patterns across teams. Classifies severity, origins, and generates response recommendations.
Detects hardcoded values where design tokens exist and raw HTML primitives where registered components should be used. Reports findings without modifying source.
Detects design system tokens and components in code, identifying drift with paired evidence blocks. Use when auditing design system consistency across a codebase.