dss/dss-claude-plugin/skills/quick-wins/SKILL.md

---
name: Quick Wins
description: Find low-effort, high-impact opportunities for design system adoption
globs:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.tsx"
  - "**/*.jsx"
  - "**/components/**"
alwaysApply: false
---

# Quick Wins

## Overview

This skill identifies quick win opportunities for design system adoption - low-effort changes that provide high impact improvements to design consistency and maintainability.

## When to Use

Use this skill when the user asks to:
- Find easy design system improvements
- Get quick wins for the sprint
- Prioritize low-hanging fruit
- Start design system adoption incrementally
- Get immediate impact with minimal effort

## Quick Win Categories

### 1. Color Consolidation
- Multiple similar colors that differ slightly
- Colors that can be reduced to a single token
- Opportunity: Replace 10+ colors with 3-5 tokens

### 2. Spacing Standardization
- Arbitrary pixel values (13px, 17px, 22px)
- Inconsistent margins and paddings
- Opportunity: Implement 4px/8px grid system

### 3. Typography Cleanup
- Too many font sizes
- Inconsistent line heights
- Opportunity: Define 5-7 type scale levels

### 4. Border Radius Normalization
- Random radius values
- Inconsistent rounded corners
- Opportunity: 3-4 standard radius values

### 5. Shadow Standardization
- Various shadow implementations
- Inconsistent elevation
- Opportunity: 3 shadow levels (sm, md, lg)

## Effort/Impact Matrix

```
                    HIGH IMPACT
                         |
    +-----------+--------+--------+-----------+
    |           |        |        |           |
    | Extract   | Create | Spacing| Color     |
    | common    | Button | scale  | tokens    |
    | utilities | system |        |           |
    |           |        |        |           |
LOW +-----------|--------|--------|-----------|+ HIGH
EFFORT          |        |        |           EFFORT
    |           |        |        |           |
    | Document  | Create | Build  | Complete  |
    | existing  | icons  | full   | component |
    | patterns  | set    | theme  | library   |
    |           |        |        |           |
    +-----------+--------+--------+-----------+
                         |
                    LOW IMPACT
```

## Workflow

1. **Find Quick Wins**
   ```
   Use dss_find_quick_wins with project path
   ```

2. **Review Opportunities**
   - Check effort estimates
   - Review impact scores
   - Consider dependencies

3. **Prioritize**
   - High impact, low effort first
   - Group related changes
   - Consider team velocity

4. **Execute**
   - Create tokens for identified values
   - Replace hardcoded values
   - Document changes

## Example Interaction

**User:** "Find quick wins for our design system"

**Assistant Response:**
```
I'll find quick win opportunities for your project.

[Uses dss_find_quick_wins tool]

**Quick Win Analysis:**

**Top 5 Quick Wins (by Impact/Effort):**

1. **Color Consolidation** [HIGH IMPACT / LOW EFFORT]
   - Found 47 color values reducible to 8 tokens
   - Files affected: 23
   - Estimated effort: 2 hours
   ```css
   /* Before: 47 variations */
   color: #0066cc;
   color: #0067cd;  /* Nearly identical */
   color: #0065cb;  /* Nearly identical */

   /* After: 1 token */
   color: var(--color-primary);
   ```

2. **Spacing Scale** [HIGH IMPACT / LOW EFFORT]
   - Found 34 unique spacing values
   - Can reduce to 6 tokens (4, 8, 16, 24, 32, 48)
   - Files affected: 31
   - Estimated effort: 3 hours

3. **Border Radius** [MEDIUM IMPACT / LOW EFFORT]
   - Found 12 radius values
   - Can reduce to 4 tokens (2, 4, 8, 16)
   - Files affected: 15
   - Estimated effort: 1 hour

4. **Shadow Cleanup** [MEDIUM IMPACT / LOW EFFORT]
   - Found 8 shadow definitions
   - Can consolidate to 3 tokens
   - Files affected: 12
   - Estimated effort: 1 hour

5. **Font Size Scale** [HIGH IMPACT / MEDIUM EFFORT]
   - Found 15 font sizes
   - Can reduce to 7 tokens
   - Files affected: 28
   - Estimated effort: 3 hours

**Total Estimated Time:** 10 hours
**Estimated Impact:** 60% reduction in style inconsistency

**Recommended Order:**
1. Colors (biggest impact)
2. Spacing (most widespread)
3. Border radius (quick win)
4. Shadows (contained scope)
5. Font sizes (needs coordination)

Would you like me to create tokens for any of these?
```

## Quick Win Templates

### Color Token Creation
```css
/* Quick win: Create color tokens */
:root {
  --color-primary: #0066cc;
  --color-primary-light: #3385d6;
  --color-primary-dark: #004c99;
}

/* Replace all instances */
/* Before */ color: #0066cc;
/* After */  color: var(--color-primary);
```

### Spacing Scale
```css
/* Quick win: Spacing scale */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}
```

## Related Tools

- `dss_find_quick_wins` - Main quick wins tool
- `dss_analyze_project` - Full analysis
- `dss_extract_tokens` - Create tokens
- `dss_audit_components` - Component-level audit

## Metrics

Quick wins are scored on:
- **Impact**: How many files/components affected
- **Effort**: Estimated time to implement
- **Risk**: Likelihood of regression
- **Value**: Improvement to consistency

## Best Practices

1. **Start Small**
   - Pick 2-3 quick wins per sprint
   - Validate before scaling
   - Document learnings

2. **Track Progress**
   - Measure before/after metrics
   - Celebrate wins
   - Share with team

3. **Build Momentum**
   - Use quick wins to build support
   - Demonstrate value early
   - Plan for larger initiatives