Devteam design drift
Detect design inconsistencies and drift from the design system. Launches the Design Drift Detector to analyze the codebase for deviations.From its SKILL.md
npx -y skills add michael-harris/devteam --skill devteam-design-driftAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 20 stars20 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
3.2 KB, as published. Nobody here has run it
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