Initial commit
This commit is contained in:
Zhongwei Li
217
skills/style-master/README.md
Normal file
217
skills/style-master/README.md
Normal file
@@ -0,0 +1,217 @@
|
||||
# Style Master Skill
|
||||
|
||||
**Expert CSS & Frontend Styling Specialist**
|
||||
|
||||
Style Master is your go-to expert for all things CSS, design systems, and frontend styling. It analyzes codebases, maintains style guides, suggests improvements, and ensures beautiful, consistent, accessible UIs.
|
||||
|
||||
## What It Does
|
||||
|
||||
### 🔍 **Codebase Analysis**
|
||||
- Detects styling approach (Tailwind, CSS-in-JS, Sass, etc.)
|
||||
- Extracts design tokens (colors, spacing, typography)
|
||||
- Identifies patterns and inconsistencies
|
||||
- Assesses accessibility and performance
|
||||
|
||||
### 📚 **Style Guide Maintenance**
|
||||
- Generates living style guides from your code
|
||||
- Documents design tokens and component patterns
|
||||
- Keeps guidelines up-to-date
|
||||
- Integrates with Oracle to remember preferences
|
||||
|
||||
### 💡 **Suggestions & Improvements**
|
||||
- Modernization opportunities (Grid, custom properties, etc.)
|
||||
- Performance optimizations
|
||||
- Accessibility enhancements
|
||||
- Consistency improvements
|
||||
|
||||
### 🎨 **Expert Styling**
|
||||
- Modern CSS techniques (Container queries, Grid, Flexbox)
|
||||
- Framework expertise (Tailwind, styled-components, etc.)
|
||||
- Design system development
|
||||
- Dark mode and theming support
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Analyze Your Codebase
|
||||
|
||||
```bash
|
||||
python .claude/skills/style-master/scripts/analyze_styles.py --detailed
|
||||
```
|
||||
|
||||
### Generate Style Guide
|
||||
|
||||
```bash
|
||||
python .claude/skills/style-master/scripts/generate_styleguide.py --output docs/STYLEGUIDE.md
|
||||
```
|
||||
|
||||
### Validate Consistency
|
||||
|
||||
```bash
|
||||
python .claude/skills/style-master/scripts/validate_consistency.py
|
||||
```
|
||||
|
||||
### Get Suggestions
|
||||
|
||||
```bash
|
||||
python .claude/skills/style-master/scripts/suggest_improvements.py
|
||||
```
|
||||
|
||||
## Use Cases
|
||||
|
||||
### 1. Start a New Project
|
||||
```
|
||||
Use the style master skill to set up a design system for our new React app.
|
||||
|
||||
[Proposes modern approach with Tailwind + CSS custom properties]
|
||||
[Generates initial style guide]
|
||||
[Sets up design tokens]
|
||||
```
|
||||
|
||||
### 2. Maintain Consistency
|
||||
```
|
||||
Analyze our styles and ensure everything follows our design system.
|
||||
|
||||
[Scans codebase]
|
||||
[Finds 5 colors not in design tokens]
|
||||
[Suggests consolidation]
|
||||
```
|
||||
|
||||
### 3. Modernize Legacy Styles
|
||||
```
|
||||
Help modernize our CSS from floats to modern layouts.
|
||||
|
||||
[Analyzes current CSS]
|
||||
[Proposes Grid/Flexbox migration]
|
||||
[Works with Summoner for large refactor]
|
||||
```
|
||||
|
||||
### 4. Create Components
|
||||
```
|
||||
Style a card component with our design system.
|
||||
|
||||
[Loads style guide]
|
||||
[Uses design tokens]
|
||||
[Creates responsive, accessible card]
|
||||
[Documents in style guide]
|
||||
```
|
||||
|
||||
## Integration with Other Skills
|
||||
|
||||
### With Oracle 🧠
|
||||
- Remembers your style preferences
|
||||
- Records component patterns
|
||||
- Tracks design decisions
|
||||
- Avoids repeated style mistakes
|
||||
|
||||
### With Summoner 🧙
|
||||
- Coordinates large styling refactors
|
||||
- Multi-phase design system rollouts
|
||||
- Complex component library updates
|
||||
|
||||
### With Documentation Wizard 📝
|
||||
- Syncs style guide with documentation
|
||||
- Auto-updates component docs
|
||||
- Keeps examples current
|
||||
|
||||
## Modern Techniques
|
||||
|
||||
### Container Queries
|
||||
```css
|
||||
.card {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@container (min-width: 400px) {
|
||||
.card { display: grid; }
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Custom Properties
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #007bff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-primary: #0d6efd;
|
||||
}
|
||||
```
|
||||
|
||||
### Modern Layouts
|
||||
```css
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility First
|
||||
|
||||
Style Master ensures:
|
||||
- ✅ WCAG AA/AAA color contrast
|
||||
- ✅ Visible focus indicators
|
||||
- ✅ Keyboard navigation support
|
||||
- ✅ Screen reader compatibility
|
||||
- ✅ `prefers-reduced-motion` respect
|
||||
|
||||
## Framework Support
|
||||
|
||||
- **Tailwind CSS**: Theme config, plugins, optimization
|
||||
- **CSS-in-JS**: styled-components, Emotion
|
||||
- **Sass/SCSS**: Modern patterns, organization
|
||||
- **CSS Modules**: Component-scoped styles
|
||||
- **UI Libraries**: Material UI, Chakra UI, shadcn/ui
|
||||
|
||||
## Scripts Reference
|
||||
|
||||
| Script | Purpose |
|
||||
|--------|---------|
|
||||
| `analyze_styles.py` | Analyze codebase styling approach and patterns |
|
||||
| `generate_styleguide.py` | Create living style guide from code |
|
||||
| `validate_consistency.py` | Check adherence to design tokens |
|
||||
| `suggest_improvements.py` | Suggest modernization and optimizations |
|
||||
|
||||
## Example Workflow
|
||||
|
||||
```bash
|
||||
# 1. Analyze current state
|
||||
python .claude/skills/style-master/scripts/analyze_styles.py --detailed
|
||||
|
||||
# 2. Generate style guide
|
||||
python .claude/skills/style-master/scripts/generate_styleguide.py
|
||||
|
||||
# 3. Review and customize STYLEGUIDE.md
|
||||
|
||||
# 4. Validate consistency
|
||||
python .claude/skills/style-master/scripts/validate_consistency.py
|
||||
|
||||
# 5. Get improvement suggestions
|
||||
python .claude/skills/style-master/scripts/suggest_improvements.py
|
||||
|
||||
# 6. Use Style Master skill in Claude Code
|
||||
# "Use the style master skill to implement the new design system"
|
||||
```
|
||||
|
||||
## Philosophy
|
||||
|
||||
**"Form follows function, but both deserve excellence."**
|
||||
|
||||
- Consistency is king
|
||||
- Maintainability matters
|
||||
- Performance counts
|
||||
- Accessibility first
|
||||
- Modern but pragmatic
|
||||
|
||||
## Success Indicators
|
||||
|
||||
✅ **Style Master is working when:**
|
||||
- Visual consistency across app
|
||||
- Up-to-date style guide
|
||||
- No duplicate styles
|
||||
- WCAG compliance
|
||||
- Optimized performance
|
||||
- Design tokens used consistently
|
||||
|
||||
---
|
||||
|
||||
**Style Master v1.0** - Beautiful, consistent, accessible interfaces
|
||||
Reference in New Issue
Block a user