---
name: css-generator-editor-enhancer
description: Comprehensive CSS generation, editing, and enhancement tool. Use this skill when users need to create CSS from scratch, modify existing CSS, enhance CSS with modern features, optimize CSS performance, or generate CSS frameworks and components. This skill handles CSS generation, editing, enhancement, validation, and optimization tasks.
---

# CSS Generator, Editor and Enhancer Skill

## Overview
This skill provides comprehensive CSS generation, editing, and enhancement capabilities. It helps users create, modify, optimize, and enhance CSS code with modern features and best practices.

## When to Use This Skill
Use this skill when:
- Creating new CSS files from scratch based on user requirements
- Modifying or editing existing CSS properties and rules
- Enhancing CSS with modern features like variables, flexbox, grid, animations
- Optimizing CSS for performance and minification
- Generating CSS components and frameworks
- Converting design specifications to CSS code
- Validating and linting CSS code

## Core Capabilities

### 1. CSS Generation
- Generate CSS from design specifications
- Create CSS for specific layouts (flexbox, grid, etc.)
- Generate responsive CSS based on breakpoints
- Create CSS animations and transitions
- Generate utility classes (similar to Tailwind)

### 2. CSS Editing
- Modify existing CSS properties
- Update CSS selectors and rules
- Refactor CSS for better organization
- Convert between different CSS syntaxes (e.g., traditional to CSS-in-JS)

### 3. CSS Enhancement
- Add modern CSS features to legacy code
- Implement CSS custom properties (variables)
- Enhance with flexbox and grid layouts
- Add modern typography and spacing
- Improve accessibility features

### 4. CSS Optimization
- Minify CSS for production
- Remove unused CSS rules
- Optimize CSS selectors for performance
- Combine and organize CSS files

## Usage Patterns

### For CSS Generation
When users ask for:
- "Create CSS for a responsive navigation bar"
- "Generate CSS for a card component"
- "Create a CSS grid layout for a dashboard"
- "Generate CSS animations for a button"

### For CSS Editing
When users ask to:
- "Update the color scheme in this CSS file"
- "Change the font sizes in this stylesheet"
- "Modify the media queries for mobile"

### For CSS Enhancement
When users want to:
- "Modernize this CSS with flexbox"
- "Add CSS variables to this stylesheet"
- "Improve the accessibility of this CSS"
- "Convert this to use CSS Grid instead of floats"

## Available Tools

### Scripts
- `generate-css.js`: Generate CSS based on specifications
- `optimize-css.js`: Minify and optimize CSS
- `css-validator.js`: Validate CSS syntax
- `css-enhancer.js`: Add modern features to existing CSS

### Assets
- CSS templates for common components
- Predefined color palettes
- Responsive breakpoints configurations
- CSS framework boilerplates

## Workflow

1. **Analyze Requirements**: Understand what CSS functionality is needed
2. **Select Approach**: Choose between generation, editing, or enhancement
3. **Apply Best Practices**: Use modern CSS features and performance considerations
4. **Validate Output**: Ensure CSS is valid and follows best practices
5. **Optimize**: Minify or enhance as needed

## Best Practices

### Modern CSS Features
- Use CSS custom properties (variables) for maintainability
- Implement flexbox and grid for layouts
- Use logical properties for internationalization
- Leverage modern units (rem, em, fr, etc.)
- Apply container queries where appropriate

### Performance Considerations
- Minimize CSS file size
- Optimize selectors for performance
- Use efficient animation properties (transform, opacity)
- Consider critical CSS for above-the-fold content

### Accessibility
- Ensure sufficient color contrast
- Use semantic CSS where appropriate
- Consider focus states and keyboard navigation
- Support reduced motion preferences