Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm
Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)
Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability
Migration completed: $(date)
🤖 Clean migration with full functionality preserved
This commit is contained in:
Digital Production Factory
223
dss-claude-plugin/skills/quick-wins/SKILL.md
Normal file
223
dss-claude-plugin/skills/quick-wins/SKILL.md
Normal file
@@ -0,0 +1,223 @@
|
||||
---
|
||||
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
|
||||
Reference in New Issue
Block a user