276ed71f31
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
184 lines
4.4 KiB
Markdown
184 lines
4.4 KiB
Markdown
---
|
|
name: Component Audit
|
|
description: Audit React components for design system adoption and identify refactoring opportunities
|
|
globs:
|
|
- "**/*.tsx"
|
|
- "**/*.jsx"
|
|
- "**/*.vue"
|
|
- "**/components/**"
|
|
- "**/src/**"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Component Audit
|
|
|
|
## Overview
|
|
|
|
This skill provides deep analysis of React/Vue components to identify design system adoption opportunities, hardcoded values, and refactoring recommendations.
|
|
|
|
## When to Use
|
|
|
|
Use this skill when the user asks to:
|
|
- Audit components for design system readiness
|
|
- Find hardcoded values in components
|
|
- Identify component consolidation opportunities
|
|
- Analyze component dependencies
|
|
- Find styling inconsistencies in components
|
|
|
|
## Audit Categories
|
|
|
|
### 1. Hardcoded Values
|
|
Identifies values that should be tokens:
|
|
- Inline colors (`#ffffff`, `rgb()`)
|
|
- Pixel values for spacing
|
|
- Font sizes and weights
|
|
- Border radii and shadows
|
|
|
|
### 2. Component Patterns
|
|
Analyzes component structure:
|
|
- Repeated component patterns
|
|
- Similar components that could merge
|
|
- Props that could use design tokens
|
|
- Styling approaches used
|
|
|
|
### 3. Dependency Analysis
|
|
Maps component relationships:
|
|
- Import dependencies
|
|
- Shared utilities
|
|
- Style dependencies
|
|
- Context usage
|
|
|
|
### 4. Accessibility
|
|
Basic accessibility checks:
|
|
- Missing alt texts
|
|
- Color contrast issues
|
|
- Focus management
|
|
- ARIA attributes
|
|
|
|
## Workflow
|
|
|
|
1. **Run Audit**
|
|
```
|
|
Use dss_audit_components with component directory path
|
|
```
|
|
|
|
2. **Review Findings**
|
|
- Check hardcoded values count
|
|
- Review component patterns
|
|
- Examine dependency graph
|
|
|
|
3. **Prioritize Issues**
|
|
- High impact, low effort first
|
|
- Group by category
|
|
- Consider team capacity
|
|
|
|
4. **Create Refactoring Plan**
|
|
- Token creation tasks
|
|
- Component consolidation
|
|
- Style migration steps
|
|
|
|
## Example Interaction
|
|
|
|
**User:** "Audit my components folder for design system issues"
|
|
|
|
**Assistant Response:**
|
|
```
|
|
I'll audit your components for design system adoption.
|
|
|
|
[Uses dss_audit_components tool]
|
|
|
|
**Component Audit Results:**
|
|
|
|
**Summary:**
|
|
- 45 components analyzed
|
|
- 127 hardcoded values found
|
|
- 8 component consolidation opportunities
|
|
- 23 accessibility issues
|
|
|
|
**Hardcoded Values (Top Issues):**
|
|
|
|
| File | Line | Issue | Suggested Token |
|
|
|------|------|-------|-----------------|
|
|
| Button.tsx | 12 | color: #0066cc | --color-primary |
|
|
| Card.tsx | 8 | padding: 16px | --spacing-md |
|
|
| Header.tsx | 15 | font-size: 24px | --font-size-xl |
|
|
| Modal.tsx | 22 | border-radius: 8px | --radius-md |
|
|
|
|
**Component Consolidation:**
|
|
1. `PrimaryButton`, `SecondaryButton`, `GhostButton`
|
|
-> Consolidate to `Button` with variant prop
|
|
|
|
2. `SmallCard`, `LargeCard`, `FeaturedCard`
|
|
-> Consolidate to `Card` with size prop
|
|
|
|
**Dependency Issues:**
|
|
- Circular dependency: Header -> Nav -> Header
|
|
- Deep nesting: Page -> Layout -> Container -> Box (4 levels)
|
|
|
|
**Recommendations:**
|
|
1. Create color tokens (reduces 89 hardcoded colors)
|
|
2. Implement spacing scale (standardizes 34 spacing values)
|
|
3. Consolidate button components (removes 2 duplicates)
|
|
|
|
Would you like me to generate a detailed refactoring plan?
|
|
```
|
|
|
|
## Issue Severity Levels
|
|
|
|
| Level | Description | Action |
|
|
|-------|-------------|--------|
|
|
| Critical | Breaks design consistency | Fix immediately |
|
|
| High | Significant inconsistency | Fix in next sprint |
|
|
| Medium | Minor inconsistency | Plan for refactoring |
|
|
| Low | Optimization opportunity | Nice to have |
|
|
|
|
## Related Tools
|
|
|
|
- `dss_audit_components` - Main audit tool
|
|
- `dss_analyze_project` - Broader project analysis
|
|
- `dss_find_quick_wins` - Find easy fixes
|
|
- `dss_extract_tokens` - Create tokens from findings
|
|
|
|
## Output Structure
|
|
|
|
```json
|
|
{
|
|
"components_analyzed": 45,
|
|
"hardcoded_values": [
|
|
{
|
|
"file": "Button.tsx",
|
|
"line": 12,
|
|
"value": "#0066cc",
|
|
"type": "color",
|
|
"suggestion": "--color-primary"
|
|
}
|
|
],
|
|
"consolidation_opportunities": [
|
|
{
|
|
"components": ["PrimaryButton", "SecondaryButton"],
|
|
"suggested_name": "Button",
|
|
"variant_prop": "variant"
|
|
}
|
|
],
|
|
"dependency_issues": [],
|
|
"accessibility_issues": []
|
|
}
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Run Regularly**
|
|
- Audit before major refactors
|
|
- Include in CI/CD pipeline
|
|
- Track metrics over time
|
|
|
|
2. **Prioritize Fixes**
|
|
- Start with high-impact, low-effort
|
|
- Group related changes
|
|
- Document decisions
|
|
|
|
3. **Team Alignment**
|
|
- Share audit results
|
|
- Discuss consolidation decisions
|
|
- Update component guidelines
|