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:
112
dss-claude-plugin/skills/design-system-analysis/SKILL.md
Normal file
112
dss-claude-plugin/skills/design-system-analysis/SKILL.md
Normal file
@@ -0,0 +1,112 @@
|
||||
---
|
||||
name: Design System Analysis
|
||||
description: Analyze codebases for design patterns, component usage, and tokenization opportunities
|
||||
globs:
|
||||
- "**/*.css"
|
||||
- "**/*.scss"
|
||||
- "**/*.tsx"
|
||||
- "**/*.jsx"
|
||||
- "**/*.vue"
|
||||
- "**/tailwind.config.*"
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
# Design System Analysis
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides comprehensive analysis of existing codebases to identify design patterns, component usage, and opportunities for design system adoption.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this skill when the user asks to:
|
||||
- Analyze a project for design system opportunities
|
||||
- Audit an existing codebase for design patterns
|
||||
- Scan a React/Vue project for component patterns
|
||||
- Identify style inconsistencies
|
||||
- Find tokenization opportunities
|
||||
|
||||
## Capabilities
|
||||
|
||||
### 1. Project Scanning
|
||||
- Scans entire project structure
|
||||
- Identifies style files (CSS, SCSS, Tailwind)
|
||||
- Locates component files (React, Vue)
|
||||
- Builds file dependency map
|
||||
|
||||
### 2. Style Analysis
|
||||
- Extracts color values and patterns
|
||||
- Identifies typography scales
|
||||
- Finds spacing patterns
|
||||
- Detects shadow and border patterns
|
||||
|
||||
### 3. Component Analysis
|
||||
- Identifies React/Vue components
|
||||
- Maps component dependencies
|
||||
- Finds repeated patterns
|
||||
- Detects hardcoded values
|
||||
|
||||
### 4. Dependency Graph
|
||||
- Builds component relationship graph
|
||||
- Identifies shared dependencies
|
||||
- Finds circular dependencies
|
||||
- Maps style imports
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Start Analysis**
|
||||
```
|
||||
Use the dss_analyze_project tool with the project path
|
||||
```
|
||||
|
||||
2. **Review Results**
|
||||
- Check scan summary for file counts
|
||||
- Review style patterns found
|
||||
- Examine component analysis
|
||||
- Note dependency relationships
|
||||
|
||||
3. **Generate Recommendations**
|
||||
- Prioritize findings by impact
|
||||
- Suggest token candidates
|
||||
- Recommend component refactoring
|
||||
- Identify quick wins
|
||||
|
||||
## Example Interaction
|
||||
|
||||
**User:** "Analyze my React app at /home/user/my-app for design system adoption"
|
||||
|
||||
**Assistant Response:**
|
||||
```
|
||||
I'll analyze your React application for design system opportunities.
|
||||
|
||||
[Uses dss_analyze_project tool]
|
||||
|
||||
Based on the analysis:
|
||||
|
||||
**Summary:**
|
||||
- 47 style files scanned
|
||||
- 23 React components found
|
||||
- 156 unique color values detected
|
||||
- 12 typography variations identified
|
||||
|
||||
**Key Findings:**
|
||||
1. Color Inconsistency: Found 156 color values that could be reduced to 12 design tokens
|
||||
2. Spacing Patterns: 8 different spacing scales in use
|
||||
3. Component Duplication: 3 button variants that could be consolidated
|
||||
|
||||
**Recommendations:**
|
||||
1. Create a color token system (high impact, medium effort)
|
||||
2. Standardize spacing scale to 4px grid (medium impact, low effort)
|
||||
3. Create a Button component with variants (high impact, high effort)
|
||||
```
|
||||
|
||||
## Related Tools
|
||||
|
||||
- `dss_analyze_project` - Main analysis tool
|
||||
- `dss_extract_tokens` - Extract tokens from analysis
|
||||
- `dss_find_quick_wins` - Find low-effort improvements
|
||||
|
||||
## Dependencies
|
||||
|
||||
- DSS analyze module (ProjectScanner, ReactAnalyzer, StyleAnalyzer)
|
||||
- DSS models (Project, ProjectMetadata)
|
||||
Reference in New Issue
Block a user