devteam-design-drift
npx machina-cli add skill michael-harris/devteam/devteam-design-drift --openclawCurrent 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
Source
git clone https://github.com/michael-harris/devteam/blob/main/skills/devteam-design-drift/SKILL.mdView on GitHub Overview
DevTeam design drift detects inconsistencies and drift from the established design system by launching the Design Drift Detector to analyze the codebase for deviations. It identifies hardcoded values, token usage gaps, and inconsistent patterns, then surfaces a drift report and optional remediation tasks.
How This Skill Works
It delegates the analysis to ux:design-drift-detector, which scans the codebase for design token usage and compares implementations against the design system specifications. It flags drift, generates a drift report with severity ratings and affected files, and supports generating remediation tasks when --fix is used.
When to Use It
- When auditing a component library to ensure tokenized colors, typography, and spacing align with the design system
- When rolling out a design-system update and need to detect regressions across the codebase
- When preparing a remediation plan by generating drift reports and fixes
- When validating cross-platform consistency (web, mobile, etc.) against the same design system
- When enforcing design governance by setting a drift threshold and auditing drift instances
Quick Start
- Step 1: Run the drift detector for full codebase or a scope, e.g. /devteam:design-drift --scope 'src/' --check all
- Step 2: Review the drift report for severity and affected files
- Step 3: (Optional) Run with --fix to create remediation tasks for each drift instance
Best Practices
- Run with a scoped path (--scope) to limit scans to relevant areas
- Specify which aspects to check (--check colors|typography|spacing|layout|all) for faster results
- Use --threshold to control sensitivity (strict, normal, relaxed)
- Review the drift report before kicking off fixes
- If using --fix, validate generated remediation tasks and map to actionable tickets
Example Use Cases
- Audit a React component library for color and typography drift against tokens
- Scan a mobile app repo to surface spacing and layout drift
- Identify hardcoded values that should use design tokens
- Compare designs across multiple packages to ensure consistency
- Generate remediation tasks from the drift report and assign owners
