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:
103
dss-claude-plugin/commands/dss-audit.md
Normal file
103
dss-claude-plugin/commands/dss-audit.md
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
name: dss-audit
|
||||
description: Audit React components for design system adoption
|
||||
arguments:
|
||||
- name: path
|
||||
description: Path to components directory
|
||||
required: false
|
||||
---
|
||||
|
||||
# DSS Audit Command
|
||||
|
||||
Audit React/Vue components for design system readiness, identifying hardcoded values and consolidation opportunities.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/dss-audit [path]
|
||||
```
|
||||
|
||||
Examples:
|
||||
```
|
||||
/dss-audit
|
||||
/dss-audit ./src/components
|
||||
/dss-audit ./src/ui
|
||||
```
|
||||
|
||||
## What This Does
|
||||
|
||||
1. **Scans Components**
|
||||
- Finds all React/Vue components
|
||||
- Parses component code
|
||||
- Extracts styling information
|
||||
|
||||
2. **Identifies Issues**
|
||||
- Hardcoded color values
|
||||
- Inline spacing values
|
||||
- Inconsistent styling patterns
|
||||
- Duplicate component patterns
|
||||
|
||||
3. **Maps Dependencies**
|
||||
- Component relationships
|
||||
- Style imports
|
||||
- Shared utilities
|
||||
|
||||
4. **Generates Report**
|
||||
- Issues by severity
|
||||
- Consolidation opportunities
|
||||
- Refactoring recommendations
|
||||
|
||||
## Instructions for Claude
|
||||
|
||||
When the user runs this command:
|
||||
|
||||
1. Use `dss_audit_components` tool with the provided path
|
||||
2. Present findings organized by:
|
||||
- Summary statistics
|
||||
- Hardcoded values (table format)
|
||||
- Consolidation opportunities
|
||||
- Dependency issues
|
||||
3. Prioritize by impact and effort
|
||||
4. Provide specific fix recommendations
|
||||
5. Offer to create tokens for hardcoded values
|
||||
|
||||
## Example Output
|
||||
|
||||
```
|
||||
Component Audit: /src/components
|
||||
|
||||
SUMMARY
|
||||
- Components analyzed: 45
|
||||
- Hardcoded values: 127
|
||||
- Consolidation opportunities: 8
|
||||
- Accessibility issues: 23
|
||||
|
||||
HARDCODED VALUES (Top 10)
|
||||
|
||||
| File | Line | Value | Suggested Token |
|
||||
|------|------|-------|-----------------|
|
||||
| Button.tsx | 12 | #0066cc | --color-primary |
|
||||
| Button.tsx | 15 | 16px | --spacing-md |
|
||||
| Card.tsx | 8 | #ffffff | --color-surface |
|
||||
| Card.tsx | 22 | 8px | --radius-md |
|
||||
| Modal.tsx | 34 | rgba(0,0,0,0.5) | --color-overlay |
|
||||
|
||||
CONSOLIDATION OPPORTUNITIES
|
||||
|
||||
1. Button Components (3 variants)
|
||||
Files: PrimaryButton.tsx, SecondaryButton.tsx, GhostButton.tsx
|
||||
Suggestion: Merge into Button.tsx with 'variant' prop
|
||||
|
||||
2. Card Components (2 variants)
|
||||
Files: Card.tsx, FeaturedCard.tsx
|
||||
Suggestion: Add 'featured' prop to Card.tsx
|
||||
|
||||
RECOMMENDATIONS
|
||||
|
||||
1. [HIGH] Create color tokens for 89 hardcoded colors
|
||||
2. [HIGH] Implement spacing scale (34 values)
|
||||
3. [MEDIUM] Consolidate button variants
|
||||
4. [LOW] Add TypeScript types for tokens
|
||||
|
||||
Next: Run /dss-extract to create tokens from these values
|
||||
```
|
||||
Reference in New Issue
Block a user